jsPlumb连接&端点样式

时间:2015-02-24 14:48:25

标签: jquery jsplumb

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

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

任何人都知道如何自动连接/保存&使用提供的样式恢复连接?

1 个答案:

答案 0 :(得分:0)

以下是如何连接端点:

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