如何使用JQuery或JavaScript中的鼠标单击事件计算非几何形状的地图上的坐标？

Question

我有以下地图：

我想要做的是，给定div内部鼠标点击事件的坐标（例如X = 80 Y =来自div本身的120坐标），通过＆＃34; if＆＃34;并采取一些行动，我使用此代码获取div内的坐标：

{{1}}

所以我现在要做的是，如果坐标X和Y在分界线内，那么就做一些动作。

有什么想法吗？使用矩形也可以解决问题。

非常感谢！

Answer 1

我想您想知道点击了哪个区域。

愚蠢的方法可能是使用一些填充技术从您的图像生成不同颜色的图像/数组。 然后检查您单击的像素的颜色。

Answer 2

所以我最终使用了另一个解决方案，我首先在图表中点击鼠标，然后检查这样的coordenates：

$('#img_canvas').click(function(e){     
    var parentOffset = $(this).parent().offset(); 

    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    console.log('[' + relX + '],[' + relY + ']');
});

因此，使用上面的代码，我从图像中标记了每个coordenate，并从控制台复制并粘贴每个coordenate的文本，以便我可以将它插入到每个区域的数组中。

所以我最终得到了图像中提到的每个区域的coordenates：

arrayImageArea1 = [[133,198],[124,205],[130,223],[128,242],[138,240],[134,282],[148,345],[155,350]];

arrayImageArea2 = [[155,350],[136,385],[129,400],[119,418],[115,431],[112,450],[104,456],[102,486],[418,256],[388,256],[386,310],[363,319],[361,346]];

依旧......

然后使用这个函数，我从这个问题（JS- Check if Point Inside A Polygon）

function inside(point, vs) {
    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;
}

我可以检查鼠标点击是否在每个区域内，如下所示：

$('#canvas_juego').click(function(e){       
    var parentOffset = $(this).parent().offset(); 

   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;

   if(inside([ relX, relY ], arrayImageArea1)){
        //Do the action needed...
   }
});