So I am trying to build an app where users have a library of images available to them and they can drag and drop them onto a stage to create a kind of image diagram. so for this I wanted to give them the ability to zoom in and out of the stage as well as move it around by making the stage draggable.
The problem lies that when I move the stage by dragging it around or zoom in/out then try and place an image on the stage it snaps to the original scale of the stage and not the new location, i am not sure how to change this to make the image drop to the current position whatever the zoom scale or wherever the stage has been dragged.
codesandbox here: https://codesandbox.io/s/react-konva-drag-and-drop-image-with-draggable-stage-and-scroll-zoom-6977j?file=/src/Draganddrop.js
I have removed a lot of code to keep it simple to one image for the example, but nothing that changes the way it fundamentally works for this section.
any and all help is greatly appreciated.
For drop position, you are using stageRef.current.getPointerPosition(). stage.getPointerPosition() returns absolute position of pointer relative to top-left of canvas element. So it is ignoring scaling of your stage.
Instead, you can use stage.getRelativePointerPosition(). It will return transformed pointer position relative to used Konva node (stage in that case).