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

Question

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

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

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

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

Answer 1

最简单的方法是创建一个对象并给它一个排斥力，该排斥力在它的边缘退化到零。当您将这些对象放到画布上时，这些对象将彼此推开，直到它们达到平衡点。

Answer 2

你的例子对我不起作用，所以我无法想象你的确切情况。

在将元素“拖放”到画布上之前，您可以查询其他元素的位置并进行一些计算以检查新元素是否会重叠。

使用圆形元素的这个概念的一个非常简单的示例可能如下所示：

function overlap(circ1, circ2) {
    var attrs = ["cx", "cy", "r"];
    var c1 = circ1.attr(attrs);
    var c2 = circ2.attr(attrs);
    var dist = Math.sqrt(Math.pow(c1.cx - c2.cx ,2) + Math.pow(c1.cy - c2.cy, 2));
    return (dist < (c1.r + c2.r));
}
var next_drop = paper.circle(x, y, r);  
for (var i in circles) {
    if (overlap(next_drop, circles[i])) {
        // do something
    }
}

当然，在确定圆圈与其他圆圈重叠后，计算要放置圆圈的位置要复杂一些。