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

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.

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

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 10

    0
    Каждую стрелочку можно поместить в отдельный блок.
      +2
      Чем больше размер canvas, тем больше требуется памяти, к тому же притормаживать начинает на прорисовке. Поэтому, если много пустого пространства между стрелочками, то выгодно сделать для каждой стрелочки свой canvas.
      +9
      jsPlumb
        +1
        отдельное человеческое спасибо!
        +3
        Так же когда-то делал структуру предприятия, в качестве инструмента выбрал raphael — относительно полная кроссбраузерность, каждый графический объект имеет свою dom-ноду, т.е. абсолютно легко получилось на основе xml-представления компании визуализировать ее структуру.
        пример — в указанном примере достаточно дополнить метод формирования соединения, чтобы получить «стрелочки», всего парой строк кода.
          +2
          Только Raphael — это SVG (векторная графика). Для стрелок и блоков гораздо удобнее чем Canvas (растровая), но надо держать в уме принципиальную разницу ИМХО.

          Насчет указанного примера — подтверждаю, можно сделать вот так. Блоки на линию были наложены так (это вообще песочница рафаели, очень полезная штука, а вот юзер группа, где я два года назад пытался понять как это делать).
            +1
            ну не только SVG, но и VML, за счет чего и достигнута кроссбраузерность, но по сути да, все векторное в отличии от canvas. Спасибо за песочницу, удобно!
          +2
          Проблему с наложением слоя (возможно можно и не накладывать, но нет желания разбираться) можно решить посредством CSS pointer-events.

          + решение для «иеродивых» браузеров от небезызвестной Lea Verou — www.slideshare.net/LeaVerou/css3-secrets-10-things-you-might-not-know-about-css3.
            0
            Пардонте, решение для ие… смотреть с 40-го слайда.
            +1

            Only users with full accounts can post comments. Log in, please.