Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2013, 23:02
Интересующийся
Отправить личное сообщение для Den Brown Посмотреть профиль Найти все сообщения от Den Brown
 
Регистрация: 22.10.2013
Сообщений: 19

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

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

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

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

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

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

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

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

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

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

Последний раз редактировалось Den Brown, 22.10.2013 в 23:04.
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2013, 23:23
Интересующийся
Отправить личное сообщение для Den Brown Посмотреть профиль Найти все сообщения от Den Brown
 
Регистрация: 22.10.2013
Сообщений: 19

Сообщение от Poznakomlus
Вот реализация вышеописанного http://joomla25.fregate.org.ua/. В админке рисуются карты 4 инструментами круг, полигон, прямоугольник, квадрат.
Да, это хороша иллюстрация идеи. Есть ли какие-то пути "автоматизации" рисования карт? или для каждого участка писать координаты индивидуально. У меня будут сотни помещений на одной карте...
Ответить с цитированием
  #3 (permalink)  
Старый 22.10.2013, 23:43
Интересующийся
Отправить личное сообщение для Den Brown Посмотреть профиль Найти все сообщения от Den Brown
 
Регистрация: 22.10.2013
Сообщений: 19

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

Никто не интересовался вопросом конвертации CAD-файлов в SVG графику?
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2013, 15:34
Аспирант
Отправить личное сообщение для umbabaraumba Посмотреть профиль Найти все сообщения от umbabaraumba
 
Регистрация: 21.09.2011
Сообщений: 35

Можно наверно еще делать дивы с прозрачным фоном нужной формы и помещать поверх нужного куска картинки .
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2013, 17:26
Интересующийся
Отправить личное сообщение для Den Brown Посмотреть профиль Найти все сообщения от Den Brown
 
Регистрация: 22.10.2013
Сообщений: 19

Сообщение от umbabaraumba Посмотреть сообщение
Можно наверно еще делать дивы с прозрачным фоном нужной формы и помещать поверх нужного куска картинки .
Да, тоже хороший вариант. Кажется, что не большая разница с вариантом с тегом <map>, но наверняка при работе с DIVами будут свои преимущества.
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2013, 16:40
Интересующийся
Отправить личное сообщение для Den Brown Посмотреть профиль Найти все сообщения от Den Brown
 
Регистрация: 22.10.2013
Сообщений: 19

К слову:

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

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

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

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

Последний раз редактировалось Den Brown, 01.11.2013 в 16:51.
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2013, 20:49
Интересующийся
Отправить личное сообщение для Den Brown Посмотреть профиль Найти все сообщения от Den Brown
 
Регистрация: 22.10.2013
Сообщений: 19

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

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

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

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

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

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

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

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

По крайней мере это дало понимание, как SVG работает внутри.
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2013, 07:52
Аспирант
Отправить личное сообщение для constantant Посмотреть профиль Найти все сообщения от constantant
 
Регистрация: 30.07.2008
Сообщений: 87

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

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

http://docs.closure-library.googleco...git/index.html
Ответить с цитированием
  #9 (permalink)  
Старый 05.11.2013, 20:57
Интересующийся
Отправить личное сообщение для Den Brown Посмотреть профиль Найти все сообщения от Den Brown
 
Регистрация: 22.10.2013
Сообщений: 19

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

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

http://docs.closure-library.googleco...git/index.html
Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск