[英]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 . 还有另一组矩形对象充当放置对象的容器-我已将它们添加到组中 。
Everything is in a single layer. 一切都在单层中。
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. 谢谢。
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问题是很好的起点:
HTML5 / kineticJS getIntersection function implementation HTML5 / dynamicJS getIntersection函数实现
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.