动力学js中的碰撞检测+鼠标事件

Posted 2023-05-08

【中文标题】动力学js中的碰撞检测+鼠标事件

【英文标题】：collision detection + mouse events in kineticjs

【发布时间】：2013-05-13 04:54:09

【问题描述】：

我正在尝试对许多可拖动的矩形对象进行拖放。

还有另一组 矩形对象 充当放置对象的容器 - 我已将它们添加到 组强>。

如何检测组/或任何框对象（存储在数组中）与可拖动元素之间的碰撞。

一切都在一个层中。

此外，当可拖动元素放置在组框上时，它不会监听鼠标悬停事件（分配给它） - 有没有办法委派事件（mouseover，mouseout ) 当另一个元素拖动到低级对象时。

box.on("鼠标悬停", 功能（e） console.log("mouseover"););

谢谢。

【参考方案1】：

我相信 KineticJS 不支持它自己的碰撞检测，因此您必须编写自己的函数。这 2 个 SO 问题是很好的起点：

Dragging collisions

html5 / kineticJS getIntersection function implementation

参考这个问题的答案：How to start mouseover event while dragging

我们看到我们可以在 KineticJS 上进行类似的操作，并且该解决方案与创建您自己的碰撞检测函数密切相关。这里唯一的区别是，您可以计算每个形状（在您的情况下为矩形）的 4 个角点坐标，而不是计算 div 上的命中检测坐标。此外，您可以使用 getMousePos() 和事件：dragstart、dragend 和 mousemove 来重写小提琴示例中的代码并满足您的动态矩形，而不是编写自己的拖动函数。