javascript-画布形状缩放

我正在将画布与konva库一起使用,并且正在尝试缩放canvas元素.
我可以轻松地使用CSS缩小比例,但是问题是我在其中绘制的形状是可单击的.当画布按比例缩小时,元素也是如此,但是其遮罩或可单击区域却没有.这意味着,如果我单击缩小的画布上的形状,则不会发生任何事情,因为单击蒙版的位置与原始位置相同,并且比例相同.

问题是如何缩放画布底座旁边的形状单击蒙版？

var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500
});
for (var i = 0; i < shapes.length; i++) {
  var s = shapes[i];
  var links = document.getElementsByClassName(s.link);
  var poly = new Konva.Line({
    points: s.points,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 5,
    closed: true,
    opacity: 0
  });

  poly.on('mousedown touchstart', function () {
    var polyfind = stage.find('Line');
    for (var i = 0; i < polyfind.length; i++) {
      polyfind[i].opacity(0);
    }

  }
  layer.add(poly);
}

形状来自json文件

"Shapes": [
  {
    "points": [ 100, 100, 150, 100, 150, 150, 100, 150 ],
    "link": "A",
  }
]

在CSS方面,它的最大宽度是：100％；等等.甚至尝试过CSS Zoom选项,但它的效果与形状单击蒙版上的max-width相同.

解决方法:

不要使用CSS进行缩放.

使用stage.scale()方法设置值.可能您也需要更改舞台的大小.

标签：canvas,konvajs,css,html,javascript
来源： https://codeday.me/bug/20191110/2013342.html