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

Question

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

还有另一组矩形对象用作放置对象的容器 - 我已将它们添加到组中。

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

一切都在一个单一的层。

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

   box.on("mouseover", function(e) { console.log("mouseover");});

谢谢。

Answer 1

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

   拖动碰撞

   HTML5 / kineticJS getIntersection 函数实现

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

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