错误检测到多边形中的点

Point in Polygon falsely detected

本文关键字：多边形 检测 错误      更新时间：2023-09-26

>由此导出：如何处理对角线堆叠的圆形图像背景元素悬停？

我

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

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

小提琴：http://jsfiddle.net/psycketom/9J4dx/1/

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

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

多边形函数中的点来自： 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;
};

我似乎不明白这里有什么问题。

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

创建一个屏幕外画布并使用上下文的 .isPointInPath（x， y） 函数。

遍历所有多边形（在您的示例中，您将反向循环遍历它们，因为您的最后一个面最小。最小的将是最高水平/最大 z 指数）。

当你被命中（isPointInPath返回true）停止。

像...

var offcanvas = document.createElement("canvas");
...
var x = e.pageX - $ages.offset().left;
var y = e.pageY - $ages.offset().top;
revlayers.each(function() {
    var $elm = $(this);
    var poly = $elm.data("polygon");
    var ctx = offcanvas.getContext("2d");
    if(poly.length > 0) {
        ctx.beginPath();
        ctx.moveTo(poly[0][0], poly[0][1]);
        for(var i=1; i<poly.length; i++) {
            ctx.lineTo(poly[i][0], poly[i][1]);
        }
        if(ctx.isPointInPath(x, y)) {
            hit.text($elm.attr("href"));
            return false; // end the .each() loop
        }
    }
})
相关文章：