简体   繁体   English

dynamicjs中的碰撞检测+鼠标事件

[英]collision detection + mouse events in kineticjs

I am trying to do a drag & drop on a number of rectangle objects that are draggable . 我试图做一个数字 ,可以拖动 矩形对象 拖放

There is another set of rectangle objects acting as container for dropping objects - I have added them to a group . 还有另一组矩形对象充当放置对象的容器-我已将它们添加到组中

  1. How can I detect the collision between a group/or any of the box objects(stored in array) - with the draggable elements. 如何检测 组/或任何框对象(存储在数组中)与可拖动元素之间的冲突

Everything is in a single layer. 一切都在单层中。

  1. Also when the draggable element is placed over the group box, it does not listen to the mouse over event (which is assigned to it) - is there a way to delegate the events(mouseover, mouseout) to the low level object when another element drags over it. 同样,当将可拖动元素放置在组框上时,它不会侦听(分配给它的)鼠标悬停事件- 当另一个元素存在时,有一种方法可以将事件(mouseover,mouseout)委托给低级对象拖过去。

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

Thanks. 谢谢。

  1. I believe that KineticJS doesn't support it's own collision detection so you would have to write your own function. 我相信KineticJS不支持它自己的冲突检测,因此您必须编写自己的函数。 These 2 SO questions are good starting points: 这两个SO问题是很好的起点:

    Dragging collisions 拖动碰撞

    HTML5 / kineticJS getIntersection function implementation HTML5 / dynamicJS getIntersection函数实现

  2. Referencing the answer to this question: How to start mouseover event while dragging 引用此问题的答案: 如何在拖动时启动mouseover事件

    We see that we can follow similarly on KineticJS, and that the solution goes hand in hand with creating your own collision detection function. 我们看到我们可以在KineticJS上进行类似的操作,并且该解决方案与创建自己的碰撞检测功能紧密结合。 The only difference here is instead of calculating the coordinates for hit detection on divs, you can calculate the 4 corner point coordinates of each shape (in your case, a rectangle). 唯一的区别是,您可以计算每个形状(在您的情况下为矩形)的4个角点坐标,而不是计算div上的点击检测坐标。 Also, instead of writing your own drag functions, you can use getMousePos() and the events: dragstart, dragend, and mousemove to rewrite the code from the fiddle example and cater to your kinetic rectangles. 另外,可以使用getMousePos()和以下事件(而不是编写自己的拖动函数):dragstart,dragend和mousemove来重写小提琴示例中的代码,并迎合您的动态矩形。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM