Здравствуйте!
Недавно появилась необходимость сделать простое иерархическое дерево для web страницы (структура организации). Блоки получились неплохие, но когда пришло время соединить все стрелками, возник вопрос – как? Решение было два: рисовать стрелки в .png или же использовать спецсимволы.
Но хотелось чего-то более быстрого, удобного, современного – т.е. просто указать: стрелка от блока А к блоку Б. Уже к вечеру была написана небольшая библиотека, позволяющая реализовывать задуманное…
Реализация
Реализация проста и удобна, как и планировалось; технически это происходит в два шага:
-
arrow_initialize( divid, newcanvasid);создает новый canvas для отрисовки стрелок на заднем фоне (в родительском блоке);
-
arrow(canvasid, div1, div1side, div2, div2side, color, lineWidth, shadowColor, shadowBlur);рассчитываем координаты начала и конца стрелки исходя из id заданных блоков и выводим стрелку на заранее созданный canvas;
Недостатки:
На текущий момент проблем обнаружил несколько:
- например созданный canvas перекрывает текст размещенный в блоках (он становится недоступным везде кроме Opera) – бился с z-index – не помогло;
- так же в Firefox происходит небольшое смещение canvas.
Естественно, при перемещении (или анимации) блоков относительно фона – стрелки останутся на месте.
В заключении:
Все пока довольно сыро, поэтому носит статус beta, если у Вас есть предложения то с радостью «pull request» на guthub.
Примеры использования и более подробно можно посмотреть здесь.
Так же похожий, интересный способ построения блочных схем показан здесь — используется короткий стиль написания, в нашем же случае, мы не ограничиваемся простыми блок схемами, а соединяем или указываем на все, что хотим, другие блоки, параграфы, рисунки и т.д. используя при этом canvas.
Спасибо за внимание!
Автор: verhov
