Задать вопрос
@borgore
верстка

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

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

Необходимо сверстать этот план с возможностью выбора сектора, а затем конкретного места из этого сектора
Сложность в том, что не могу сверстать сектора из-за их формы.
Как можно реализовать данную штуку?
  • Вопрос задан
  • 569 просмотров
3 комментария
Подписаться 3 Простой 3 комментария
Решения вопроса 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. По мере надобности - готовый проект тюнингуем различными анимационными плюшками и ховер эффектами


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend-стажер React
Студия Oxem • Москва
от 20 000 до 80 000 ₽
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка проекта сайт-форум.
16 апр. 2024, в 16:59
50000 руб./за проект
Сделать верстку, в которой можно растягивать картинку
16 апр. 2024, в 16:52
10000 руб./за проект
Сделать лендинг, переработать существующий логистический сайт
16 апр. 2024, в 16:34
30000 руб./за проект
Ещё заказы