Имеет ли (HTML5) холст эквивалент карты изображения?

Ответ 1

Карты на холсте в настоящее время являются открытой проблемой с HTML5. Выпуск № 105, если быть точным. См. http://www.w3.org/html/wg/tracker/issues/105

Ответ 2

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

Ответ 3

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

Быстрое решение, которое я использовал во Flash для карт точности пикселей, заключается в создании второго скрытого растрового изображения наложения, которое вы используете для поиска, когда кто-то нажимает на видимое изображение.

Его та же техника использовалась в старых приключенческих играх. Каждая "область/объект/ссылка" имеет свой собственный цвет пикселя. И тогда вы просто сохраняете список объектов с соответствующим цветом.

Как только у вас есть pixelcolor под mousecoord, вы можете очень быстро найти в таблице.. и bingo...

Сначала вы очищаете "изображение клика" нулевым (черным) и равным "без ссылки", затем рисуете каждую область со специальным цветом и сохраняете этот цвет в списке.

Спросите, нужна ли вам дополнительная помощь. Надеюсь, это был полезный ответ.

Ответ 4

Считаете ли вы использование svg вместо холста? С помощью svg сама по себе графика может содержать всю информацию, необходимую для идентификации активных областей, и вы можете присоединять обработчики событий так же, как и к html-элементам.

Некоторые примеры того, как вы можете обнаружить мышиные события на разных частях геометрии форм SVG:

http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-08-f.html

http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html

Ответ 5

Взгляните на Cake. Это плагин графика сцены для холста. Возможно, это слишком сложно для того, что вы ищете, но вы можете добавлять события в Cake wrapped canvas objects.