Konva.js中Transformer触发onDragMove重复调用问题求助

问题核心原因 #

当通过Transformer选中多个Line并拖动时，自定义的Line onDragMove 函数被额外触发一次，导致其中一个Line位移过大——本质是Transformer的自动变换逻辑与Line自身的drag事件处理逻辑产生冲突：Transformer会同步所有选中元素的位移，而手动重置Line坐标并更新state的操作，会触发额外的重绘与事件重复调用。

解决方法 #

1. 移除Line自身的onDragMove绑定 #

既然使用Transformer处理多选拖动，无需单独给Line绑定拖动事件，Transformer会自动同步所有选中元素的位移。如果必须保留自定义逻辑，需避免重复处理位移。

2. 替换事件类型，避免重复触发 #

将Line的onDragMove替换为onTransform事件，因为Transformer的变换操作会触发元素的transform事件，而非重复的dragMove，示例代码：

<Line
  id={line.id}
  points={line.points}
  closed={true}
  onTransform={(e) => {
    const node = e.target;
    const matrix = node.getTransform().getMatrix();
    // 获取旧坐标
    const oldPoints = lines.find(l => l.id === node.id()).points;
    // 计算变换后的新坐标
    const newPoints = oldPoints.map((val, idx) => {
      const x = idx % 2 === 0 ? val : oldPoints[idx - 1];
      const y = idx % 2 === 1 ? val : oldPoints[idx + 1];
      return matrix[0] * x + matrix[2] * y + matrix[4];
    });
    // 更新状态
    setLines(lines.map(l => l.id === node.id() ? {...l, points: newPoints} : l));
    // 重置元素变换矩阵，避免累积计算
    node.setTransform(1, 0, 0, 1, 0, 0);
  }}
/>

3. 通过Transformer事件统一处理多选变换 #

更合理的方式是监听Transformer的transform事件，一次性处理所有选中元素的坐标更新，避免单个Line处理导致的冲突：

<Transformer
  ref={transformerRef}
  onTransform={(e) => {
    const nodes = e.target.nodes();
    nodes.forEach(node => {
      const matrix = node.getTransform().getMatrix();
      const oldPoints = lines.find(l => l.id === node.id()).points;
      const newPoints = oldPoints.map((val, idx) => {
        const x = idx % 2 === 0 ? val : oldPoints[idx - 1];
        const y = idx % 2 === 1 ? val : oldPoints[idx + 1];
        return matrix[0] * x + matrix[2] * y + matrix[4];
      });
      // 重置元素变换状态
      node.setTransform(1, 0, 0, 1, 0, 0);
      // 更新坐标状态
      setLines(prev => prev.map(l => l.id === node.id() ? {...l, points: newPoints} : l));
    });
  }}
/>

关键注意事项 #

• 禁止同时让Transformer和Line自身的drag事件处理位移，否则必然出现重复计算与偏移。
• 手动更新坐标后，必须重置元素的变换矩阵，避免Konva叠加变换状态导致后续操作异常。
• 优先通过Transformer的事件统一处理多选元素的变换，逻辑更集中，冲突更少。

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