Создание связи между элементами на JavaScript/SVG/Canvas

Быстрый ответ

Для создания соединительной линии между двумя HTML-элементами можно воспользоваться псевдоэлементом ::after в статической ситуации или же применить SVG в сочетании с JavaScript для динамического оформления.

Решение на основе CSS с использованием псевдоэлемента ::after выглядит следующим образом:

#element1::after {
  content: '';
  position: absolute;
  width: calc(100% – 20px);
  height: 2px;
  background: black;
  top: 50%;
  left: 100%;
}

Соответствующая HTML-разметка:

<div id="element1">Элемент 1</div>
<div id="element2" style="margin-left:100px;">Элемент 2</div>

Комбинирование SVG и JavaScript для создания динамически изменяемой линии:

const drawLine = (el1, el2, line) => {
  const {right, top} = el1.getBoundingClientRect();
  const {left, bottom} = el2.getBoundingClientRect();
  line.setAttribute('x1', right);
  line.setAttribute('y1', top);
  line.setAttribute('x2', left);
  line.setAttribute('y2', bottom);
};

Пример использования SVG:

<svg><line id="line" stroke="black"/></svg>

А так выполняется вызов функции рисования:

drawLine(document.getElementById('element1'), document.getElementById('element2'), document.getElementById('line'));

Расширенное использование: Библиотеки для интерактивного создания соединений

Для реализации более сложных и динамичных интерактивных соединений существуют специализированные библиотеки и технические решения.

jsPlumb: Интерактивное создание соединений

jsPlumb позволяет создавать перетаскиваемые и редактируемые соединения. Библиотека представлена в двух вариантах: общедоступном Community edition и коммерческом Toolkit edition для решения более сложных задач.

Подробнее об этом расскажет наш спикер на видео

SVG & jQuery: Динамически изменяемые линии

Сочетание SVG и jQuery позволяет создавать линии, которые автоматически корректируются при перемещении элементов. С помощью методов jQuery position() и .attr(), можно контролировать координаты концов линии SVG.

VisJS & Leader Line: Работа с богатым массивом данных

Библиотеки типа VisJS и Leader Line обеспечивают расширенные возможности работы с перетаскиваемыми элементами и управления соединениями в приложениях с обширным набором данных.

Визуализация

Представим, что мы имеем два элемента, которые можно запомнить как острова:

Остров А (🏝️): [Элемент А]
Остров Б (🏝️): [Элемент Б]

Линия между островами представляет собой виртуальный мост (🌉):

🏝️ Элемент А 🌉 Элемент Б 🏝️
# Здесь представлена визуализация линии, связывающей Элемент А с Элементом Б

Пример разметки HTML/CSS для создания соединительного моста:

<div id="elementA">🏝️ Элемент А</div>
<div id="bridge">🌉</div>
<div id="elementB">Элемент Б 🏝️</div>

Ваш CSS код превращает встречу двух элементов в мостостроительное событие, соединяя #elementA и #elementB через #bridge.

Расширенные сценарии – Шаг вперёд

Рисование кривых с помощью Bezier.js

Желаете сделать соединения более выразительными? Используйте кривые Безье, чтобы добавить линиям элегантности.

Интеграция данных в приложениях с использованием jQuery

Важно отслеживать изменения данных и визуально отоброжать эти изменения в пользовательском интерфейсе. Методы jQuery .data() и .attr() помогут вам следить за изменениями и своевременно реагировать на них.

Доступный SVG

Адаптация SVG под стандарты WCAG гарантирует доступность и лучшее взаимодействие для всех пользователей, несмотря на ограничения.

Полезные материалы

1. Анимация SVG линий: Как это работает | CSS-Tricks – методики анимации SVG линий.
2. <line> – SVG: Масштабируемая векторная графика | MDN – основная информация о создании связующих линий с помощью SVG.
3. Кривая Безье – JavaScript.Info – подробное руководство по созданию изогнутых линий с использованием кривых Безье.
4. Как нарисовать линию между двумя div'ами? – Stack Overflow -практика реализации техники создания соединений между HTML-элементами.
5. DrawSVG | GSAP | Документация и обучение – руководство по плагину GreenSock для создания интерактивной анимации SVG-линий.
6. Учебник | DigitalOcean – разъяснение особенностей позиционирования в CSS, необходимых для согласованного соединения элементов.