使用 jsPlumb 重绘端点

Question

几天来我一直被这个问题困扰，希望你能帮助我知道如何解决这个问题。我创建了这个类似于流程图的应用程序来绘制不同类型的铅垂项目，并附有不同的端点。在将其创建为元素后，端点将根据铅垂项目的类型动态添加。是不是像下面这样

这就是我创建铅锤项目的方式。

    var element = document.createElement("div");
    element.setAttribute("id",schema_id);
    element.setAttribute("class","item " +control.Type);
    element.setAttribute("style","left:" +posX + "px ; top: "+posY+"px");

    var output = document.getElementById('container');
    output.appendChild(element);

然后我根据其类型添加端点。

    jsPlumb.addEndpoint(element,<the style goes here>,{ anchor:<the location of the endpoint goes here>, uuid: <a new ID is created for this>});

这就是它的样子

Screen One

我设法从方法 "GetConnections" 中获取数据并将其作为 JSON 保存在数据库中。此 JSON 包括所有用于铅垂项目和所有端点的 ID。

但是当我尝试将它再次检索回 UI 时，它看起来像这样。除了端点之外，一切看起来都很棒。

Screen Two

重绘时，端点的创建方式与上述相同。要重新连接端点，我正在使用此代码。

    jsPlumb.connect({ source:<source id>, target:<target id>,anchors:<location of the endpoint>,<style>);

问题：

对于上面的代码，虽然我将端点的 UUID 给了源和目标，但它并没有将其识别为要连接的端点。

有没有办法找到 ID 并将它们连接起来？我发现只有铅锤项目可以用 "getElementById" 和 UUID 搜索，但不能搜索端点。

问题是如何让这些端点像最初绘制的那样连接起来。如何重新连接每个端点？我有所有的 ID，当它们被重新绘制时，它们的 ID 与保存时的 ID 相同。但是我找不到一种方法将端点分别重新连接回去，因为每个铅垂项目都有不同类型的端点。

有什么建议吗？

抱歉久了post 提前致谢！！

Answer 1

请看the connect method

如果您连接 ID、元素或端点，请使用

 jsPlumb.connect({source:<source id>, target:<target id>});

但如果您连接两个端点的 UUID 数组，请使用

jsPlumb.connect({uuids:<array of uuids>});

使用 jsPlumb 重绘端点

Redrawing endpoints using jsPlumb

angularjs

jsplumb

endpoints