javascript - 错误检测到多边形中的点

Question

由此得出:How to tackle diagonally stacked, rounded image background element hovers?

我制作了图像映射区域并针对我的情况对其进行了转换，但是，现在多边形命中检测中的点出现了问题。

似乎只有右下象限总是正确的，但是，只有从环外看 - 内部检测可能仍然不正确。环外的其他象限偶尔会在本应为假的地方报告正命中。

fiddle :http://jsfiddle.net/psycketom/9J4dx/1/

红线是从数据 map 生成的多边形绘制的。

蓝线代表我们当前正在检查的多边形。

多边形函数中的点来自:https://github.com/substack/point-in-polygon

var pointInPolygon = function(point, vs)
{
    // ray-casting algorithm based on
    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

    var x = point[0], y = point[1];

    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];

        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }

    return inside;
};

我似乎无法理解这里的问题是什么。

Answer 1

您的 mapToPolygon 函数不会将解析的点从字符串转换为数字。因此，pointInPolygon 函数最终比较的是坐标字符串，而不是实际坐标。在 fiddle 的第 31 行使用 parseInt 解决了这个问题。