1

Raphael JavaScript ライブラリを使用して、複数のランダムなサイズの円形要素を生成していますが、ランダムであるため、生成される円形要素の多くが重なり合ったり、重なり合ったりします。私が知りたかったのは、重複を避けるために、1 つの要素が既に特定の位置にあるかどうかを JavaScript で判断する方法はありますか? 基本的に、キャンバス上にランダムなサイズのランダムな要素を作成し、互いに重なり合ったり覆ったりしないようにしたいと考えています。

私が何をしているのかを理解してもらうために、ここにいくつかのテスト ファイルを作成しました。最初のリンクはランダムなオブジェクトを生成し、2 番目のリンクはそれらをグリッドに設定してオーバーラップを停止します。

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

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

4

2 に答える 2

1

あなたの例は私にとってはうまくいかないので、あなたの正確なシナリオを視覚化することはできません.

要素をキャンバスに「ドロップ」する前に、他の要素の位置を照会し、計算を行って、新しい要素が重なるかどうかを確認できます。

円要素を使用したこの概念の非常に単純な例は、次のようになります。

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

もちろん、円が他の円と重なっていると判断した後で円をどこに配置するかを計算するのは、もう少し複雑です。

于 2011-01-22T21:13:08.187 に答える
1

最も簡単な方法は、オブジェクトを作成し、そのエッジでゼロに向かって低下する反発力をオブジェクトに与えることです。これらのオブジェクトをキャンバスにドロップすると、平衡点に達するまでオブジェクトが互いに押し離されます。

于 2010-03-10T11:58:54.533 に答える