用于查找点到多边形的最小距离的 Javascript 代码（由 html 区域定义）

Question

我有一个定义了多个区域的图像地图，全部为多边形

我想计算从图像上的一个点（通常由用户点击图像给出）到给定区域外边缘的闭合点的距离。

对于我的情况，可以假设多边形的边都不相交，从而使任务更容易一些

检测点是在区域/多边形的内部、之上还是外部也很有趣，例如，如果点在多边形内部，则距离为负，如果点在边缘上，则距离为 0。

但这对我来说并不重要，因为鉴于用户单击图像给出了该点，因此很容易检测到这一点。

---

这里给出了这个问题的通用解决方案- 但我想知道是否有人已经在 javascript 中实现了使用图像映射和区域解决这个问题

我想做类似的事情：

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

如果这适用于一个区域的所有可能的形状，那将是一个额外的奖励：矩形、圆形和多边形

Answer 1

这是 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
    };
}

希望它能给您一个想法并有所帮助。