Jak narysować linię między dwoma lub więcej elementami, aby je połączyć? Dowolna kombinacja HTML / CSS / JavaScript / SVG / Canvas jest w porządku.
Jeśli Twoja odpowiedź jest zgodna z którymkolwiek z powyższych, wspomnij o tym:
- elementy przeciągane
- przeciągane / edytowalne połączenia
- unikanie nakładania się elementów
To pytanie zostało zaktualizowane, aby skonsolidować liczne jego odmiany .
javascript
html
connection
line
jquery-ui-draggable
Bakhtiyor
źródło
źródło
Łączenie linii za pomocą svg było dla mnie warte strzału i zadziałało idealnie ... po pierwsze, Scalable Vector Graphics (SVG) to oparty na XML format obrazu wektorowego dla grafiki dwuwymiarowej z obsługą interaktywności i animacji. Obrazy SVG i ich zachowanie są zdefiniowane w plikach tekstowych XML. możesz stworzyć svg w HTML za pomocą
<svg>
tagu. Adobe Illustrator to jedno z najlepszych programów służących do tworzenia złożonych plików SVG przy użyciu ścieżek.Procedura łączenia dwóch elementów div za pomocą linii:
utwórz dwa elementy div i nadaj im dowolną pozycję, jaką potrzebujesz
(ze względu na wyjaśnienie robię pewne style w wierszu, ale zawsze dobrze jest utworzyć osobny plik css do stylizacji)
<svg><line id="line1"/></svg>
Znacznik linii pozwala nam narysować linię między dwoma określonymi punktami (x1, y1) i (x2, y2). (w celach informacyjnych odwiedź w3schools). Nie określiliśmy ich jeszcze. ponieważ będziemy używać jQuery do edycji atrybutów (x1, y1, x2, y2) znacznika linii.
w
<script>
tagu pisaćUżyłem selektorów do wybrania dwóch elementów div i linii ...
position()
Metoda jQuery pozwala na uzyskanie aktualnej pozycji elementu. Aby uzyskać więcej informacji, odwiedź https://api.jquery.com/position/ (możesz też użyćoffset()
metody)Teraz, gdy otrzymaliśmy wszystkie potrzebne pozycje, możemy narysować linię w następujący sposób ...
.attr()
Metoda jQuery służy do zmiany atrybutów wybranego elementu.Wszystko, co zrobiliśmy w powyższej linii, to zmieniliśmy atrybuty linii z
do
as
position()
zwraca dwie wartości, jedną 'left', a drugą 'top', możemy łatwo uzyskać do nich dostęp używając .top i .left używając obiektów (tutaj pos1 i pos2) ...Teraz znacznik linii ma dwie różne współrzędne, aby narysować linię między dwoma punktami.
Wskazówka: dodawaj detektory wydarzeń zgodnie z potrzebami do elementów div
Wskazówka: upewnij się, że najpierw zaimportujesz bibliotekę jQuery przed napisaniem czegokolwiek w tagu script
Po dodaniu współrzędnych przez JQuery ... Będzie to wyglądało mniej więcej tak
Poniższy fragment służy wyłącznie do celów demonstracyjnych. Wykonaj powyższe kroki, aby uzyskać prawidłowe rozwiązanie
źródło
Miałem te same wymagania kilka dni temu
Użyłem pliku SVG o pełnej szerokości i wysokości i dodałem go poniżej wszystkich moich elementów div i dynamicznie dodałem wiersze do tych plików SVG.
Sprawdź, jak to zrobiłem, używając svg
HTML
https://jsfiddle.net/kgfamo4b/
źródło
VisJS obsługuje to za pomocą przykładu Arrows , który obsługuje przeciągane elementy.
Obsługuje również edytowalne połączenia, z przykładem zdarzeń interakcji .
źródło
GoJS obsługuje to, dzięki przykładowi wykresu stanu , który obsługuje przeciąganie i upuszczanie elementów oraz edycję połączeń.
źródło
Ostatnio próbowałem stworzyć prostą aplikację internetową, która wykorzystuje komponenty przeciągnij i upuść i ma linie łączące je. Natknąłem się na te dwie proste i niesamowite biblioteki javascript:
źródło
Raphaël wspiera to, przedstawiając przykład Graffla .
źródło
D3 ma setki przykładów , z których niektóre są odpowiednie dla tego pytania.
Przykłady bez przeciągania i upuszczania, które są naprawione:
Przykłady bez przeciągania i upuszczania, które są interaktywne:
Przykłady z przeciąganiem i upuszczaniem:
źródło
mxGraph - używany przez draw.io - obsługuje ten przypadek użycia, z przykładem Grapheditor . Dokumentacja. Przykłady.
źródło
Cytoscape obsługuje to za pomocą przykładu architektury, który obsługuje przeciąganie elementów.
Do tworzenia połączeń służy przedłużka uchwytów krawędzi . Nie obsługuje jeszcze edycji istniejących połączeń. Pytanie.
Do edycji kształtów połączeń dostępne jest rozszerzenie edycji krawędzi . Próbny.
Rozszerzenie edycja-edycja wydaje się obiecujące, jednak nie ma jeszcze wersji demonstracyjnej.
źródło
js-graph.it obsługuje ten przypadek użycia, jak widać w jego przewodniku dla początkujących , obsługując przeciąganie elementów bez nakładania się połączeń. Wygląda na to, że nie obsługuje edycji / tworzenia połączeń. Nie wydaje się, że jest już utrzymywany.
źródło
JointJS / Rappid obsługuje ten przypadek użycia swoim przykładem Kitchensink, który obsługuje przeciąganie i upuszczanie elementów oraz zmianę położenia połączeń. Ma wiele przykładów.
źródło