Точка в многоугольнике ложно обнаружен

Question

производного от этого: How to tackle diagonally stacked, rounded image background element hovers?

Я сделал карты изображения области и превратил их в моем случае, но теперь есть проблема с точкой полигона ударила обнаружение.

Похоже, что только правый правый квадрант всегда правильный, но только если смотреть вне кольца - внутри обнаружения может быть все еще неверным. Другие квадранты, вне кольца, иногда сообщают о положительном ударе, где он должен быть ложным.

Fiddle: 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; 
}; 

Я не могу понять, что проблема здесь.

Answer 1

Вашей mapToPolygon функция не конвертировать разобранные точки из строки в число. Из-за этого функция pointInPolygon заканчивает сравнение строк координат, а не фактических координат. Использование parseInt в строке 31 скрипта устраняет проблему.

Answer 2

Создайте экранный холст и используйте функцию .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 
     } 
    } 
})