Что выбрать для гексагональной карты — SVG или Canvas?
Задача такая - нужно отрисовать карту из шестиугольников, одного или нескольких типов раскраски, с возможностью выводить на них в графическом виде инфу(например, заполнение точками разной интенсивности) и реагировать на клик. Гексов может быть довольно большое количество, до нескольких тысяч, так что возможность реализации масштабируемости и скроллинга будет плюсом.
Реализация на divах не понравилась - границы зон квадратные, и на границах гексов возможны неточности при обработке клика.
Сначала думал реализовывать на canvas, однако в процессе изучения вопроса наткнулся на svg и задумался, какая технология в данном случае подойдёт больше. Хотелось бы услышать мнения разных людей:)
Так же, нашёл разные фрэймворки как для одной технологии так и для другой, стоит ли использовать их для такой карты, или проще использовать нативные методы?
pixi.js это движок для canvas рендера у которого в арсенале есть Graphics позволяющий рисовать масштабируемые элементы. Так у него есть, эти.... инструменты для оптимизации. Вообще это писк моды и верх возможностей фронт-енда, но с одной оговорочкой. Он полностью сделан по подобию флеша, который намного сложнее всего что есть в серверной части и клиентской. По этому если Вы в свое время не ругали и не хоронили флеш, то фартуна не повернется к Вам задом. А вот если мечтали и говорили о его смерти, то вот он миг счастья флешера - Вы все теперь будите изучать то, что мы уже десятилетие умеем!!! И теперь Вы вынуждены писать на том, что ругали. Вот...
В SVG, конечно, удобно то, что с обработкой кликов не будет проблем, но для производительности по-любому придется делать какие-то трюки с добавлением и удалением лишних гексов при скролле и зуме. На канвасе можно выжать больше FPS.
Если у вас внутри этих гексов какая-то сложная интерактивщина, все меняется и скачет — лучше SVG. Если нет, и если гексов очень много — то canvas.
На фреймворках можно сделать прототипы и посмотреть, что удобнее, что быстрее. На vanilla.js потом перепишете, если проиводительности не хватит.
И то и это, они должны быть вместе. Почитай про яндекс карты.
Пути svg, отрисовка canvas, до 2014 было точно так.
Фрейм, это что бы быстро запустить проект, для старта подойдут, да и дальше тоже. Вы же не Яндекс) А вообще почему бы не воспользоваться готовыми решениями ?
Например, какими? Я просто впервые подошёл к подобной задаче, обычно занимаюсь бекэндом) Поэтому сейчас активно читаю разные материалы, чтобы понять с какой стороны начинать, и от разнообразия решений голова уже пухнет)
Средний
Простой