22.10.2013, 23:02
|
|
Интересующийся
|
|
Регистрация: 22.10.2013
Сообщений: 19
|
|
|
Создание интерактивных карт (помещений и т. д.)
Всего лишь год назад я впервые попал на этот сайт, начал изучать учебник — JS нужен как важное дополнения к остальным знаниям — и вот, сегодня я пишу первое сообщение в форуме, непосредственно связанное с работой.
Руководством поставлена задача изучить возможные варианты реализации следующей идеи:
сделать чертежи-рисунки помещений (на основе CADовских чертежей) интерактивными элементами интерфейса.
Фактически пока требуется только одно: сделать некоторые участки чертежа-рисунка кликабельными (и выделяемыми) — так чтобы при клике на рисунок, с участком какого-то помещения, был переход на страницу с детальным описанием этого помещения. Или всплывал поп-ап с описанием, в основе которого пост-бэк на AJAXе.
Т.е. Как сделать рисунок чертежа кликабельным?
Я вижу три пути:
(1) использвать <map> - относительно понятен.
(2) Использовать <canvas> - новый для меня тег и область.
В обоих случаях поставить поверх тегов обработчик, который ловит событие на всплытии, получает его объект, а из него, к примеру, data-аттрибут, который дает информацию о том, что делать дальше...
И третий путь: возможно эти задачи уже как-то решены в рамках таких фреймворков как D3.js или Rafael, и не стоит изобретать велосипед. Но я еще не изучал эти фреймворки.
Поэтому очень нуждаюсь в вашем мнении, комментариях, советах по этому поводу.
Спасибо за участие и помощь.
Последний раз редактировалось Den Brown, 22.10.2013 в 23:04.
|
|
22.10.2013, 23:23
|
|
Интересующийся
|
|
Регистрация: 22.10.2013
Сообщений: 19
|
|
|
Сообщение от Poznakomlus
|
|
Вот реализация вышеописанного http://joomla25.fregate.org.ua/. В админке рисуются карты 4 инструментами круг, полигон, прямоугольник, квадрат.
|
Да, это хороша иллюстрация идеи. Есть ли какие-то пути "автоматизации" рисования карт? или для каждого участка писать координаты индивидуально. У меня будут сотни помещений на одной карте... |
|
22.10.2013, 23:43
|
|
Интересующийся
|
|
Регистрация: 22.10.2013
Сообщений: 19
|
|
|
спасибо за отличную ссылку, буду изучать
Никто не интересовался вопросом конвертации CAD-файлов в SVG графику?
|
|
23.10.2013, 15:34
|
|
Аспирант
|
|
Регистрация: 21.09.2011
Сообщений: 35
|
|
|
Можно наверно еще делать дивы с прозрачным фоном нужной формы и помещать поверх нужного куска картинки .
|
|
23.10.2013, 17:26
|
|
Интересующийся
|
|
Регистрация: 22.10.2013
Сообщений: 19
|
|
Сообщение от umbabaraumba
|
|
Можно наверно еще делать дивы с прозрачным фоном нужной формы и помещать поверх нужного куска картинки .
|
Да, тоже хороший вариант. Кажется, что не большая разница с вариантом с тегом <map>, но наверняка при работе с DIVами будут свои преимущества. |
|
01.11.2013, 17:40
|
|
Интересующийся
|
|
Регистрация: 22.10.2013
Сообщений: 19
|
|
|
К слову:
только что узнал, что рисунки, созданные в вектором граф-редакторе, можно сохранять в SVG и просто вставлять в HTML.
Эх, если можно получить доступ к отдельным элементам в пределах одного SVG файла, так чтобы вешать обрабочики события (если они есть) на элементы и менять их стиль - то вообще прекрасно: рисуй в редакторе, раздавай элементам ID (или нужные data-атрибуты), настраивай JS скрипт - и все.
Фактически вопрос в том, являются ли отдельные элементы (графические фигуры) в пределах одного SVG файла - полноценными учатниками DOM или в DOMе SVG файл будет единым элементом, и "кликнуть" только по одному кружку\треугольнику в пределах схемы, состоящей их множетва элементов не получится.
Но не знаю возможно ли это. Буду пробовать!
Последний раз редактировалось Den Brown, 01.11.2013 в 17:51.
|
|
01.11.2013, 21:49
|
|
Интересующийся
|
|
Регистрация: 22.10.2013
Сообщений: 19
|
|
|
пока у меня не получилось получить доступ к элементам в SVG графике, сгенеророванной векторным редактором.
Тогда я попробовал Rafael.js:
там все работает.
Чем лучше чем Map: требуемый участки не только кликабельны, но и интерактивны.
Чем лучше чем идея с дивами: элементы могут быть не только прямоугольными.
И общая проблема: сложно рисовать.
Но если рисовать все в векторном редакторе, затем сохранять в SVG, оттуда брать координаты, то все будет намного проще.
Тот , инструмент, что предлагал "Poznakomlus" - я еще не попробовал, но предполагаю, что проделал что-то похожее, но только "вручную".
По крайней мере это дало понимание, как SVG работает внутри.
|
|
05.11.2013, 08:52
|
|
Аспирант
|
|
Регистрация: 30.07.2008
Сообщений: 87
|
|
|
|
|
05.11.2013, 21:57
|
|
Интересующийся
|
|
Регистрация: 22.10.2013
Сообщений: 19
|
|
|
|
|
|
|
