如何使用 JavaScript 和 Raphael JavaScript 库阻止元素重叠 [英] How can I stop elements overlapping using JavaScript and the Raphael JavaScript library

问题描述

我正在使用 Raphael JavaScript 库生成多个随机大小的圆形元素，但因为它是随机的，所以很多圆形元素会生成重叠或相互覆盖.我想知道的是，JavaScript 有什么方法可以判断一个元素是否已经处于特定位置以避免重叠?本质上，我想在画布上创建随机大小的随机元素，不会相互重叠或覆盖.

I’m generating multiple, random sized, circular elements using the Raphael JavaScript library but because it’s random a lot of the circular elements being generate overlap or cover each other. What I wanted to know, is there any way with JavaScript to tell if one element is in already in particular position so to avoid the overlapping? Essentially, I want to create random elements on a canvas, of a random size that don’t overlap or cover each other.

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

There's a couple of test files I created here to give you an idea of what I'm doing. The first one generates random objects and the second link sets them to a grid to stop the overlapping.

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

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

推荐答案

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

The easiest way is to create an object and give it a repulsive force that degrades towards zero at it's edge. As you drop these objects onto the canvas the objects will push away from each other until they reach a point of equilibrium.

这篇关于如何使用 JavaScript 和 Raphael JavaScript 库阻止元素重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！