画布形状缩放

Question

我正在使用konva库的canvas，试图对canvas元素进行缩放。我可以很容易地通过CSS将其缩小，但问题在于我绘制的形状可点击。当canvas缩小时，其元素也会缩小，但它们的掩码或可点击区域不会。这意味着，如果我在缩小的canvas上单击形状，则由于点击掩码处于不同的位置且与原始大小相同，因此什么也不会发生。

我的问题是如何同时缩放形状的点击掩码和canvas基础。

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的缩放选项，但在形状点击遮罩上产生的效果与max-width相同。

- Metzger

---

我没有使用过 konvajs，但是你应该可以重新设置 stage 的大小吧？ - Mox

Answer 1

不要使用CSS进行缩放。

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

- lavrton