Есть ли возможность средствами только канваса задавать активную области область на изображении подобно HTML-тегу <map>
? Через SVG тоже не желательно.
2 ответа
Для тех, кто набрел на вопрос через поиск, - возможные решения.
-
Создать на скрытом канвасе проекцию требуемого объекта, “выкрасить” её в определённый цвет. Затем берём координаты на видимом канвасе и смотрим данные о цвете точки с этими координаты на скрытом (getImageData) и если полученное - цвет нужной проекции, то мы навели мышку на объект. Подмогой для создания проекции может послужить глобальное свойство globalCompositeOperation. В цвете проекции можно задавать код объекта, что удобно при проецирование нескольких объектов.
-
Так же нахождение точки на фигуре можно рассчитать математически. Подборка ссылок:
- Collision Detection and Response (перевод Урок: базовые алгоритмы определения столкновений)
- О прямоугольных координатах и гексагональных сетках
- Polygon triangulation: decomposition of a polygon into triangles with AS3
- Algorithm to determine if a point is inside a triangle with mathematics (no hit test involved)
Средствами канваса не получится, но можно попробовать приобщить к этому делу js.
Результат можно посмотреть здесь.
-
Благодарю. Но фишка заключалась в том, чтоб обойтись без сложных расчетов, задавая при этом произвольные фигуры. В итоге решили плюнуть и использовать html. Для тех кто набрел на вопрос через поиск - возможные решения: 1.Создать на скрытом канвасе проекцию требуемого объекта, “выкрасить” её в определённый цвет. Затем берём координаты на видимом канвасе и смотрим данные о цвете точки с этими координаты на скрытом (getImageData) и если полученное - цвет нужной проекции то мы навели мышку на объект. Подмогой для создания проекции может послужить глобальное свойство globalCompositeOperation.– Sorgot29 авг 2012 в 16:00
-