Frage Zeichnen Sie den Pfeil zwischen den Listen


Gibt es eine Möglichkeit, einen Pfeil zwischen den beiden hervorgehobenen Listenelementen dynamisch zu zeichnen?

Wenn ich also über "Item 2" schwebte, würde ich das tun (aber einen geraden Pfeil):

Item 1            Highlight 3
Item 2-----\      Highlight 1
Item 3      ----->Highlight 2

Dies ist der Code aus der Antwort, die ich vor ein paar Minuten bekommen habe:

Markieren Sie das Element in zwei Listen, wenn Sie den Mauszeiger darüber bewegen

$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    $("#qq" + n + ", #aa" + n).toggleClass("highlight");
});

jsfiddle: http://jsfiddle.net/e37Yg/1/

<ul class="list1">
    <li id="qq1">sdfsdv</li>
    <li id="qq2">bnvnvb</li>
    <li id="qq3">nmnutymnj7</li>
    <li id="qq4">cvbc</li>
    <li id="qq5">45tsgd</li>
</ul>

<ul class="list2">
    <li id="aa3">fgtbrtgb</li>
    <li id="aa1">vbn xgbn</li>
    <li id="aa5">vdgver</li>
    <li id="aa4">asdasdv</li>
    <li id="aa2">nvfbnfn</li>
</ul>

11
2018-01-12 02:33


Ursprung


Antworten:


Sie müssen hier keine 2D-Zeichnung verwenden. Sieh dir das an: http://jsfiddle.net/vjYuW/ Ich hab nur gegabelt und die Geige, die du oben gepostet hast, aktualisiert.

Hier ist der wesentliche Code, es behandelt 3 DIVs 1 Pixel breit oder groß, um die Linien zu zeichnen:

HTML:


...left list...
<div id="segment1" class="hline"></div>
<div id="segment2" class="vline"></div>
<div id="segment3" class="hline"></div>
...right list...

CSS:


... formatting for ULs here, both have to be float:left...

.highlight { background-color: red; }

.hline {    
    display:block;
    position:relative;
    float:left;
    height: 1px;
    width: 7em;  
}

.vline {
    display:block;
    position:relative;
    float:left;
    height: 1px;
    width: 1px;    
}

JavaScript:


$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    var leftY = $('#qq' + n).position().top;
    var rightY = $('#aa' + n).position().top;
    var H = Math.abs(rightY-leftY);
    if (H == 0) H = 1;
    $('#segment1').css('top',leftY+'px');
    $('#segment3').css('top',rightY+'px');
    $('#segment2').css('top',Math.min(leftY,rightY)+'px');
    $('#segment2').css('height',H+'px');
    $("#qq" + n + ", #aa" + n + ",#segment1,#segment2,#segment3").toggleClass("highlight");
});

Hinweis: Sie müssen wahrscheinlich ein wenig zwicken, um alle Browser zu unterstützen - ich habe IE6 & Co. nicht überprüft.


6
2018-01-12 03:53



Sie können das HTML5 verwenden canvas Element, um dies zu erreichen.

Ich bin mir nicht sicher, ob das der beste Weg ist, um es zu tun, aber ich habe herumgespielt und bin gekommen Dies.

Was ich getan habe, ist, dass ich zuerst die Listen in ein div. Das div ist mit CSS gestylt, um eine relative Position zu haben. Dies ist der Fall, wenn Sie die Position mit jQuery erhalten, wird eine relative Position dazu angegeben. Als Nächstes lege ich eine Leinwand vor die Listen und deaktiviere Zeigerereignisse darauf. Ich fügte auch etwas hinzu, um die Höhe der Leinwand an die Höhe der Listen anzupassen. Dann habe ich einen anderen Handler für Hover hinzugefügt. Wenn Sie den Mauszeiger darüber bewegen, wird der Pfeil gezeichnet, und wenn Sie den Mauszeiger darüber bewegen, wird die Leinwand gelöscht.

Den Pfeil zu zeichnen ist ziemlich einfach. Zuerst bekommt es die Positionen der Gegenstände. Dann zeichnet es eine Linie und verwendet etwas Mathematik, um den Pfeil zu orientieren. Die Positionen zu bekommen ist ziemlich einfach. Für die richtige Liste können Sie einfach die verwenden position Methode. Für die linke Liste habe ich eine temporäre erstellt span und fügte es an den Listenpunkt an und bekam dann die Position davon.


6
2018-01-12 03:16



Ich denke für etwas wie dieses können Sie eine Zeichnungsbibliothek eines Drittanbieters wie verwenden Vektor-Zeichen-Bibliothek.

Sie können die Bibliothek über den Link herunterladen und Ihrer App hinzufügen. Dann:

Fügen Sie es auf Ihrer Seite ein:

<script type="text/javascript" src="wz_jsgraphics.js"></script>

Dann füge zu deiner Hover-Funktion hinzu:

$(".list1 li, .list2 li").hover(function () {
  var n = this.id.substr(2);
  $("#qq" + n + ", #aa" + n).toggleClass("highlight");

  //canvas is your drawing div
  var jg = new jsGraphics("canvas");
  jg.drawLine($("#qq" + n).offset().left + 30, $("#qq" + n).offset().top , $("#aa" + n).offset().left, $("#aa" + n).offset().top );
  jg.paint();

Beachten Sie, dass Sie den Code schreiben müssen, um die Zeile in der Hover-Funktion zu entfernen, andernfalls bleibt sie erhalten. Auch ich benutze offset() um die Position der Elemente in der Liste zu berechnen. Dies sollte funktionieren, aber Sie müssen möglicherweise ein wenig zwicken, damit es richtig aussieht.

Der obige Code funktioniert, ist aber nicht vollständig. Vielleicht kann die zweite Funktion im Hover aufrufen clear() auf der Leinwand. Canvas ist hier das umschließende div, das die beiden Listen umschließt.


3
2018-01-12 03:14



<script src='www.walterzorn.de/en/scripts/wz_jsgraphics.js'> </script>

function drawLine(element1, element2) {
    var jg = new jsGraphics("renderGraph");
    var ele1 = document.getElementById(element1);
    var ele2 = document.getElementById(element2);
    jg.setColor("#DDD");
    jg.setStroke(5);
    jg.drawLine(ele1.offsetLeft + ele1.offsetWidth/2 , ele1.offsetTop + ele1.offsetHeight/2, ele2.offsetLeft + ele2.offsetWidth/2, ele2.offsetTop + ele2.offsetHeight/2);
    jg.paint();
}

0
2018-02-28 13:31