Konva JS拖拽或缩放Line形状后无法正确获取点新位置问题

你遇到的偏移、无操作变形问题本质是变换属性重复叠加导致的：

• Konva中拖拽、Transformer缩放操作不会直接修改Line的points数组，只会修改节点自身的x/y（位移）、scaleX/scaleY（缩放）属性。
• 你每次计算时传入的是存在状态里的旧obj.points，计算完成回写后又没有重置节点的位移、缩放属性，相当于新的点位已经包含了上一次的变换结果，节点本身还带着旧的位移缩放值，渲染时会把变换再算一遍，累积几次就会出现偏移翻倍、无操作变形的问题。

按照以下步骤修改即可拿到准确的点位坐标：

• 不要用状态里存储的旧点位做计算，直接取Line节点当前实时的本地点位（即节点内部存的未叠加位移缩放的原始points值）
• 用getAbsoluteTransform().point()把本地点位转成舞台绝对坐标
• 计算完成后必须重置节点的位移、缩放属性为初始值，再把新的绝对坐标点位赋值给节点，避免变换重复叠加
• 该逻辑同时兼容拖拽结束、Transformer缩放结束的场景

修改后的核心代码如下，你还需要给Transformer绑定onTransformEnd事件，复用这套逻辑处理缩放结束的点位更新：

const handleTransformEnd = () => {
  const lineNode = shape.current;
  const localPoints = lineNode.points();
  const absolutePoints = [];

  // 逐点转换为绝对坐标
  for (let i = 0; i < localPoints.length; i += 2) {
    const { x, y } = lineNode.getAbsoluteTransform().point({
      x: localPoints[i],
      y: localPoints[i + 1]
    });
    absolutePoints.push(x, y);
  }

  // 重置节点变换属性，消除叠加影响
  lineNode.position({ x: 0, y: 0 });
  lineNode.scale({ x: 1, y: 1 });
  lineNode.points(absolutePoints);

  // 转换为你业务需要的二维数组格式存库
  const formattedPoints = [];
  for (let i = 0; i < absolutePoints.length; i += 2) {
    formattedPoints.push([absolutePoints[i], absolutePoints[i + 1]]);
  }
  onDragEnd(obj.id, [formattedPoints]);
};

// 拖拽结束直接复用处理逻辑
const handleDragEnd = handleTransformEnd;

对应的Transformer组件需要补充事件绑定：

<Transformer
  ref={transformer}
  rotateEnabled={false}
  ignoreStroke
  keepRatio={false}
  borderStroke={obj.color}
  onTransformEnd={handleTransformEnd}
/>

• 不要在dragmove/transformmove这类实时触发的事件中执行上述重置逻辑，会导致拖拽、缩放操作卡顿，仅在操作结束的事件中处理即可
• 你设置的strokeScaleEnabled={false}不会影响点位计算，重置变换属性后描边宽度会保持你设置的2px，不会随缩放变粗/变细
• 如果后续开启旋转功能，这套逻辑依然适用，不需要额外调整坐标计算规则

内容的提问来源于stack exchange，提问作者Kevin Whitaker