Проверьте местоположение точки в определенной области на холсте html

Question

Я хочу проверить, находится ли точка (x, y) в определенной области на холсте.Например, если у меня есть область 100X100 на холсте html, я хочу выяснить, находится ли точка (x, y) внутри этой области или вне области.Это обнаружение должно быть сделано с использованием javascript и jquery.Thanx.

Answer 1

зависит от того, для какого варианта использования он вам нужен:

1. MouseOver / Click: до тех пор, пока ваш холст - это единственное, что связано с движущимися элементами, и вам НЕ нужна хорошая поддержка safari / iOSСтаромодная карта изображений действительно делает свою работу.(прозрачный gif размером 1px * 1px, растянутый по размерам холста с использованием карты изображений)

2. Любая точка (включая мышь): используйте формулу для расчета, находится ли точка внутри или снаружи многоугольника.следующий скрипт (хотя и не от меня) решает это:

   //+ Jonas Raoni Soares Silva
   //@ http://jsfromhell.com/math/is-point-in-poly [rev. #0]
   
   function isPointInPoly(poly, pt){
       for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
           ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
           && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
           && (c = !c);
       return c;
   }
   

   на своей странице, Джонас также приводит пример того, как его использовать.в основном, poly - это массив объектов, содержащий точки многоугольника, а pt - это объект с точкой, которую вы хотите проверить:

   var polygon = [
       {x: 0, y: 0},
       {x: 0, y: length},
       {x: length, y: 10},
       {x: -length, y: -10},
       {x: 0, y: -length},
       {x: 0, y: 0}
   ];
   
   var testpoint= {x: 1, y:2};
   if(isPointInPoly(polygon,testpoint)) { /* do something */ }
   

   если это для позиционирования мыши, вы должны связать все это с mousemove, что снова можетбыть включенным / отключенным при mouseenter / mouseleave - все события узла canvas

3. любая точка: используйте функцию canvas isPointInPath (), как описано здесь: http://canvas.quaese.de/index.php?nav=6,42&doc_id=31 Хотя AFAIKэто работает, только если у вас есть только один путь на холсте (вы можете использовать несколько холстов) - или перекрасить каждый многоугольник и проверить его при этом.

Я лично предпочитаю вариант 2. еслиВам нужна дополнительная помощь в получении координат мыши, поиск в Google должен дать вам правильные страницы здесь в stackoverflow (или посмотреть раздел «похожие» справа)