webentwicklung-frage-antwort-db.com.de

Zeichne einen Pfeil zwischen zwei Divs

Ich suche nach einer Lösung für die Frage, von der ich erwartet hatte, dass sie bereits gelöst wurde ... Aber ich sah nur große Projekte mit vielen Funktionen, aber keine einfache Lösung.

Eigentlich muss ich so etwas bekommen:

http://i.imgur.com/iktvmLK.png

Um einen Pfeil über einem Div mit einigen Quadraten (Divs) zu zeichnen

<div id="container">
<div class="white_field"></div>
<div id="1" class="black_field">
<br style="clear:both;">    
<div id="2" class="black_field">
<div class="white_field"></div>
<br style="clear:both;">    
<div id="3" class="black_field">
<div class="white_field"></div>
</div>

Ich schaute in die Richtung der Leinwand, stolperte aber, dass die Leinwand hinter meinen Divs nicht sichtbar war (vielleicht sollte ein paar Z-Indizes helfen) oft auftauchen . (um etwas auf der Website zu erklären, sind Pfeile fast ein Muss)

23
Alexander P

Sie könnten SVG in Betracht ziehen.

enter image description here

Insbesondere können Sie eine Linie mit einem Marker-Ende verwenden, das mit einem Pfeilpfad geformt ist.

Stellen Sie sicher, dass Orient = Auto eingestellt ist, sodass die Pfeilspitze entsprechend der Steigung der Linie gedreht wird.

Da es sich bei SVG um ein DOM-Element handelt, können Sie die Anfangs- und Endposition der Zeile in Javascript steuern.

Hier ist Code und eine Geige: http://jsfiddle.net/m1erickson/9aCsJ/

<svg width="300" height="100">

    <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
        </marker>
    </defs>

    <path d="M30,150 L100,50"
          style="stroke:red; stroke-width: 1.25px; fill: none;
                 marker-end: url(#arrow);"
    />

</svg>
34
markE

Verwenden Sie eine Bibliothek wie JSPlumb: https://jsplumbtoolkit.com/

4
c69

Ich habe keine Ahnung, ob jemand diesen Thread mehr ansieht, aber hier ist die Lösung, die ich verwendet habe. Sie unterscheidet sich nur geringfügig von der Antwort von @markE. Diese Antwort macht es viel einfacher, genau anzugeben, wo die Linie beginnen und stoppen muss.

<head>
  <style>
    .arrow{
      stroke:rgb(0,0,0);
      stroke-width:2; 
      marker-end:url(#markerArrow)
    }
  </style>
</head>

<body>
  <svg height="210" width="500">
    <defs>
        <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
               orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
        </marker>
    </defs>

    <line x1="0" y1="0" x2="200" y2="100" class="arrow" />
  </svg>

</body>

Sie müssen nur die x- und y-Koordinaten der Linie ändern! Ich habe diese Antwort in meiner Reaktions-App verwendet und sie hat wunderbar funktioniert ... und hier ist die Geige .

2
Red

Es ist ziemlich einfach, die Pfeilspitze zu erstellen. Siehe dieses Beispiel zu CSS-Tricks . Vielleicht kann dies in einem Container mit Pfeillinie geschehen.

0
user887958

Canvas und jCanvas

Je nach Ihren Bedürfnissen sollten Sie unbedingt Canvas und die Bibliothek " jCanvas " verwenden. Es macht solche Sachen zu einem Kinderspiel.

Ich wagte den Weg, alles mit DIVs und jQuery zu erledigen, aber Interaktivität und Qualität scheiterten immer. Dies öffnet die Türen, ohne die Code-Komplexität zu erhöhen.

Ich hoffe, das hilft anderen, wie mir. 

JP

EDIT 2017 05 20:

Ich hatte hier ein Beispiel, das mit der Sandbox von jCanvas verknüpft war und den gesamten Code enthielt, um einen Pfeil zwischen zwei Elementen zu zeichnen und diese beiden Elemente auf die Leinwand zu ziehen. Dieser Link funktioniert jedoch nicht mehr und ich habe den Code nirgendwo anders. 

Ich denke immer noch, dass Sie jCanvas ausprobieren sollten, aber leider habe ich keinen Beispielcode, um Sie anzufangen. 

0
Joshua Pinter