画布形状缩放

Question

我正在使用带有 konva 库的画布，并且正在尝试缩放画布元素。 我可以很容易地用 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 方面，它只是 max-width: 100%;等等。甚至尝试了 CSS Zoom 选项，但它的结果与形状点击掩码上的 max-width 相同。

Answer 1

不要使用 CSS 进行缩放。

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