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

Question

[Евгений Петров]

Имеется план зала:


Необходимо сверстать этот план с возможностью выбора сектора, а затем конкретного места из этого сектора
Сложность в том, что не могу сверстать сектора из-за их формы.
Как можно реализовать данную штуку?

Comments

[alex]

svg

[SunUp]

Как сделать разные фигуры на CSS и потом по необходимости transform имхо

[Moskus]

SunUp, чистый HTML+CSS будет в этом случае чудовищной тратой времени. Только SVG.

Answer 1

[Андрей]

Делал недавно такое для сервиса продажи билетов.
Пошагово:

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

Как то так, а не иначе ))

Comments

[Евгений Петров]

Проблема еще в том, что мест только в голубой зоне 455)
Приходится вручную рисовать каждое кресло в svg и вешать onckick с проверкой занято/не занято
Так еще и для проверки этих мест на занятость их в бд надо внести.. Треш какой-то)

[Андрей]

Евгений Петров, я дизайнер и делал графическую оболочку. Далее программеры (js/php) делали взаимосвязь с каким то агрегатором по продаже билетов. К слову - они его еще не запустили!
Кресла имели каждый свой id и с помощью js скрипта они делались затемненными и неотзывчивыми в случае если место забронировано.
Что касаемо клонирования больших массивов мест, схема такая: 1 клонируете во второй, потом эту пару и получаете 4, потом из 4-х 8 получаете и т.д. Потом целыми рядами.
Заморока лишь в том, что потом редактировать каждый элемент присваивая индивидуальный номер в id и js функции. Как автоматизировать этот мартышкин труд я не знаю...

[Евгений Петров]

Андрей, Сложность еще в том, что дизайнер закриворучил этот план и переделывать его никто не хочет. Места там не скопируешь, они все разных размеров. Вот и приходится каждое место в иллюстраторе обводить в ручную. А там их, к слову, 1152..

Сделал штук 200 и отказался от заказа, пускай ищут людей, которым делать нечего)

Answer 2

[profesor08]

Открываешь любой редактор векторной графики, например illustrator, и рисуешь. Либо можешь попробовать экспортировать как svg, ведь может там уже все готово.

Answer 3

[Дмитрий Евграфович]

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