0

所以我正在尝试构建一个应用程序,用户可以在其中拥有一个可用的图像库,他们可以将它们拖放到舞台上以创建一种图像图表。所以为此,我想让他们能够放大和缩小舞台以及通过使舞台可拖动来移动它。

问题在于,当我通过拖动舞台或放大/缩小来移动舞台然后尝试将图像放在舞台上时,它会捕捉到舞台的原始比例而不是新位置,我不知道如何改变这个无论缩放比例或拖动舞台的任何位置,都可以使图像下降到当前位置。

这里的代码框: https ://codesandbox.io/s/react-konva-drag-and-drop-image-with-draggable-stage-and-scroll-zoom-6977j ?file=/src/Draganddrop.js

我已经删除了很多代码,以简化示例的一个图像,但没有改变它在本节中的基本工作方式。

非常感谢任何和所有帮助。

4

1 回答 1

0

对于放置位置,您正在使用stageRef.current.getPointerPosition(). stage.getPointerPosition()返回指针相对于画布元素左上角的绝对位置。所以它忽略了你舞台的缩放。

相反,您可以使用stage.getRelativePointerPosition()。它将返回相对于使用的 Konva 节点(在这种情况下为阶段)转换后的指针位置。

于 2021-08-25T08:37:56.950 回答