React-konva：使用絕對（舞台）坐標放置組的元素

Question

我在 1 周前才開始使用 React-Konva，但由於我對 Konva 缺乏了解，我在做的事情上遇到了問題，我無法弄清楚。

我有一個Stage ，里面有Layer和Group 。 在Group內，我有一個Rect和一些來自 api 的數據，這些數據將一些Image放在屏幕上。 實際上我可以移動Group ，我希望當我移動它時，它里面的所有元素一起移動，這實際上效果很好。

我可以調整Rect的大小，我想做的是將Image元素放置在絕對x,y （舞台的）上，而不是我不知道為什么，考慮到坐標，圖像被放置在舞台上Rect/Group的。

有沒有一種方法可以使用舞台區域坐標而不是Rect/Group坐標來放置圖像（在組內）。 實際上，當我調整Rect的大小時，將width, height,x and y保存到后端，然后重新加載或重新進入頁面，我看到Rect的大小調整正確，但所有Image元素都從左邊移動，因為它們的x, y是相對於Rect/Group而不是Stage

先感謝您

Answer 1

形狀的 position 是相對於它們的容器元素的。 在您的情況下，矩形和圖像將組作為容器，而組將圖層作為容器。

將形狀添加到組后，形狀的 position 是相對於組的 position 的。

如果你想設置圖像形狀 position 相對於舞台使用

image.absolutePosition({x: newStageX, y: newStageY}).

如果你想獲得相對於舞台使用的 position

absPos = shape.absolutePosition().

還有一個“node.getAbsolutePosition()”方法，它可以使用祖先節點來給出相對於該祖先節點的 position，但是沒有 equiv setter 方法。 不確定如何在 React 中應用它，但這就是你需要做的。