А откуда исходные данные зала: координаты в вашей системе координат и ряды/места в системе координат бухгалтерии зала?
Долго не давала ваша задача мне покоя. Всё казалось, что незначительными изменениями можно существенно ускорить ваше решение.
Демо-стенд я бы долго делал, по этому опишу в кратце суть идеи.
Думаю можно в разы повысить быстродействие если:
1. Кешировать полномасштабную схему на диск в png рядом с scheme-data.js. (В вашем варианте это около 8000 на 8000px).
2. Ничего не перерисовывать при перетаскивании и масштабировании: таскать и масштабировать можно с помощью css (transform и overflow). Даже телефоны с этим быстро справляются
3. Ничего не перерисовывать при ховере. По сути нужно получить координаты Места (об этом ниже) и спозиционировать там html элмент с динамичным содержимым. Позиционирование одного элемента — это быстрая операция.
Как «по-быстрому» найти координаты объекта? По цвету :)
Чего проще: снять координаты мыши (или пальца), получить по этим координатам цвет пикселя с канваса.
Для этого рисуем схему на канвасе в полном размере (один раз) каждое Место уникальным цветом (у нас их 16 миллионов) на основе индекса объекта (конвертим int в hex)
Все исходные данные готовы — можно показывать:
1. показываем закешированный канвас юзеру, по которому он кликает и ховерит
2. по координатам клика/ховера получаем цвет из цветовой карты
3. конвертим hex цвет обратно в int (это индекс нашего объекта в массиве)
4. получаем данные из объекта и дальше показываем то-что надо
А вот, данные, которые должны оставаться на канвасе (при клике) или если они «недоступны»/«распроданы» и проч, нужно уже точечно рисовать, как вы и делаете.
Или, если хватит памяти на целевых устройствах, не по канвасу со схемой, а на новом канвасе (сделать верхним синхронным слоем)
При этом что мы выигрываем:
1. В scheme-data.js только сами «места» без лишних (балкон, портер) (и прочих bgcolor и font-size) — это котлеты
2. Дорисовать в фотошопе на сохранённую схему необходимые надписи с использованием дизайнерских шрифтов и прочего творчества — это мухи.
3. Скорость работы одинакова в любом масштабе.
5. Фактически мы не ограничены количеством в 5-6 тыщ. Мне кажется, что и карты размером в 16 000px будут нормально работать, а это зал на 25 000 мест — стадион.
Теоретически…
В общем я излился :) Возможно, я где-то ошибаюсь и что-то не учитываю.
… предоставить шанс выиграть каждому гражданину России.
Или: Каждый выигравший гражданин России лишает шанса выиграть 1000 других граждан.
Ведь с каждым очередным выигрышем «фонд» счастливых комбинаций уменьшается. Влияет ли это на шанс победы? Значит ли это, что при старте акции будут максимальные шансы?
Information
Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Долго не давала ваша задача мне покоя. Всё казалось, что незначительными изменениями можно существенно ускорить ваше решение.
Демо-стенд я бы долго делал, по этому опишу в кратце суть идеи.
Думаю можно в разы повысить быстродействие если:
1. Кешировать полномасштабную схему на диск в png рядом с scheme-data.js. (В вашем варианте это около 8000 на 8000px).
2. Ничего не перерисовывать при перетаскивании и масштабировании: таскать и масштабировать можно с помощью css (transform и overflow). Даже телефоны с этим быстро справляются
3. Ничего не перерисовывать при ховере. По сути нужно получить координаты Места (об этом ниже) и спозиционировать там html элмент с динамичным содержимым. Позиционирование одного элемента — это быстрая операция.
Как «по-быстрому» найти координаты объекта? По цвету :)
Чего проще: снять координаты мыши (или пальца), получить по этим координатам цвет пикселя с канваса.
Для этого рисуем схему на канвасе в полном размере (один раз) каждое Место уникальным цветом (у нас их 16 миллионов) на основе индекса объекта (конвертим int в hex)
Все исходные данные готовы — можно показывать:
1. показываем закешированный канвас юзеру, по которому он кликает и ховерит
2. по координатам клика/ховера получаем цвет из цветовой карты
3. конвертим hex цвет обратно в int (это индекс нашего объекта в массиве)
4. получаем данные из объекта и дальше показываем то-что надо
А вот, данные, которые должны оставаться на канвасе (при клике) или если они «недоступны»/«распроданы» и проч, нужно уже точечно рисовать, как вы и делаете.
Или, если хватит памяти на целевых устройствах, не по канвасу со схемой, а на новом канвасе (сделать верхним синхронным слоем)
При этом что мы выигрываем:
1. В scheme-data.js только сами «места» без лишних (балкон, портер) (и прочих bgcolor и font-size) — это котлеты
2. Дорисовать в фотошопе на сохранённую схему необходимые надписи с использованием дизайнерских шрифтов и прочего творчества — это мухи.
3. Скорость работы одинакова в любом масштабе.
5. Фактически мы не ограничены количеством в 5-6 тыщ. Мне кажется, что и карты размером в 16 000px будут нормально работать, а это зал на 25 000 мест — стадион.
Теоретически…
В общем я излился :) Возможно, я где-то ошибаюсь и что-то не учитываю.
Или: Каждый выигравший гражданин России лишает шанса выиграть 1000 других граждан.
Ведь с каждым очередным выигрышем «фонд» счастливых комбинаций уменьшается. Влияет ли это на шанс победы? Значит ли это, что при старте акции будут максимальные шансы?