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

в 22:10, , рубрики: canvas, div, html5, javascript, метки: , ,

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

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

Примеры использования и более подробно можно посмотреть здесь.

design_canvas_arrows

Так же похожий, интересный способ построения блочных схем показан здесь — используется короткий стиль написания, в нашем же случае, мы не ограничиваемся простыми блок схемами, а соединяем или указываем на все, что хотим, другие блоки, параграфы, рисунки и т.д. используя при этом canvas.

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

Автор: verhov


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js