Создание интерактивных карт (помещений и т. д.)
 

Всего лишь год назад я впервые попал на этот сайт, начал изучать учебник — JS нужен как важное дополнения к остальным знаниям — и вот, сегодня я пишу первое сообщение в форуме, непосредственно связанное с работой.

Руководством поставлена задача изучить возможные варианты реализации следующей идеи:

сделать чертежи-рисунки помещений (на основе CADовских чертежей) интерактивными элементами интерфейса.

Фактически пока требуется только одно: сделать некоторые участки чертежа-рисунка кликабельными (и выделяемыми) — так чтобы при клике на рисунок, с участком какого-то помещения, был переход на страницу с детальным описанием этого помещения. Или всплывал поп-ап с описанием, в основе которого пост-бэк на AJAXе.

Т.е. Как сделать рисунок чертежа кликабельным?

Я вижу три пути:
(1) использвать <map> - относительно понятен.
(2) Использовать <canvas> - новый для меня тег и область.

В обоих случаях поставить поверх тегов обработчик, который ловит событие на всплытии, получает его объект, а из него, к примеру, data-аттрибут, который дает информацию о том, что делать дальше...

И третий путь: возможно эти задачи уже как-то решены в рамках таких фреймворков как D3.js или Rafael, и не стоит изобретать велосипед. Но я еще не изучал эти фреймворки.

Поэтому очень нуждаюсь в вашем мнении, комментариях, советах по этому поводу.

Спасибо за участие и помощь.

Да, это хороша иллюстрация идеи. Есть ли какие-то пути "автоматизации" рисования карт? или для каждого участка писать координаты индивидуально. У меня будут сотни помещений на одной карте...

спасибо за отличную ссылку, буду изучать

Никто не интересовался вопросом конвертации CAD-файлов в SVG графику?

Можно наверно еще делать дивы с прозрачным фоном нужной формы и помещать поверх нужного куска картинки .

Да, тоже хороший вариант. Кажется, что не большая разница с вариантом с тегом <map>, но наверняка при работе с DIVами будут свои преимущества.

К слову:

только что узнал, что рисунки, созданные в вектором граф-редакторе, можно сохранять в SVG и просто вставлять в HTML.

Эх, если можно получить доступ к отдельным элементам в пределах одного SVG файла, так чтобы вешать обрабочики события (если они есть) на элементы и менять их стиль - то вообще прекрасно: рисуй в редакторе, раздавай элементам ID (или нужные data-атрибуты), настраивай JS скрипт - и все.

Фактически вопрос в том, являются ли отдельные элементы (графические фигуры) в пределах одного SVG файла - полноценными учатниками DOM или в DOMе SVG файл будет единым элементом, и "кликнуть" только по одному кружку\треугольнику в пределах схемы, состоящей их множетва элементов не получится.

Но не знаю возможно ли это. Буду пробовать!

пока у меня не получилось получить доступ к элементам в SVG графике, сгенеророванной векторным редактором.

Тогда я попробовал Rafael.js:

там все работает.

Чем лучше чем Map: требуемый участки не только кликабельны, но и интерактивны.

Чем лучше чем идея с дивами: элементы могут быть не только прямоугольными.

И общая проблема: сложно рисовать.

Но если рисовать все в векторном редакторе, затем сохранять в SVG, оттуда брать координаты, то все будет намного проще.

Тот , инструмент, что предлагал "Poznakomlus" - я еще не попробовал, но предполагаю, что проделал что-то похожее, но только "вручную".

По крайней мере это дало понимание, как SVG работает внутри.

Советую изучить, пригодиться не только для работы с графикой :)

http://closure-library.googlecode.co...cs/events.html

http://docs.closure-library.googleco...git/index.html

Спасибо