javascript - 如何使用 JavaScript 和 Raphael JavaScript 库阻止元素重叠

Question

我正在使用 Raphael JavaScript 库生成多个随机大小的圆形元素，但由于它是随机的，因此生成的许多圆形元素相互重叠或覆盖。我想知道的是，JavaScript 是否有任何方法可以判断一个元素是否已经处于特定位置以避免重叠？本质上，我想在 Canvas 上创建随机元素，其大小随机且不会重叠或相互覆盖。

我在这里创建了几个测试文件，让您了解我在做什么。第一个生成随机对象，第二个链接将它们设置为网格以停止重叠。

http://files.nicklowman.co.uk/movies/raphael_test_01/

http://files.nicklowman.co.uk/movies/raphael_test_03/

Answer 1

最简单的方法是创建一个对象并赋予它一个排斥力，该排斥力在其边缘处逐渐降为零。当您将这些对象放到 Canvas 上时，对象会相互推开，直到达到平衡点。