Konva.js: 拖动的动态组

Question

我正在尝试在 Konva 中实现相当复杂的布局。我需要类似于 this codepen 的行为。我有多个形状，每当我开始拖动它们中的任何一个时，所有底层形状都应该随之拖动。不过，在 codepen 中，为了简单起见，此逻辑仅针对最顶部的矩形（红色）实现。

这就是我认为它会起作用的方式。

1. 在 mousedown 事件中，动态创建一个可拖动组，包括所有需要的形状
2. 在 dragend 事件中，取消组合元素

演示似乎工作正常，但问题是 group 总是有一个等于 (0, 0) 的位置，无论我开始拖动时它在哪里。您可以拖动红色矩形一段时间，然后打开您的控制台并查看 {x: 0, y: 0}。但是如何使它具有相对于图层的坐标？

我需要它，因为有时当拖动结束时，我需要将整个组移动到特定位置的动画，而且组的初始位置始终是 (0, 0) 的事实使得很难计算目标位置。

Answer 1

Konva中所有节点的位置都是相对的。默认情况下，每个节点的位置是 {0, 0}.

创建群组时，您可以为其设置其他位置。但请记住，您可能需要调整所有子项（矩形）的位置，因为它们的位置将相对于移动的组。

此外，您可以手动启动矩形拖动，无需分组。

r1.on('mousedown', () => {
  r1.startDrag();
  r2.startDrag();
  r3.startDrag();
});