Как сверстать план концертного зала?

Имеется план зала:
5b2c09778b857501980513.png

Необходимо сверстать этот план с возможностью выбора сектора, а затем конкретного места из этого сектора
Сложность в том, что не могу сверстать сектора из-за их формы.
Как можно реализовать данную штуку?
  • Вопрос задан
  • 450 просмотров
Решения вопроса 1
KeySVG
@KeySVG
аниматор svg / html5
Делал недавно такое для сервиса продажи билетов.
Пошагово:
  1. Делаем макеты - зал, сектора поотдельности, кресло в svg, хоть в png
  2. В любом банермейкерском софте, можно в бесплатном Google Web Designer (позавчера вышел релиз без вечной приставки "вета"!), в базовой сцене размещаем главный зал
  3. Делаем дополнительные сцены (в GWD это page#) под каждый сектор, ну и разумеется размещаем там соответсвующее изображение
  4. Делаем элемент кресла кликабельным, и присваиваем ему действие
  5. В каждом секторе размещаем (клонируем) эти кресла, отлично если редактор поддерживает символы (gwd нет, Hype 3 pro - да, Adobe Animate - незнаю, но скорее да)
  6. В главной сцене делаем прозрачные интерактивные зоны над секторами (вектором, нестандартной формы) и присваиваем им действия при клике/тапе переход на соответствующую сцену
  7. В каждом кресле (каждой сцены) редактируем нужное действие при выборе, я делал вызов js функций
  8. По мере надобности - готовый проект тюнингуем различными анимационными плюшками и ховер эффектами


Как то так, а не иначе ))
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08
Открываешь любой редактор векторной графики, например illustrator, и рисуешь. Либо можешь попробовать экспортировать как svg, ведь может там уже все готово.
Ответ написан
Tantacula
@Tantacula
Ларавельщик, витающий в небесах.
Если с выбором места, то необходима библиотека для работы с графикой. например paperjs (либо любую другую, просто я этой пользовался). Просто картинку делать - ну какой смысл? Это то же самое, что вместо сайта заказчику картинку сайта сдать. Ваша картинка должна ведь еще и события кликов обрабатывать и показывать, какие места заняты, какие сколько стоят и т.д. А это вам или разработчику все равно придется реализовывать средствами конкретной библиотеки, то есть то, что вы нарисованным сдадите, придется повторно писать, но уже в виде кода.
Ответ написан
Ваш ответ на вопрос

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

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