jsPlumb 连接和端点样式

Question

所以我有这个函数创建开始和端点，但我不知道如何使用下面提供的样式自动连接它们，更不用说保存和恢复它们了。

function addEndpoints(id,target,source) {   // adding Endpoints (source/target)

// Setting Source-/Startpoint Style
var sourceEndpoint = {
    endpoint:"Dot",
    isSource:true,
    paintStyle:{strokeStyle:"#00CC00",fillStyle:"transparent",radius:7,lineWidth:3},                
    connector:["Flowchart", {gap:8,cornerRadius:5,alwaysRespectStubs:true}],                                                
    connectorStyle:{lineWidth:4,strokeStyle:"#567F9F",joinstyle:"round",outlineColor:"white",outlineWidth:2},
    hoverPaintStyle:{fillStyle:"#295D89",strokeStyle:"#295D89"},
    connectorHoverStyle:{lineWidth:4,strokeStyle:"#295D89",outlineWidth:2,outlineColor:"white"},
    maxConnections: 2,
    anchor:"BottomCenter"
},      
// Setting Targetpoint Style
targetEndpoint = {
    endpoint: ["Rectangle", {width:13, height:13}],                 
    paintStyle:{ fillStyle:"red",radius:11 },
    hoverPaintStyle:{fillStyle:"#295D89",strokeStyle:"#295D89"},
    maxConnections:-1,
    dropOptions:{ hoverClass:"hover", activeClass:"active" },
    isTarget:true,
    anchor:"TopCenter"
};  

if(target == 1){    // add target connector?

    // Putting Targetpoint on Main
    jsPlumb.addEndpoint(
        $('#'+id),
        targetEndpoint
    );
}

if(source == 1){ // add source connector?
    // Putting Source-/Startpoint on Main
    jsPlumb.addEndpoint(
        $('#'+id),
        sourceEndpoint
    );
}

有人知道如何使用提供的样式自动连接/保存和恢复连接吗？

Answer 1

以下是连接端点的方法：

var e1 = jsPlumb.addEndpoint("d1", {
    isSource:true,
});

var e2 = jsPlumb.addEndpoint("d2", {
    isTarget:true,
});

var conn = jsPlumb.connect({source:e1, target:e2});

关于保存/恢复，保存连接（从/到对，而不是样式），然后在重新创建时只使用相同的样式集。

https://github.com/nitinsurana/jsPlumb-Persistence/blob/master/jsplumb-persistence-plugin.js 这是一种保存/加载 jsPlumb 的方法。