拖动组react-konva后如何获取/更新孩子的位置

Question

因此，在我使用react-konva的Web应用程序中，我有一个工具可以让我绘制顶点为圆形的多边形，我可以拖动顶点并更新顶点的状态，但我希望能够拖动整个多边形并获取圈子在组中的新位置来更新我的状态。

我在我的

handleDragEnd

功能中尝试过这个：

const handlePolygonDragEnd = (
        event: KonvaEventObject<DragEvent>,
        polygonName: string
    ) => {
        if (isDrawing) return;

        const group = event.target;

        const newGroupPosition = {x:group.x(), y:group.y()};
       
        if (group === null) return;
        if (group instanceof Konva.Group) {
            // const children = group.getChildren().slice(1);

            const newPolygons = polygons.map((polygon) => {
                if (polygon.name === polygonName) {
                    const newPoints = polygon.points.map((point) => {
                        return [point[0] + newGroupPosition.x, point[1] + newGroupPosition.y];
                    });
                    return {
                        ...polygon,
                        points: [...newPoints],
                    };
                }
                return polygon;
            });
            setPolygons(newPolygons);

            // group.setAbsolutePosition({ x: 0, y: 0 });
        }
    };

但由于某种原因，它只会让我的多边形跳跃，而不是停留在我想要的位置。

编辑：这是我面临的问题的演示：Demo

谢谢你

Answer 1

你有一个跳跃，因为你改变了多边形的位置两次：

1. 移动组时，其

   x

   和

   y

   属性会发生变化。所有子元素都会被

   x

   和

   y

移动
2. 在

   dragend

   上，您将

   x

   和

   y

   添加到

   points

   属性中。它给你第二个（而不是预期的）移动。

有两种解决方案：

1. 请勿更改

   points

   。只要继续使用该组的

   x

   和

   y

   来控制其位置
2. 或者，读取

   x

   和

   y

   （拖动后的移位），更新

   points

   ，然后将组位置重置回

   {x: 0, y: 0}

   。