javascript - イメージ マップ上のポリゴン領域の幅と高さを計算する

Question

座標を使用してイメージ マップ上の各ポリゴン領域の幅と高さを計算することは可能ですか?

画像があり、複数の異なるサイズのポリゴンで画像マップを使用しています。それぞれの中心点を見つける必要があります。

Answer 1

中心点を見つけるには、ポリゴンの X 座標と Y 座標の最小値と最大値を見つけてから、それぞれの中点を取得して平均中心点を取得する必要があります。イメージマップ領域の配列に対してこれを行う関数を次に示します。この関数は、地理的なイメージ マップでよくあるように、複数の領域からの中心点が必要な場合に備えて、1 つの領域だけではなく配列を受け入れます。

選択した米国の州の中心点に円を描く作業例: http://jsfiddle.net/jamietre/6ABfa/

/* Calculate the centermost point of an array of areas 
   @param {element[]}   areas     an array of area elements
   @returns {object}              {x,y} coords of the center point
 */

function calculateCenterPoint(areas) {
    var maxX = 0,
        minX = Infinity,
        maxY = 0,
        minY = Infinity;

   // note: using Array.prototype.forEach instead of calling forEach directly 
   // on "areas" so it will work with array-like objects, e.g. jQuery

    Array.prototype.forEach.call(areas, function (e) {
        var i = 0,
            coords = e.getAttribute('coords').split(',');

        while (i < coords.length) {
            var x = parseInt(coords[i++],10),
                y = parseInt(coords[i++],10);

            if (x < minX) minX = x;
            else if (x > maxX) maxX = x;

            if (y < minY) minY = y;
            else if (y > maxY) maxY = y;
        }
    });

    return {
        x: minX + (maxX - minX) / 2,
        y: minY + (maxY - minY) / 2
    };
}