react-konva - Konva React - 悬停的 DOM 元素的碰撞检测

Question

我正在将 React 与 Konva 一起使用。我将一个 DOM 元素拖到画布上并创建一个 Konva 节点，就像文档中的 lion 演示一样，除了我从放置的元素创建一个圆形形状。

我希望在用户将 DOM 元素悬停在画布上之前进行一些验证。它应该将画布上现有的 Circle 形状与悬停的 DOM 元素进行比较（它将替换它悬停在上面的 Circle），这样它要么替换现有的形状（如果有的话），或者直接丢弃它（如果没有的话）。我认为碰撞检测可能是解决这个问题的好方法？

1. 当用户开始拖动时，我是否需要将 DOM 元素“转换”为 Konva 节点以进行验证？
2. 如果是这样，我如何“转移”悬停的事件？我是否应该从 DOM 元素的 onDragStart 创建 Konva 节点并以某种方式将其传输到画布，或者我该怎么做？

标签： react-konvakonva

Answer 1

You can use stage.getIntersection(stage.getPonterPosition()) on drop to check if you have a shape under mouse.

Based on that, you can replace it or create a new one (if there is no shape).

https://konvajs.org/api/Konva.Stage.html#getIntersection