计算宽度和宽度图像映射上的多边形区域的高度 [英] calculate width & height of poly area on image map

问题描述

是否可以使用坐标计算图像地图上每个多边形区域的宽度和高度？

Is it possible to calculate width and height for each poly area on image map using coords?

我有一个图像，并使用具有多个不同大小的多边形的图像映射。我需要找到每个中心点。

I have an image and use image map with multiple different sized polys. I need to find center point each one.

推荐答案

要找到中心点，你需要找到最小值和最大值X和多边形的Y坐标，然后取每个坐标的中点以获得平均中心点。这是一个为图像映射区域阵列执行此操作的函数。该函数接受一个数组而不是一个区域，以防您需要来自多个区域的中心点，这在地理图像映射中是典型的。

To find the center point, you need to find the minimum and maximum X and Y coordinates of the polygon, and then take the midpoint of each to get the average center point. Here's a function that will do this for an array of imagemap areas. The function accepts an array rather than just one area in case you need a center point from several areas, as are typical in geographical image maps.

此处的工作示例将绘制美国所选国家中心点的一个圆圈：
http://jsfiddle.net/jamietre/6ABfa/

Working example here that will draw a circle on the center point of the chose US state: 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
    };
}

这篇关于计算宽度和宽度图像映射上的多边形区域的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！