react-konva 使用可拖动的舞台和滚动缩放拖放图像 - 如何更改放置位置以匹配 zoom/current 位置
react-konva drag and drop image with draggable stage and scroll zoom - how to change drop location to match zoom/current position
所以我正在尝试构建一个应用程序，用户可以在其中使用一个图像库，他们可以将它们拖放到舞台上以创建一种图像图表。所以为此我想让他们能够放大和缩小舞台，以及通过使舞台可拖动来移动它。
问题在于，当我通过拖动或缩放来移动舞台时 in/out 然后尝试将图像放置在舞台上，它会捕捉到舞台的原始比例而不是新位置，我我不确定如何更改它以使图像下降到当前位置，无论缩放比例如何或拖动舞台的任何位置。
codesandbox 在这里：https://codesandbox.io/s/react-konva-drag-and-drop-image-with-draggable-stage-and-scroll-zoom-6977j?file=/src/Draganddrop.js
我删除了很多代码，以简化示例中的一张图片，但没有任何内容改变它在本节中的基本工作方式。
非常感谢任何帮助。
对于下降位置，您使用的是 stageRef.current.getPointerPosition()。 stage.getPointerPosition() returns 指针相对于 canvas 元素左上角的绝对位置。所以它忽略了舞台的缩放。
相反，您可以使用 stage.getRelativePointerPosition()。它将 return 转换指针位置相对于使用的 Konva 节点（在这种情况下为阶段）。
所以我正在尝试构建一个应用程序，用户可以在其中使用一个图像库，他们可以将它们拖放到舞台上以创建一种图像图表。所以为此我想让他们能够放大和缩小舞台，以及通过使舞台可拖动来移动它。
问题在于，当我通过拖动或缩放来移动舞台时 in/out 然后尝试将图像放置在舞台上，它会捕捉到舞台的原始比例而不是新位置，我我不确定如何更改它以使图像下降到当前位置，无论缩放比例如何或拖动舞台的任何位置。
codesandbox 在这里：https://codesandbox.io/s/react-konva-drag-and-drop-image-with-draggable-stage-and-scroll-zoom-6977j?file=/src/Draganddrop.js
我删除了很多代码，以简化示例中的一张图片，但没有任何内容改变它在本节中的基本工作方式。
非常感谢任何帮助。
对于下降位置，您使用的是 stageRef.current.getPointerPosition()。 stage.getPointerPosition() returns 指针相对于 canvas 元素左上角的绝对位置。所以它忽略了舞台的缩放。
相反，您可以使用 stage.getRelativePointerPosition()。它将 return 转换指针位置相对于使用的 Konva 节点（在这种情况下为阶段）。