防止画布对象的碰撞或交叉 [英] 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.

任何想法？

推荐答案

解决方案：我在这里解决了： http://stackoverflow.com/a/22649022/3207478 请参阅jsfiddle： http://jsfiddle.net/gcollect/FD53A/

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

使用

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

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