1

私は現在、これを衝突検出に使用しています。

    var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };

})();

しかし、問題は私が建物のアイソメ画像を使用していることです。そのため、現在配置できない大きな空の領域があります。例：
ここに画像の説明を入力してください

だから私はそれらを互いにもっと近くに置くことはできません。
これを修正するにはどうすればよいですか。

マイイメージは次のように読み込まれます。

<div id='obj' name="build_6" class="build_88" style='top:584px;left:1094px;'><img src ="img/buildings/6.png" /></div>


ありがとう、
ジェフリー

4

1 に答える 1

1

要素のサイズを比較する代わりに、境界ボックスまたは境界円/楕円を使用して、おそらく「実際の」オーバーラップ検出を使用する必要があります。

境界円は、アルゴリズムの複雑さの点で、おそらく実装が最も簡単です。たとえば、http://mathworld.wolfram.com/Circle-CircleIntersection.html

于 2012-01-05T18:50:37.260 に答える