Программирование векторного слоя

Question

[Алексей Чернышев]

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

То есть смысл примерно состоит в следующем: пользователю показывается этот слой, после чего пользователь масштабирует его до тех пор, пока блоки не примут определенный размер, чтобы пользователь мог рассмотреть их в данном масштабе (например 20 блоков на экране).

Пока что я рассматриваю в качестве технологии реализации данного интерактивного элемента JavaScript. Flash недопустим, по оговоренности в задаче. Еще есть мысли об использовании HTML5 Canvas, но пока что я не знаю его возможностей, так как никогда не работал с ним.

Кто что думает по поводу того, какую технологию выбрать для реализации? Может есть советы от тех, кто уже делал что-то подобное.

Answer 1

[Laplace]

Ничего в этом не понимаю, но СЛЫШАЛ, что при использовании HTML5 Canvas работать с геометрией как с вектором не выйдет, т.к. объекты сразу растеризуются и все трансформации потом делаются уже с растром.

Comments

[Алексей Чернышев]

Это обидно. Хочется разобраться как масштабировать вектор — это бы решило много проблем сразу.

[Laplace]

Рекомендую за мной перепроверить, т.к. меня, возможно, дезынформировали.

Answer 2

[Константин Китманов]

А почему не SVG?

Canvas — очень низкоуровневое API, чтобы рисовать с его помощью векторы, придется написать немаленькую обертку (хотя, может, что-то уже есть).

Comments

[for93t]

Если обратитесь к SVG, то рекомендую попробовать обертку — raphaeljs.com/ Делал с ее помощью интерактивный выбор запчастей на чертеже оборудования. Там, правда, не больше 300-500 деталей на страницу, и кое-где тормоза ощущаются. Но, возможно, под вашу задачу будут использоваться другие функции…

Answer 3

[dom1n1k]

Если использовать Canvas непосредственно, через его родной API — да, никакого вектора там не будет. Что в растр упало, то пропало.
Но существуют фреймворки-надстройки, которые в большей или меньшей степени дают векторные возможности.
Навскидку: Processing.js, MooTools Canvas Library, Gury, Paper.js, CanvasXpress, LibCanvas, jCanvaScript (авторы последних двух присутствуют на Хабре). Все они легко гуглятся. Посмотрите доки, может что-то и подойдет.
Кроме того, есть куча библиотек более узкого профиля, например рисование графиков-диаграмм или отображения карт по тиру Google Maps.

Если говорить, о SVG, то обучно вспоминают библиотеку Raphael (автор на Хабре есть). Хотя она, конечно, не единственная.