Canvas 形状缩放

Question

我将 canvas 与 konva 库一起使用，我正在尝试缩放 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 一侧它只是最大宽度：100%；等。甚至尝试了 CSS 缩放选项，但结果与形状点击蒙版上的最大宽度相同。

Answer 1

不要使用 CSS 作为比例。

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

Canvas 形状缩放

Canvas Shape Scaling

javascript

html

css

canvas

konvajs