@abusabir

Как на js соединить элементы линией?

Здравствуйте!
Дано: картинка и некоторое описание (список). Каждый элемент списка соответствует определённой области на картинке. Нужно их соединить линиями (кажется это можно назвать легендой).
Проблема в том конечно, что требуется адаптивность, чтобы линии не покидали связь со своим элементом списка.
На картинке я предполагаю можно задать абсолютные координаты для определённых точек и отрисовать их div'ами, но как дальше соединять их с элементами списка не представляю.
  • Вопрос задан
  • 4274 просмотра
Пригласить эксперта
Ответы на вопрос 1
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
Самый простой вариант, это использовать svg графику или canvas:
  • Объекты на картинке помечаешь с помощью тега map, каждый из них содержит id аттрибут вида img_XXX
  • Элементы списка получают id вида li_XXX
  • Выводишь canvas поверх блока с изображением и списком.
  • Вычисляешь координаты начала и конца линии (список и область на картинке) относительно блока
  • Рисуешь линию на canvas
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы