이미지 맵에서 폴리 영역의 너비와 높이를 계산하십시오.

Question

좌표를 사용하여 이미지 맵에서 각 폴리 영역의 너비와 높이를 계산할 수 있습니까?

이미지가 있고 크기가 다른 여러 개의 이미지 맵을 사용합니다. 나는 중심점 하나 하나를 찾아야한다.

Answer 1

중심점을 찾으려면 다각형의 최소 및 최대 X 좌표를 찾은 다음 각각의 중간 점을 가져 와서 평균 중심점을 얻어야합니다. 다음은 이미지 맵 영역의 배열에 대해이 작업을 수행하는 함수입니다. 이 함수는 지형 이미지 맵에서 일반적인 것처럼 여러 영역에서 중심점이 필요한 경우에 대비하여 하나의 영역이 아니라 배열을 수용합니다. 솔루션에 대한 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 
    }; 
}