Многоугольник HTML5, наведенный мышью

У меня есть один холст HTML5. Я нарисовал более 100 динамических полигонов. Эти полигоны представляют собой набор путей (beginPath, moveto, lineTo, ..., closePath).

Каждый из полигонов хранится в массиве. Я храню координаты и некоторую информацию об атрибутах в каждом элементе.

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

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

Какой самый популярный/самый быстрый способ проверить, над каким полигоном я зависаю.

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

Спасибо


html mouse polygons
person user281921    schedule 09.05.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я признаю свою предвзятость заранее, потому что я написал это, но вы можете использовать alphapun.ch для рисования полигонов с использованием реальных элементов, вместо (или в дополнение) холста. Таким образом, вы могли бы правильно обнаруживать события.

person newtron    schedule 09.05.2012

arrow_upward
0
arrow_downward

Обычный метод - это два прохода:

для каждого полигона в вашем массиве:

  • Сохраните «ограничивающий прямоугольник» вместе с информацией о каждом полигоне и проверьте, находится ли курсор мыши внутри этого прямоугольника.
  • Если первый тест положительный, применяется алгоритм «точка внутри многоугольника», который является более затратным.

Вот пример такого алгоритма:

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;
}
person Community    schedule 09.05.2012