防止画布对象发生碰撞或相交 [英] Prevent collision or intersection of canvas objects

问题描述

我正在画布上绘制 n 个矩形.矩形是可拖动和可缩放的.我想防止它们重叠或相交.最好的情况是，如果它们只是相互对齐.

I'm drawing n rectangles on a canvas. The rectangles are draggable and scalable. I want to prevent them from overlapping or intersecting. The best case is, if they just snap to each other.

我想办法检查十字路口.在我的示例中，我将触摸对象的不透明度设置为 0.1.

I figured out to check the intersection. In my example I set the opacity of touching objects to 0.1.

巧合的是，在我尝试解决此问题时，我的对象在接触另一个对象时无法释放.请参阅 http://jsfiddle.net/gcollect/jZw7P/这是因为第 91 行没有执行警报.alert(math.abs(distx));

Coincidentally in my attempt to solve this problem, my objects cant be released when they touch another object. See http://jsfiddle.net/gcollect/jZw7P/ It's because of line 91, where the alert is not executed. alert(math.abs(distx));

实际上它是一种解决方案，但绝对不是一个优雅的解决方案.

Actually its a kind of solution, but definitely not an elegant one.

有什么想法吗?

推荐答案

对于那些仍然对解决方案感兴趣的人:我在这里解决了:https://stackoverflow.com/a/22649022/3207478 参见 jsfiddle:http:///jsfiddle.net/gcollect/FD53A/

For those who are still interested in the solution: I solved it here: https://stackoverflow.com/a/22649022/3207478 See jsfiddle: http://jsfiddle.net/gcollect/FD53A/

使用

.oCoords.tl .tr .bl. and .br solved it.

这篇关于防止画布对象发生碰撞或相交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！