线的缩放点 - konvajs答案

【问题标题】：Scaling points of line - konvajs线的缩放点 - konvajs
【发布时间】：2019-08-24 12:34:53
【问题描述】：

我希望在 KonvaJS 线路上进行转换。我已经完成了所有工作，并且可以缩放对象，但是我希望它可以调整线的点，而不是在我抓住调整大小手柄时设置 scale 属性。也会考虑在路径中执行此操作。

所以目标是我的对象 scaleX 和 scaleY 始终为 1，并且只是缩小的点。

这可能吗？

【问题讨论】：

【解决方案1】：

您只需将比例应用于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

【讨论】：

这并不完全正确：假设您增加了从右下角拖动它的形状的大小。我希望您的示例的第一点（左上角的点，x：50，y：50）不会改变，这不是真的。实际情况是，这样一来，代表整个形状的点会稍微移到舞台的右下方。
我使用shape.getAbsoluteTransform().point({}) 改进了您的示例并将x 和y 位置重置为0。在此示例中，newPoints 是调整大小形状的点的精确表示：jsbin.com/gojiwuwaqe/edit?html,js,output