Question

我正在使用konva库的canvas，我正在尝试缩放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缩放选项，但它与形状点击蒙版上的最大宽度具有相同的结果。

Answer 1

不要使用CSS作为比例。

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

画布形状缩放

1 个答案: