我有一个定义了多个区域的图像 map ,所有区域都是多边形
我想计算从图像上的一个点(通常由用户点击图像给出)到给定区域外边缘的闭合点的距离。
对于我的情况,可以假设多边形的边都不相交,从而使任务更容易一些
检测点是在区域/多边形内部、之上还是外部也很有趣,例如,如果点在多边形内部则为负距离,如果在边缘上则为 0。
但这对我来说并不那么重要,因为很容易检测到这一点,因为点是由用户点击图像给出的。
给出了这个问题的通用解决方案 here - 但我想知道是否有人已经在 javascript 中实现 以使用图像映射和区域解决此问题
我想做这样的事情:
var distance = calculateDistancePointToArea( xCoord, yCoord, areaId );
如果这适用于一个区域的所有可能形状:矩形、圆形和多边形
最佳答案
这是在 javascript 中计算两个坐标之间距离的函数。
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
};
}
希望它能给你一个想法和帮助。
关于用于查找从点到多边形的最小距离的 Javascript 代码(由 html 区域定义),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13370969/