5

複数の領域がすべてポリゴンとして定義されたイメージ マップがあります。

画像上のポイント（通常、ユーザーが画像をクリックして指定）から、特定の領域の外縁にある閉じるポイントまでの距離を計算したいと思います。

私の場合、ポリゴンのエッジが交差しないと仮定できるため、タスクが少し簡単になります

ポイントがエリア/ポリゴンの内側、上、または外側にあるかどうかを検出することも興味深いです。たとえば、ポイントがポリゴンの内側にある場合は負の距離を持ち、エッジにある場合は 0 になります。

しかし、これは私にとってそれほど重要ではありません。ユーザーが画像をクリックすることでポイントが与えられるため、これを簡単に検出できるからです。

この問題の一般的な解決策はここに示されていますが、画像マップと領域でこれを解決するための JavaScriptの実装を既に持っている人がいるのだろうか

私は次のようなことをしたいと思います:

var distance = calculateDistancePointToArea( xCoord, yCoord, areaId );

そして、これが領域で可能なすべての形状（長方形、円、多角形）で機能する場合は、追加のボーナスになります。

4

2 に答える 2

1

これがjavascriptの2つの座標間の距離を計算する関数です。

function(calculateDistancePointToArea(x2, y2, areaId))
{
    var el1 = document.getElementById(areaId);
    var off1 = getOffset(el1);
    // center
    var x1 = off1.left;
    var y1 = off1.top;
    // distance
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));       
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    var _w = el.offsetWidth|0;
    var _h = el.offsetHeight|0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return {
        top: _y,
        left: _x,
        width: _w,
        height: _h
    };
}

それがあなたにアイデアを与え、助けてくれることを願っています。

于 2012-11-23T07:46:16.437 に答える