Создание соединительных стрелок для блочных элементов используя canvas

Здравствуйте!

Недавно появилась необходимость сделать простое иерархическое дерево для 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.

Спасибо за внимание!