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
    }
}

当然，在确定它与其他人重叠之后计算一个圆圈的位置会稍微复杂一点。

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

2 个答案: