动态 jsPlumb 连接没有画出准确的线

Question

我正在使用 jsPlumb 绘制从一个图像到另一个图像的连接线，但该线不准确。当用户在源图像上按住鼠标左键并在目标图像上释放鼠标左键时，我在两个图像之间画一条线。我传递了正确的图像 ID，并且正在绘制线条，但线条没有连接两个图像。

这是它的样子：

这是我的代码：

$(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 });
    }
});

动态创建两个图像（开始和结束）。他们还使用可拖放的 jquery ui。

但是两个 id 被正确传递了。

这里是渲染的 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>

源 id = component_1，目标 id = component_2。

如果有更好的方法来做这件事......我全神贯注。谢谢！

Answer 1

在您的示例中很难说出发生了什么，因为您没有提供完整的代码。但是，我猜您正在拖动元素（您提到您正在使用 jQuery 拖放），并且 jsPlumb 无法识别元素已移动。

如果是这样的话，那是因为jsPlumb出于性能原因缓存了元素偏移量，所以你需要告诉jsPlumb显式地recalculate the offsets。

我的猜测是这样的东西对你有用：

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

我不确定在哪个元素上调用recalculateOffsets，一般来说它应该是可拖动组件的父级。