- PVSM.RU - https://www.pvsm.ru -
Здравствуйте!
Недавно появилась необходимость сделать простое иерархическое дерево для web страницы (структура организации). Блоки получились неплохие, но когда пришло время соединить все стрелками, возник вопрос – как? Решение было два: рисовать стрелки в .png или же использовать спецсимволы.
Но хотелось чего-то более быстрого, удобного, современного – т.е. просто указать: стрелка от блока А к блоку Б. Уже к вечеру была написана небольшая библиотека, позволяющая реализовывать задуманное…
Реализация проста и удобна, как и планировалось; технически это происходит в два шага:
arrow_initialize( divid, newcanvasid);
создает новый canvas для отрисовки стрелок на заднем фоне (в родительском блоке);
arrow(canvasid, div1, div1side, div2, div2side, color, lineWidth, shadowColor, shadowBlur);
рассчитываем координаты начала и конца стрелки исходя из id заданных блоков и выводим стрелку на заранее созданный canvas;
На текущий момент проблем обнаружил несколько:
Естественно, при перемещении (или анимации) блоков относительно фона – стрелки останутся на месте.
Все пока довольно сыро, поэтому носит статус beta, если у Вас есть предложения то с радостью «pull request» на guthub [1].
Примеры использования и более подробно можно посмотреть здесь [2].
Так же похожий, интересный способ построения блочных схем показан здесь [3] — используется короткий стиль написания, в нашем же случае, мы не ограничиваемся простыми блок схемами, а соединяем или указываем на все, что хотим, другие блоки, параграфы, рисунки и т.д. используя при этом canvas.
Спасибо за внимание!
Автор: verhov
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/4424
Ссылки в тексте:
[1] guthub: https://github.com/Verhov/arrows_for_blocks
[2] здесь: http://michael.verhov.com/Project/canvas_arrows_for_div
[3] здесь: http://www.headjump.de/article/arrows-and-boxes
Нажмите здесь для печати.