线的缩放点- konvajs

Question

我正在寻找一个在KonvaJS行上的转换。当我抓取一个调整大小的手柄时，我想让它调整线条的点，而不是设置scale属性。也会考虑在路径中这样做。

所以我们的目标是我的对象scaleX和scaleY始终是1，它只是向外扩展的点。

这有可能吗？

Answer 1

您只需将scale应用于points属性：

shape.on('transformend', () => {
  const oldPoints = shape.points();
  const newPoints = [];
  for(var i = 0; i< oldPoints.length / 2; i++) {
    const point = {
      x: oldPoints[i * 2] * shape.scaleX(),
      y: oldPoints[i * 2 + 1] * shape.scaleY(),
    }
    newPoints.push(point.x, point.y);
  }
  shape.points(newPoints);
  shape.scaleX(1);
  shape.scaleY(1);
  layer.draw();
})

演示：https://jsbin.com/vuhakuvoxa/1/edit?html,js,output