如何移动一组对象并保持它们的新位置处于状态？

Question

我是 React Konva 的新手，正在尝试了解自己的位置。

我有一个相对简单的用例；包含一个矩形和一些线条的组。我希望能够拖放整个组，并捕获拖动端的新位置。

我尝试基于 e.target.x() 和 e.target.y() 使用 Group 上的 onDragEnd 设置状态，但这给出了一些我不理解的行为（沙箱中的橙色矩形） ).

代码沙箱

如何在获得新位置的同时获得我想要的行为（蓝色矩形）？

Answer 1

所有 Konva 节点的位置都是相对于父节点的。每个节点都有自己的

x

和

y

位置。

拖动组时，GROUP 的位置会发生变化。它表示组实例的实际

x

和

y

属性。即使您没有明确定义该组的

x

和

y

，它们仍然存在。

矩形在画布上的绝对位置由其自身位置和所有部分的位置定义。喜欢

Absolute Position of Rectangle = Position of stage + position of layer + position of group + position of rectangle.

这是您的 onDragEnd 处理程序：

<Group
  draggable
  onDragEnd={(e) => {
    setRectPos({
      x: e.target.x(),
      y: e.target.y(),
    });
  }}
>

在此代码中，

e.target

- 是组实例。因此，使用它的位置作为矩形位置没有多大意义，这就是为什么会有这样的跳跃。因为位置更改会应用两次：(1) 通过拖动，(2) 通过更新状态。

更好的方法是这样的：

const [rectPos, setRectPos] = useState({ x: 100, y: 100 });

<Group
  draggable
  x={rectPos.x}
  y={rectPos.y}
  onDragEnd={(e) => {
    setRectPos({
      x: e.target.x(),
      y: e.target.y(),
    });
  }}
>
  <Rect width={100} height={100} fill="orange" />
  <Line
    lineCap={"round"}
    x={50}
    y={50}
    points={[0, 0, 0, 0]}
    strokeWidth={10}
    stroke={"green"}
  />
</Group>