Konva React - 悬停 DOM 元素的碰撞检测
Konva React - Collision detection for hovered DOM elements
我正在使用 React 和 Konva。我正在将一个 DOM 元素拖到 canvas 上并创建一个 Konva 节点，就像文档中的狮子演示一样，只是我从拖放的元素创建了一个圆形。
我希望在用户悬停时将 DOM 元素放到 canvas 上之前进行一些验证。它应该将 canvas 上的现有圆形形状与悬停的 DOM 元素（它将替换它悬停的圆形）进行比较，以便它要么替换现有形状（如果有），要么直接删除它如果没有的话。我认为碰撞检测可能是解决此问题的好方法？
- 我是否需要在用户开始拖动时将 DOM 元素“转换”为 Konva 节点，以便进行验证？
- 如果是这样，如何“转移”悬停事件？我应该从 DOM 元素的 onDragStart 创建 Konva 节点并以某种方式将其传输到 canvas，还是我该怎么做？
您可以使用 stage.getIntersection(stage.getPonterPosition()) on drop 检查鼠标下是否有形状。
在此基础上，您可以替换它或创建一个新的（如果没有形状）。
我正在使用 React 和 Konva。我正在将一个 DOM 元素拖到 canvas 上并创建一个 Konva 节点，就像文档中的狮子演示一样，只是我从拖放的元素创建了一个圆形。
我希望在用户悬停时将 DOM 元素放到 canvas 上之前进行一些验证。它应该将 canvas 上的现有圆形形状与悬停的 DOM 元素（它将替换它悬停的圆形）进行比较，以便它要么替换现有形状（如果有），要么直接删除它如果没有的话。我认为碰撞检测可能是解决此问题的好方法？
- 我是否需要在用户开始拖动时将 DOM 元素“转换”为 Konva 节点，以便进行验证？
- 如果是这样，如何“转移”悬停事件？我应该从 DOM 元素的 onDragStart 创建 Konva 节点并以某种方式将其传输到 canvas，还是我该怎么做？
您可以使用 stage.getIntersection(stage.getPonterPosition()) on drop 检查鼠标下是否有形状。
在此基础上，您可以替换它或创建一个新的（如果没有形状）。