Question

所以我有这个功能创建start-＆amp;端点，但我无法弄清楚如何自动连接它们，更不用说保存＆amp;使用下面提供的样式恢复它们。

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

任何人都知道如何自动连接/保存＆amp;使用提供的样式恢复连接？

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的一种方法。

jsPlumb连接＆amp;端点样式

1 个答案: