Как стать автором
Обновить

Комментарии 10

Каждую стрелочку можно поместить в отдельный блок.
Чем больше размер canvas, тем больше требуется памяти, к тому же притормаживать начинает на прорисовке. Поэтому, если много пустого пространства между стрелочками, то выгодно сделать для каждой стрелочки свой canvas.
отдельное человеческое спасибо!
Так же когда-то делал структуру предприятия, в качестве инструмента выбрал raphael — относительно полная кроссбраузерность, каждый графический объект имеет свою dom-ноду, т.е. абсолютно легко получилось на основе xml-представления компании визуализировать ее структуру.
пример — в указанном примере достаточно дополнить метод формирования соединения, чтобы получить «стрелочки», всего парой строк кода.
Только Raphael — это SVG (векторная графика). Для стрелок и блоков гораздо удобнее чем Canvas (растровая), но надо держать в уме принципиальную разницу ИМХО.

Насчет указанного примера — подтверждаю, можно сделать вот так. Блоки на линию были наложены так (это вообще песочница рафаели, очень полезная штука, а вот юзер группа, где я два года назад пытался понять как это делать).
ну не только SVG, но и VML, за счет чего и достигнута кроссбраузерность, но по сути да, все векторное в отличии от canvas. Спасибо за песочницу, удобно!
Проблему с наложением слоя (возможно можно и не накладывать, но нет желания разбираться) можно решить посредством CSS pointer-events.

+ решение для «иеродивых» браузеров от небезызвестной Lea Verou — www.slideshare.net/LeaVerou/css3-secrets-10-things-you-might-not-know-about-css3.
Пардонте, решение для ие… смотреть с 40-го слайда.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории