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

    Описание

    Небольшая js библиотека (12кБ) (github) позволит соединить два и более элементов на веб странице стрелками. Может быть использована в информационных, демонстрационных целях, при построении графиков или схем. Возможен выбор типа стрелки, цвета, исходящей и входящей точки соответствующих блоков. Прорисовка стрелок происходит на холсте (canvas) расположенном над общим родителем.


    Использование

    Пример 1

    canvas arrows for block elements canvas arrows for block elements

    Методы

    Метод Параметры Описание
    $cArrows(commonParentID, [options])
    • commonParentID (string) – общий родитель (независимо от уровня вложенности) для всех соединяемых блоков
    • options (object) (опционально) – единые настройки для всех рисуемых стрелок;
    Инициализирует холст (canvas), для последующего рисования стрелок. Может принимать настройки стрелок;
    Возвращаемое значение: экземпляр модуля для рисования стрелок (this);
    .updateOptions(newOptions)
    • newOptions – новый экземпляр настроек
    Устанавливает новый состав настроек для рисования стрелок;
    Возвращаемое значение: this;
    .arrow(from, to, [options])
    • from (string) – селектор элементов от которых исходят стрелки;
    • to (string) – селектор элементов до которых вести ссылки;
    • options (object) (опционально) – настройки для стрелок рисуемых в текущий момент;
    Рисует стрелку (стрелки) от и до указанных в селекторах блоков, возможна установка настроек на стрелки, рисуемые в текущий момент.
    Возвращаемое значение: this;
    * Каждая стрелка помещается во внутреннее хранилище.
    .arrows(arrowArray)
    • arrowArray – массив из стрелок {from, to, [options]} [];
    Рисует стрелки из массива аналогично .arrow();
    Возвращаемое значение: this;
    .clear() Очищает холст от нарисованных стрелок;
    Возвращаемое значение: this;
    .draw() Рисует на холсте набор стрелок ранее помещенных во внутреннее хранилище методом arrow();
    Возвращаемое значение: this;
    .redraw() Перерисовывает стрелки на холсте, эквивалент clear(), draw();
    Возвращаемое значение: this;

    Экземпляр настроек

    options = {[base], [arrow], [render]}

    Параметр Тип Значение по умолчанию Описание
    base object Хранит информацию о базовых настройках модуля
    base.canvasZIndex int -10 z-index (положение) создаваемого элемента canvas
    base.alertErrors bool true Показывать ли сообщения об ошибках в модуле.
    base.putToContainer bool true Помещать ли метаданные о созданных стрелках в контейнер (необходим при перерисовке – redraw(), draw()).
    base.canvasClass string Класс для создаваемого элемента canvas.
    base.canvasId string Id для создаваемого элемента canvas.
    arrow object Определяют настройки типа соединения стрелок, вида и размера стрелки.
    arrow.connectionType string 'rectangleAuto' Тип соединения, доступны следующие значения:
    • 'rectangleAuto' - от края прямоугольника (блока), угол просчитывается автоматически;
    • 'center' - от центра блока;
    • 'ellipseAuto' - от края эллипса (окружности), угол просчитывается автоматически;
    • 'side' - от стороны, необходимо указать значения в параметрах arrow.sideFrom, arrow.sideTo, доступные значения которых: 'top', 'right', 'bottom', 'left';
    • 'rectangleAngle' - от стороны прямоугольника указанной в градусах (0-360), угол указывается в дополнительных полях arrow.angleFrom, arrow.angleTo;
    • 'ellipseAngle' - от стороны окружности указанной в градусах (0-360), угол указывается в дополнительных полях arrow.angleFrom, arrow.angleTo;
    arrow.arrowType string 'arrow' Определяет тип стрелки:
    • 'line' - линия;
    • 'arrow' - стрелка;
    • 'double-headed' - двойная стрелка;
    arrow.arrowSize int 9 Размер стрелки в пикселях;
    render CanvasContext Настройки рисования на холсте, являются набором стандартных значений для контекста холста.
    render.lineWidth int 2 Ширина линии;
    render.strokeStyle color '#2D6CA2' Цвет-заливка линии;
    render.* Прочие возможные настраиваемые параметры определенные в контексте canvas:

    Типы соединений

    Пример 2

    rectangleAuto
    center
    ellipseAuto
    side: 'right'
    rectangleAngle: 0
    ellipseAngle: 45
    rectangleAuto
    center
    ellipseAuto
    side: 'left'
    rectangleAngle: 180
    ellipseAngle: 225

    Пример 3

    CEO
    Vladimir Evstegneev
    COO
    Ruslan Dobrolubov
    Sales
    Stepan Fedotov
    Konstantin Shishkin
    Finances
    Mariya Nikolaeva
    Elena Abashina
    Munira Abdinazarova
    IT
    Mikhail Soloviev
    Tasya Hlebnikova
    Logistic
    Leonid Voroncov

    Лицензия: GNU GPL

    Скачать GitHub Поддержать

    комментарии:

    • avatar
      18.05.2014 от Рамиль
      почему у меня не перетаскивается?
    • avatar
      19.05.2014 от michael
      Привет Рамиль! =) За перетаскивание отвечает jQuery Draggable, нужно подключить плагин и добавить всего один обработчик на перетаскивание, пример можешь увидеть в исходном коде странице после тега DEMO SCRIPTS
    • avatar
      22.06.2015 от Анна
      Добрый день. Хотелось бы при щелчке на стрелку удалять её. Каким образом можно это сделать? Если удалять из массива стрелок и перерисовывать, как найти именно нужную стрелку?
    • avatar
      20.05.2016 от Александр
      Очень круто сделано! Работать с arrows.js интуитивно удобно, он легкий, и функционал на высоте! Ман ты просто красава!
    • avatar
      09.02.2017 от alex
      А как удалять определенные стрелки? Допустим, по клику. Заранее спасибо!
    • avatar
      29.08.2017 от Victor
      Привет. Все круто, не хватает только одной функции - удалить стрелку или полностью перезаписать массив стрелок. при переобъявлении .arrows массив стрелок накладывается, а не перезаписывается, пришлось убирать ненужную стрелку на лету через хак: arrowsDrawer.CanvasStorage[2].splice(i, 1);
    • avatar
      27.09.2017 от Aleksey
      Добрый день! Пытаюсь интегрировать в Битрикс 24, но не прорисовываются стрелки. Если удалить на странице require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); то все прорисовывается и отображается. Как понять что в header.php мешает прорисовке стрелок ?
    • avatar
      27.09.2017 от aleksey
      Выяснил, что стрелки прячутся под background-color. Как их сделать поверх ?
    • avatar
      03.10.2017 от Алексей
      Приветствую! Пытаюсь интегрировать в APEX, но похоже та же проблема, что и у aleksey - стрелки не прорисовываются (видимо где-то прячутся).
    • avatar
      26.01.2018 от dr.death
      Хотелось бы ломанные-прямоугольные стрелки
    • avatar
      28.08.2019 от Юрий
      Никак не могу убрать лишние стрелки, по сути нужно найти видимость переменной и идентификатор каждой стрелки. Alert(arrowsDrawer); не показывает переменной. Сплошная проблема. Где-то нужно вставить console.log(cArrow); Прошу помощи. Виктор говорит, что у него получилось. Как он это сделал?
    • avatar
      05.12.2019 от Антон
      Скрипт супер, спасибо! Лишние стрелки убираются с помощью метода clear(); Работает через $.getJSON, асинхронно отображается через callback функцию. Да, ломаных прямоугольных стрелок очень не хватает:(
    • avatar
      24.02.2020 от Юрий
      Антон,то у меня не работает. $.getJSON("arrow").clear(); $.getJSON("cArrow").clear(); $.getJSON(cArrow).clear(); Как вызвать callback не знаю. Помоги, плиз, за вознаграждение.
    • avatar
      25.02.2020 от Юрий
      Это работает, но оно ни к чему: drag: function(){cArrow.clear()}
    • avatar
      25.02.2020 от Юрий
      так работает(код поставил перед драгом), но если делать drag родителя, то стрелка уходит в верхний левый угол: $('#minus').click(function() {cArrow.clear()})
    • avatar
      06.03.2021 от Bilbo
      2121 Here I`m babe
    • avatar
      27.08.2022 от Михаил
      А как сделать чтобы можно было вручную провести стрелку от одного блока к другому?

    оставить комментарий: