Dynamische jsPlumb-Verbindungen zeichnen keine genaue Linie

Question

Ich verwende jsPlumb, um eine Verbindungslinie von einem Bild zu einem anderen Bild zu zeichnen, aber die Linie ist nicht genau. Ich zeichne eine Linie zwischen den zwei Bildern, wenn der Benutzer die linke Maustaste auf dem Quellbild hält und die linke Maustaste auf dem Zielbild freigibt. Ich übergebe die richtigen Bild-IDs und die Linie wird gezeichnet, aber die Linie verbindet die beiden Bilder nicht.

Hier ist, wie es aussieht:

Hier mein Code:

$(document).on("mousedown",".component", function (e) { 
    if (e.which == 3) 
    { 
     source = e.target.id; 
    } 
}).on("mouseup", function (e) { 
    if (e.which == 3) 
    { 
     destination = e.target.id; 
     alert("src: " + source + " dest: " + destination); 
     jsPlumb.connect({ source:source, target:destination }); 
    } 
}); 

Die beiden Bilder (Beginn und Ende) werden dynamisch erstellt. Auch verwenden sie die jquery ui ziehbare und Dropbare.

Aber die beiden IDs werden korrekt übergeben. Hier

ist das gerenderte HTML:

<div id="circuit-board" style="width:100%; height:400px; background-color:#333; color:white;" class="ui-droppable"><div class="ui-draggable ui-draggable-handle ui-resizable" style="position: relative; width: 100px; height: 100px;"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div><img id="component_1" class="component ui-draggable ui-draggable-handle canvas-element jsplumb-endpoint-anchor jsplumb-connected" src="images/components/start.png" width="100" height="100" style="position: relative; width: 100px; height: 100px;"><div class="jsplumb-endpoint jsplumb-endpoint-anchor jsplumb-draggable jsplumb-droppable" style="position: absolute; height: 20px; width: 20px; left: 45px; top: 95px;"><svg style="position:absolute;left:0px;top:0px" width="20" height="20" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="10" cy="10" r="10" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div><div class="jsplumb-endpoint jsplumb-endpoint-anchor jsplumb-draggable jsplumb-droppable" style="position: absolute; height: 20px; width: 20px; left: 1119px; top: 395px;"><svg style="position:absolute;left:0px;top:0px" width="20" height="20" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="10" cy="10" r="10" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div><svg style="position:absolute;left:49px;top:99px" width="1086" height="462" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="jsplumb-connector"><path d="M 1074 300 C 1064 450 10 150 0 0 " transform="translate(6,6)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="#456" style="" stroke-width="4"></path></svg></div><div class="ui-draggable ui-draggable-handle ui-resizable" style="position: relative; width: 100px; height: 100px; left: 402px; top: 0px;"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div><img id="component_2" class="component ui-draggable ui-draggable-handle canvas-element jsplumb-endpoint-anchor jsplumb-connected" src="images/components/end.png" width="100" height="100" style="position: relative; width: 100px; height: 100px;"></div></div> 

Die Quelle id = component_1 und das Ziel id = component_2.

Wenn es einen besseren Weg gibt, dies zu tun .... ich bin ganz Ohr. Vielen Dank!

Answer 1

In Ihrem Beispiel ist es schwer zu sagen, was passiert, weil Sie nicht den vollständigen Code bereitstellen. Ich vermute jedoch, dass Sie die Elemente umherziehen (Sie erwähnten, dass Sie jQuery verwenden, ziehen und ablegen), und dass jsPlumb nicht erkennt, dass die Elemente verschoben wurden.

Wenn dies der Fall ist, dann liegt das daran, dass jsPlumb die Element-Offsets aus Leistungsgründen zwischenspeichert. Sie müssen daher jsPlumb explizit mit recalculate the offsets angeben.

Meine Vermutung ist, dass so etwas wie dies für Sie arbeiten würde:

on("mouseup", function (e) { 
    if (e.which == 3) 
    { 
    jsPlumb.recalculateOffsets($("#circuit-board>div")); 
    destination = e.target.id; 
    jsPlumb.connect({ source:source, target:destination }); 
    } 
}); 

Ich bin nicht sicher, genau auf das, was Element recalculateOffsets auf, es im Allgemeinen nennen sollten die Eltern der ziehbar Komponenten sein.