私はJavaScriptとラファエルJavaScriptライブラリを使用して、重複要素を停止することができますどのように

Question

私は、複数の、ラファエルJavaScriptライブラリを使用してランダムなサイズの、円形の要素を生成していますが、それは重複生成したり、お互いをカバーしている円形の要素のランダムAロットだから。私が知りたいと思った、一つの要素はそれほど重複を避けるために、特定の位置に既にある場合に伝えるためにJavaScriptでどのような方法はありますか？基本的に、私は重複またはお互いをカバーしていないランダムな大きさの、キャンバス上のランダムな要素を作成します。

私はあなたに私がやっているかのアイデアを与えるために、ここで作成したテストファイルのカップルがあります。最初のものは、重複を停止するグリッドにランダムオブジェクトと第2のリンクセットそれらを生成する。

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

もちろん

あなたはそれが他の人と重複して決定した後、円を配置しようとしているだけでどこの計算は少し複雑です。