Javascript 错误检测到多边形中的点

由此得出：

我制作了imagemap区域并对它们进行了变换，但是，现在多边形命中检测中的点存在问题

看起来只有右下象限总是正确的，但是，只有在环外查看时，检测内部可能仍然不正确。环外的其他象限偶尔会报告应该为假的正命中

小提琴：

红线是从数据地图生成的多边形绘制的

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

多边形中的点函数来自：

var pointInPolygon=函数（点，vs）
{
//基于遗传算法的光线投射算法
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
var x=点[0]，y=点[1]；
var内=假；
对于（变量i=0，j=vs.length-1；iy）！=（yj>y））
&&（x<（xj-xi）*（y-yi）/（yj-yi）+xi）；
如果（相交）内部=！内部；
}
返回内部；
};

---

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

创建屏幕外画布并使用上下文的.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
        }
    }
})

var offcanvas=document.createElement（“canvas”）；
...
var x=e.pageX-$ages.offset（）.左；
var y=e.pageY-$ages.offset（）.top；
revlayers.each（函数（）{
var$elm=$（本）；
var poly=$elm.data（“多边形”）；
var ctx=offcanvas.getContext（“2d”）；
如果（多边形长度>0）{
ctx.beginPath（）；
ctx.moveTo(poly[0][0],poly[0][1]),；
对于（var i=1；i您的
mapToPolygon
函数不会将解析的点从字符串转换为数字。因此，
pointInPolygon
函数最终会比较坐标字符串，而不是实际坐标。在fiddle的第31行使用
parseInt
可以解决问题。
另一个问题已经解决“compatible back to IE7（兼容回到IE7）”的注释，这并不能让我完全理解……有时候我真的很讨厌弱类型语言。谢谢你的关注！
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
        }
    }
})