Konva.js：使用Transformer缩放Line绘制的多边形时x、y偏移问题求助

针对你用Line绘制矩形并通过Transformer缩放时出现的坐标偏移问题，常见原因和解决办法如下：

• 锚点基准不匹配
  Transformer默认以元素的中心作为缩放/变换的基准点，但你用Line绘制的矩形，其坐标基准大概率是左上角。缩放时两个基准点不一致，就会导致元素整体偏移。
  解决办法：直接将Transformer的变换原点改为左上角，和你的矩形坐标基准对齐：

  const transformer = new Konva.Transformer({
    transformOrigin: 'top-left'
  });
  

• Line的边界盒计算偏差
  用Line绘制矩形时，如果点的顺序不规范（比如没有严格按顺时针/逆时针闭合，或者点的坐标有微小误差），Konva计算Line的bounding box时可能出现偏差，Transformer基于错误的边界盒做变换，就会导致偏移。
  解决办法：检查你的Line的points数组，确保是严格的[x1, y1, x2, y1, x2, y2, x1, y2]格式（左上角→右上角→右下角→左下角），并且四个点严格构成矩形。

• 未同步更新Transformer状态
  将Line添加到Transformer后，可能需要强制更新Transformer的状态，确保它正确读取Line的当前坐标和尺寸。可以在添加节点后调用：

  transformer.nodes([yourLine]);
  transformer.forceUpdate();
  

如果以上方法都没解决，建议检查Line的offset属性是否被意外设置，或者是否有其他代码在缩放时额外修改了元素的x/y坐标。

内容的提问来源于stack exchange，提问作者Jurek O.