Javascript代码，用于查找从点到多边形的最小距离(由html区域定义)

Question

我有一个包含多个区域的图像地图，都是多边形。

我想计算出从图像上的一个点(通常是用户点击图像)到给定区域外部边缘的关闭点之间的距离。

就我的情况而言，人们可以假设多边形的任何边都不相交，从而使任务变得容易一些。

检测点是否在区域/多边形内、上或外也是有趣的，例如，如果点在多边形内，则为负距离，如果点位于多边形内，则为0。

但这对我来说并不重要，因为这很容易被检测到，因为这点是用户点击图像给出的。

这个问题的通用解决方案是here --但是我想知道是否有人已经在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
    };
}

希望它能给你一个想法和帮助。

Answer 2

我为泛型坐标编写了一个函数，如果需要，您可以将它转换为使用HTML。

一个非常简单的解决方案:为每对聚顶点求解一个等式。

具有点a和b点的多边形(图中灰度)的一种算法

​

​

• 向量A就是点坐标
• 向量S(egment) =b-a
• 向量N对S (-ys，xs)是正规的
• 向量P是点的坐标

您需要检查法线从点到段的长度，并确保目标点在段内。

下面是你想要解决的平衡：

​

​

在解中，我必须介于0到1之间。如果是，那么在x中的距离是x，点是P+ iN，否则它是顶点(a & b)之间最接近的。然后，你可以找到最接近的点，其中的每一个边缘。

这里有一个Javascript代码，它搜索最近的距离，但是应该很容易修改到最近的点：

function vlen(vector) {
  return Math.sqrt(vector[0]*vector[0] + vector[1] * vector[1]);
}

function vsub(v1, v2) {
  return [v1[0] - v2[0], v1[1] - v2[1]];
}

function vscale(vector, factor) {
  return [vector[0] * factor, vector[1] * factor];
}

function vnorm(v) {
  return [-v[1], v[0]];
}

function distance_to_poly(point, poly) {
  var dists = $.map(poly, function(p1, i) {
    var prev = (i == 0 ? poly.length : i) - 1,
        p2 = poly[prev],
        line = vsub(p2, p1);

    if (vlen(line) == 0)
      return vlen(vsub(point, p1));

    var norm = vnorm(line),
        x1 = point[0],
        x2 = norm[0],
        x3 = p1[0],
        x4 = line[0],
        y1 = point[1],
        y2 = norm[1],
        y3 = p1[1],
        y4 = line[1],

        j = (x3 - x1 - x2 * y3 / y2 + x2 * y1 / y2) / (x2 * y4 / y2 - x4),
        i;

      if (j < 0 || j > 1)
        return Math.min(
          vlen(vsub(point, p1)),
          vlen(vsub(point, p2)));

      i = (y3 + j * y4 - y1) / y2;

      return vlen(vscale(norm, i));
  });

  return Math.min.apply(null, dists);
}