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

    Описание

    Небольшая 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
      05.02.2016 от Williamon
      nice site!
    • avatar
      17.03.2016 от juliadiets.com
      Хотя для текста и стрелок используются разные блочные элементы, которые должны располагаться на разных строках, влияние
    • avatar
      06.04.2016 от Smitha277
      I like what you guys tend to be up too. Such clever work and coverage! Keep up the very good works guys I've incorporated you guys to my personal blogroll. eedaeddkakdecaag
    • avatar
      07.04.2016 от Pharmk593
      Very nice site! [url=http://yieapxo2.com/qoqs/2.html]cheap goods[/url]
    • avatar
      07.04.2016 от Pharmk402
      Very nice site! cheap goods http://yieapxo2.com/qoqs/4.html
    • avatar
      07.04.2016 от Pharmb131
      Very nice site!
    • avatar
      09.04.2016 от Pharmd880
      Very nice site! [url=http://oieapxy2.com/tyastt/2.html]cheap goods[/url]
    • avatar
      09.04.2016 от Pharmg907
      Very nice site!
    • avatar
      10.04.2016 от Pharmf80
      Very nice site!
    • avatar
      11.04.2016 от Pharmb727
      Very nice site! [url=http://opxyiea2.com/yoyatko/2.html]cheap goods[/url]
    • avatar
      11.04.2016 от Pharmb66
      Very nice site! cheap goods http://opxyiea2.com/yoyatko/4.html
    • avatar
      11.04.2016 от Pharmd87
      Very nice site!
    • avatar
      12.04.2016 от Pharmd978
      Very nice site! [url=http://oixypea2.com/oxovyr/2.html]cheap goods[/url]
    • avatar
      12.04.2016 от Pharmd763
      Very nice site! cheap goods http://oixypea2.com/oxovyr/4.html
    • avatar
      12.04.2016 от Pharmf869
      Very nice site!
    • avatar
      13.04.2016 от Pharmb28
      Very nice site! [url=http://oixypea2.com/oxovyr/2.html]cheap goods[/url]
    • avatar
      13.04.2016 от Pharmk117
      Very nice site! cheap goods http://oixypea2.com/oxovyr/4.html
    • avatar
      13.04.2016 от Pharma867
      Very nice site!
    • avatar
      14.04.2016 от Pharmd925
      Very nice site! [url=http://yieopxa2.com/yxyatkx/2.html]cheap goods[/url]
    • avatar
      14.04.2016 от Pharme673
      Very nice site! cheap goods http://yieopxa2.com/yxyatkx/4.html
    • avatar
      14.04.2016 от Pharmd81
      Very nice site!
    • avatar
      15.04.2016 от Pharmf639
      Very nice site! [url=http://aieopxy2.com/osovyv/2.html]cheap goods[/url]
    • avatar
      15.04.2016 от Pharmc140
      Very nice site! cheap goods http://aieopxy2.com/osovyv/4.html
    • avatar
      15.04.2016 от Pharme306
      Very nice site!
    • 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 - стрелки не прорисовываются (видимо где-то прячутся).

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