Как я могу провести линию между двумя или более элементами, чтобы соединить их? Подойдет любая комбинация HTML / CSS / JavaScript / SVG / Canvas.
Если ваш ответ поддерживает что-либо из этого, укажите это:
- перетаскиваемые элементы
- перетаскиваемые / редактируемые соединения
- предотвращение перекрытия элементов
Этот вопрос был обновлен, чтобы объединить его многочисленные варианты .
Соединение строк с svgs стоило мне попыток, и это сработало отлично ... во-первых, Scalable Vector Graphics (SVG) - это формат векторного изображения на основе XML для двухмерной графики с поддержкой интерактивности и анимации. Изображения SVG и их поведение определяются в текстовых файлах XML. вы можете создать SVG в HTML с помощью
<svg>
тега. Adobe Illustrator - одно из лучших программ, используемых для создания сложных SVG с использованием путей.Процедура соединения двух div с помощью строки:
создайте два div и дайте им любую позицию, как вам нужно
(для пояснения я делаю некоторые встроенные стили, но всегда полезно создать отдельный файл css для стилизации)
<svg><line id="line1"/></svg>
Тег Line позволяет нам провести линию между двумя указанными точками (x1, y1) и (x2, y2). (для справки посетите w3schools.) мы еще не указали их. потому что мы будем использовать jQuery для редактирования атрибутов (x1, y1, x2, y2) тега строки.
в
<script>
теге написатьЯ использовал селекторы, чтобы выбрать два div и строку ...
position()
Метод jQuery позволяет нам получить текущую позицию элемента. Для получения дополнительной информации посетите https://api.jquery.com/position/ (вы также можете использоватьoffset()
метод)Теперь, когда мы получили все необходимые позиции, мы можем провести линию следующим образом ...
.attr()
Метод jQuery используется для изменения атрибутов выбранного элемента.Все, что мы сделали в строке выше, это изменили атрибуты строки с
к
as
position()
возвращает два значения, одно 'left' и другое 'top', мы можем легко получить к ним доступ, используя .top и .left, используя объекты (здесь pos1 и pos2) ...Теперь у линейного тега есть две разные координаты, чтобы провести линию между двумя точками.
Совет: добавьте прослушиватели событий по мере необходимости в div
Совет: убедитесь, что вы импортируете библиотеку jQuery, прежде чем писать что-либо в теге script
После добавления координат через JQuery ... это будет выглядеть примерно так
Следующий фрагмент предназначен только для демонстрационных целей, пожалуйста, следуйте инструкциям выше, чтобы получить правильное решение.
источник
У меня тоже было такое же требование несколько дней назад
Я использовал svg полной ширины и высоты и добавил его под всеми своими div и добавил строки в эти svg динамически.
Посмотрите, как я это сделал здесь, используя svg
HTML
https://jsfiddle.net/kgfamo4b/
источник
VisJS поддерживает это в своем примере Arrows , который поддерживает перетаскиваемые элементы.
Он также поддерживает редактируемые соединения с примером событий взаимодействия .
источник
GoJS поддерживает это в своем примере диаграммы состояний , который поддерживает перетаскивание элементов и редактирование соединений.
источник
Недавно я попытался разработать простое веб-приложение, которое использует компоненты перетаскивания и соединяет их линиями. Я наткнулся на эти две простые и удивительные библиотеки javascript:
источник
Raphaël подтверждает это своим примером Graffle .
источник
В D3 есть сотни примеров , некоторые из которых подходят для этого вопроса.
Примеры без перетаскивания, которые исправлены:
Примеры без перетаскивания, интерактивные:
Примеры с перетаскиванием:
источник
mxGraph - используется draw.io - поддерживает этот вариант использования с примером Grapheditor . Документация. Примеры.
источник
Cytoscape поддерживает это в своем примере архитектуры, который поддерживает перетаскивание элементов.
Для создания соединений имеется удлинитель кромочных ручек . Он еще не поддерживает редактирование существующих подключений. Вопрос.
Для редактирования форм соединений есть расширение для редактирования кромок . Демо.
Расширение редактирования-редактирования кажется многообещающим, однако демо пока нет.
источник
js-graph.it поддерживает этот случай использования, как это видно по его руководству по началу работы , поддержка перетаскивания элементов без подключения наложений. Не похоже, что он поддерживает редактирование / создание соединений. Похоже, он больше не поддерживается.
источник
JointJS / Rappid поддерживает этот вариант использования со своим примером Kitchensink, который поддерживает перетаскивание элементов и изменение положения соединений. Там много примеров.
источник