Имеет ли (HTML5) Canvas эквивалент карты изображений? - PullRequest
15 голосов
/ 29 мая 2010

Имеет ли элемент Canvas эквивалент карты img , так что вы можете определить интерактивные области на элементе canvas?

Здесь на полпути есть краткое упоминание карты: http://www.w3.org/TR/html5/the-canvas-element.html,, но больше ничего о ней не могу найти.

Ответы [ 5 ]

14 голосов
/ 29 мая 2010

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

13 голосов
/ 29 мая 2010

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

5 голосов
/ 01 июля 2010

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

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

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

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

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

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

2 голосов
/ 16 августа 2010

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

2 голосов
/ 29 мая 2010

Рассматривали ли вы использовать svg вместо canvas? С помощью 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

...