KonvaJS 中对 Group 内子节点执行位置交换时，若直接调用 position() 设置坐标却出现“停在两节点中点”的异常行为，根本原因在于：Group 的 x/y 是其自身坐标系原点，而子节点的 x/y 默认相对于 Group 原点定位；直接交换会导致父子坐标系错位，必须同步调整子节点相对偏移或统一使用绝对坐标策略。
konvajs 中对 group 内子节点执行位置交换时，若直接调用 `position()` 设置坐标却出现“停在两节点中点”的异常行为，根本原因在于：group 的 `x`/`y` 是其自身坐标系原点，而子节点的 `x`/`y` 默认相对于 group 原点定位；直接交换会导致父子坐标系错位，必须同步调整子节点相对偏移或统一使用绝对坐标策略。
在 KonvaJS 中实现两个节点（尤其是同属一个 Group 的节点）之间的精准位置互换，不能简单套用普通 Shape 的 position({x, y}) 逻辑——因为 Group 引入了嵌套坐标系，这是开发者最容易忽略的关键陷阱。
? 问题本质：Group 的坐标体系是“双层”的
- Group 自身有 x, y（即 Group 原点在父容器中的位置）；
- 其子节点（如 Konva.Rect、Konva.Circle）的 x, y 是相对于 Group 原点的局部坐标；
- 当你调用 draggedNode.position({x: 100, y: 200})，若 draggedNode 是 Group 的子节点，该坐标会被解释为「相对于 Group 左上角的偏移」，而非 Stage 上的绝对位置；
- 而 getClientRect() 返回的是 Stage 坐标系下的矩形，二者坐标系不一致 → 直接赋值必然错位（典型表现为“停在中点”）。
✅ 正确解法：统一使用「绝对坐标 + 局部偏移反算」
要实现视觉上“两个图形完全互换位置”，推荐以下鲁棒方案：
✅ 步骤 1：获取两个节点在 Stage 坐标系下的绝对位置中心点
function getAbsoluteCenter(node: Konva.Node): { x: number; y: number } {
const rect = node.getClientRect();
return {
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2,
};
}✅ 步骤 2：将绝对中心点转换为目标 Group 内的局部坐标
// 假设 targetGroup 是两者共同父 Group
const groupRect = targetGroup.getClientRect();
const draggedLocal = {
x: absDragged.x - groupRect.x,
y: absDragged.y - groupRect.y,
};
const collidedLocal = {
x: absCollided.x - groupRect.x,
y: absCollided.y - groupRect.y,
};✅ 步骤 3：原子化交换子节点的局部 x/y
// 确保两个节点同属 targetGroup
const draggedChild = draggedNode as Konva.Shape;
const collidedChild = collidedNode as Konva.Shape;
// 交换局部坐标（关键！）
const tempX = draggedChild.x();
const tempY = draggedChild.y();
draggedChild.position({ x: collidedChild.x(), y: collidedChild.y() });
collidedChild.position({ x: tempX, y: tempY });
// 强制重绘
targetGroup.getLayer()?.draw();⚠️ 注意事项：
- 不要混用 position() 和 x/y 直接赋值：Konva 中 position() 是方法，node.x() 是 getter/setter，二者语义一致，但务必确保操作对象是同一层级节点；
- Group 自身 x/y 不应参与交换：除非你刻意想移动整个 Group，否则只交换子节点的局部坐标；
- Z-index 交换需谨慎：zIndex() 是渲染顺序控制，交换后建议显式调用 draggedChild.moveToTop() 或 collidedChild.moveToBottom() 配合视觉反馈；
- 避免在 dragend 中重复 getLayer().draw() 多次：应在所有状态更新完成后统一绘制一次。
? 进阶建议：使用 absolutePosition() 辅助调试
Konva 提供 node.absolutePosition() 方法，可实时查看节点在 Stage 坐标系中的真实位置，是排查坐标错位问题的黄金工具：
console.log('Dragged node absolute:', draggedNode.absolutePosition());
console.log('Collided node absolute:', collidedNode.absolutePosition());
// 若二者差异显著，说明局部坐标未对齐 Group 原点✅ 完整修复片段（整合进你的 dragend 逻辑）
nodeGroup.on("dragend", function (evt) {
const draggedNode = evt.currentTarget;
const layer = draggedNode.getLayer();
if (!layer) return;
let hasCollision = false;
const absDragged = getAbsoluteCenter(draggedNode);
for (let n = 0; n < numberOfData; n++) {
const id = `node-${n}`;
if (id === draggedNode.id()) continue;
const collidedNode = stage.find(`#${id}`)[0];
if (!collidedNode) continue;
const absCollided = getAbsoluteCenter(collidedNode);
if (!hasOverlap(draggedNode.getClientRect(), collidedNode.getClientRect())) continue;
// ✅ 核心：计算并交换局部坐标
const groupRect = nodeGroup.getClientRect();
const draggedLocal = {
x: absDragged.x - groupRect.x,
y: absDragged.y - groupRect.y,
};
const collidedLocal = {
x: absCollided.x - groupRect.x,
y: absCollided.y - groupRect.y,
};
// 执行交换（假设均为 Konva.Shape）
const d = draggedNode as Konva.Shape;
const c = collidedNode as Konva.Shape;
d.position({ x: collidedLocal.x, y: collidedLocal.y });
c.position({ x: draggedLocal.x, y: draggedLocal.y });
// 可选：提升被拖节点层级以增强视觉反馈
d.moveToTop();
hasCollision = true;
break;
}
if (!hasCollision) {
// 恢复原始局部位置（非绝对位置！）
(draggedNode as Konva.Shape).position(draggedNodeStartPosition);
}
layer.draw(); // ✅ 单次绘制，高效可靠
});通过严格区分 Stage 绝对坐标 与 Group 局部坐标，并始终以 Group 原点为基准进行偏移计算，即可彻底解决“位置交换后漂移到中点”的经典问题。这不仅是 KonvaJS 的最佳实践，更是理解任何嵌套 Canvas 渲染引擎坐标系统的关键一课。
