javascript - Rita en anslutande linje mellan två element

Hur kan jag rita en linje mellan två eller fler element för att koppla dem? Alla kombinationer av HTML/CSS/JavaScript/SVG/Canvas fungerar.

Om ditt svar stödjer någon av dessa, nämn det då:

  • draggable element
  • dragbara/redigerbara anslutningar
  • undvikande av elementsöverlagring

Denna fråga har uppdaterats för att konsolidera de många variationerna av den.

Svar #1

jsPlumb är ett tillgängligt alternativ som stödjer drag och släpp, vilket ses i dess många demonstrationer, inklusive Flowchart-demonstrationen.

Det finns tillgängligt i en gratis Community-utgåva och en betalad Toolkit-utgåva.

Toolkit-upplagan omsluter Community-upplagan med ett omfattande databindningslager, samt flera UI-widgetar för att bygga applikationer och integrationer för populära bibliotek, och är kommersiellt licensierad.

Svar #2

Nyligen har jag försökt utveckla en enkel webbapp som använder dra-och-släpp-komponenter och har linjer som förbinder dem. Jag stötte på dessa två enkla och fantastiska JavaScript-bibliotek:

  1. Plain Draggable: enkel och högpresterande bibliotek som tillåter HTML/SVG-element att dras.
  2. Ledningslinje: Rita en ledningslinje på din webbsida

Arbetande exempel länk (användning: klicka på lägg till scen för att skapa ett dragbart objekt, klicka på lägg till val för att rita en ledarlinje mellan två olika dragbara objekt)

Svar #3

Att sammanfoga linjer med svgs var värt ett försök för mig, och det fungerade perfekt... först och främst är Scalable Vector Graphics (SVG) ett XML-baserat vektorbildformat för tvådimensionell grafik med stöd för interaktivitet och animation. SVG-bilder och deras beteenden definieras i XML-textfiler. Du kan skapa en svg i HTML med <svg>-taggen. Adobe Illustrator är en av de bästa programvarorna som används för att skapa komplexa svgs med hjälp av paths.

Förfarande för att sammanfoga två divar med en linje:

  1. skapa två divar och ge dem vilken position som helst som du behöver

    <div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>

    (för förklaringens skull gör jag lite inline-styling men det är alltid bra att göra en separat css-fil för styling)

  2. <svg><line id="line1"/></svg>

    Line-taggen låter oss rita en linje mellan två specificerade punkter (x1,y1) och (x2,y2). (för referens besök w3schools.) vi har inte specificerat dem än, eftersom vi kommer att använda jQuery för att redigera attributen (x1,y1,x2,y2) hos line-taggen.

  3. i <script>-taggen skriv

    line1 = $('#line1');   
div1 = $('#div1');   
div2 = $('#div2');

    Jag använde selektorer för att välja de två divarna och raden...

    var pos1 = div1.position();
var pos2 = div2.position();

    jQuery position()-metod gör att vi kan få den aktuella positionen för ett element. För mer information, besök https://api.jquery.com/position/ (du kan även använda offset()-metoden)

Nu när vi har fått alla positioner vi behöver kan vi rita linjen enligt följande...

line1
  .attr('x1', pos1.left)
  .attr('y1', pos1.top)
  .attr('x2', pos2.left)
  .attr('y2', pos2.top);

jQuery .attr()-metoden används för att ändra attribut för det valda elementet.

Allt vi gjorde i ovanstående rad är att vi ändrade egenskaperna hos raden från

x1 = 0
y1 = 0
x2 = 0
y2 = 0

till

x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top

eftersom position() returnerar två värden, ett 'left' och ett 'top', kan vi enkelt komma åt dem med .top och .left med hjälp av objekten (här pos1 och pos2) ...

Nu har linjetaggen två olika koordinater för att rita en linje mellan två punkter.

Tips: lägg till händelselyssnare till divar efter behov

Tips: se till att du importerar jQuery-biblioteket först innan du skriver något i script-taggen

Efter att ha lagt till koordinater genom JQuery ... Det kommer att se ut ungefär så här

Följande utdrag är endast för demonstrationssyfte, vänligen följ stegen ovan för att få korrekt lösning

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg>

Relaterade artiklar