本文详解如何在 konva.js 中正确实现两个节点（尤其是嵌套在 group 中的节点）拖拽重叠时的位置交换，避免因坐标体系误解导致目标节点偏移至中点等常见错误。
本文详解如何在 konva.js 中正确实现两个节点（尤其是嵌套在 group 中的节点）拖拽重叠时的位置交换，避免因坐标体系误解导致目标节点偏移至中点等常见错误。
在 Konva.js 构建交互式画布（如流程图编辑器、可视化编排工具）时，常需支持“拖一个节点到另一个节点上，自动交换二者位置”的功能。但许多开发者会遇到一个典型问题：交换后，被拖节点确实移动了，但目标节点却错位到了两节点中心点，而非原拖拽节点的原始位置。根本原因在于——混淆了局部坐标与世界坐标的层级关系，尤其当节点位于 Konva.Group 内时，position() 的语义与独立形状完全不同。
? 关键认知：Group 的 position 不等于其子节点的“锚点”
- 对于 Konva.Rect、Konva.Circle 等基础形状，x/y 表示其左上角（或圆心）在父容器（通常是 Layer）中的绝对坐标。
- 而 Konva.Group 的 x/y 是其自身坐标系原点在父容器中的偏移量；其子节点的 x/y 是相对于 Group 原点的局部坐标。
- 因此，若直接对 Group 调用 group.position({x: 100, y: 200})，相当于平移整个组；但若想“把 Group A 换到 Group B 的位置”，不能简单赋值 A.position(B.position()) —— 因为这仅设置了 A 的原点，而 A 内部所有子节点仍保持原有相对偏移，视觉上可能整体偏移。
✅ 正确做法是：统一在世界坐标空间中计算、交换，并反向映射回局部坐标。
✅ 推荐实现：基于 getAbsolutePosition() 与 toLocalPoint() 的鲁棒交换
以下是一个生产就绪的交换逻辑（适配 Group 和独立 Shape）：
nodeGroup.on('dragend', function (evt) {
const draggedGroup = evt.target; // 注意：此处应为被拖拽的 Group 实例
const draggedRect = draggedGroup.getClientRect();
let swapped = false;
for (let n = 0; n <h3>⚠️ 必须修正的关键点（来自你原始代码的问题）</h3><ol>
<li><p><strong>draggedNodeStartPosition 记录方式错误</strong><br>
❌ 错误：{ x: nodeGroup.x(), y: nodeGroup.y() } → 这是 Group 的<strong>局部 position</strong>，非世界坐标。<br>
✅ 正确：在 dragstart 中记录 nodeGroup.getAbsolutePosition()。</p></li>
<li><p><strong>checkNode.position(draggedNodeOldPosition) 直接赋值局部坐标</strong><br>
❌ 若 draggedNodeOldPosition 是世界坐标，而 checkNode 是 Group，则 position() 接收的是局部坐标，必然错位。<br>
✅ 必须先用 checkNode.getStage().getPointerPosition() 或 toLocalPoint() 转换。</p></li>
<li><p><strong>未处理 Group 内部子节点的相对布局</strong><br>
如果你的 Group 内含多个子节点（如图标+文字），仅移动 Group 的 position() 是正确且充分的——<strong>不要手动修改子节点的 x/y</strong>，否则将破坏内部布局结构。</p></li>
</ol><h3>? 总结：三原则保障交换精准性</h3>
| 原则 | 说明 |
|---|---|
| 世界坐标驱动 | 所有碰撞检测、位置读取、交换计算，统一基于 getAbsolutePosition() 和 getClientRect()（返回世界坐标矩形） |
| 逆向坐标转换 | 向目标 Group 设置新位置前，务必用 targetGroup.toLocalPoint(worldPoint) 转换 |
| 原子化操作 + batchDraw | 交换必须成对执行，最后调用 stage.batchDraw()（而非 layer.draw()），确保渲染一致性 |
通过以上方案，即可彻底解决“节点交换后跑到中点”的问题，实现符合直觉、像素级精准的拖拽交换体验。
