React-konva: place elements of a Group with absolute (stage) coordinates

Question

I started using React-Konva just 1 week ago, but I have a problem in what I am doing and I can't figure it out, due my lack of knowledge of Konva.

I have a Stage , with Layer and Group inside. Inside the Group I have a Rect and some data from an api that places some Image on the screen. Actually I can move the Group , and I want that when I move it, all elements inside it move together, which actually works great.

I can resize the Rect , and what I am trying to do is to place the Image elements with absolute x,y (of the stage), instead I don't know why, the images are placed on the stage taking into account the coordinates of the Rect/Group .

Is there a way to place the images (inside the group) using the stage area coordinates instead of the Rect/Group coordinates. Actually when I resize the Rect , saving width, height,x and y to backend, and then reload or re-enter the page, I see that the Rect is resized correctly, but all the Image elements are shifted from left because their x, y are relative to Rect/Group and not the Stage

Thank you in advance

Answer 1

The shape's position is relative to their container element. In your case the rect and image have the group as the container, and the group has the layer as the container.

Once a shape is added to a group, the shape's position is relative to the group's position.

If you want to set the image shape position relative to the stage use

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

If you want to get the position relative to the stage use

absPos = shape.absolutePosition().

There is also a 'node.getAbsolutePosition()' method that can take an ancestor node to give the position relative to that ancestor, but there is no equiv setter method. Not sure how to apply that in React but that's what you need to do.