如何设置一个分开在中间的
JsPlumb连接,并转到多个endploints,如下图所示？
A：连接两个端点与一个连接：
B：连接两个端点与一个连接：
C：连接三个端点与一个连接：
编辑：使用FlowChart选项我得到一个奇怪的错误,一个小点,见下图.
解决方法
以下链接到jsfiddle与脚本.所有的蓝色块都是可拖动的,所以你可以尝试块位置和连接行为.
对于这么大的答案我很抱歉;)
A: Connecting two endpoints with one connection:
jsPlumb.ready(function() {
// default settings for connectors
var connectionParams = {
connector: ["Flowchart",{cornerRadius:1}],paintStyle:{
lineWidth: 1,outlineColor:"blue",outlineWidth: 0
},detachable:false,endpointStyle: { radius:1 }
};
// w2 <=> w1
jsPlumb.connect({
source: "window2",target: "window1",anchors: ["TopCenter","Left"]
},connectionParams);
// w2 <=> w2
jsPlumb.connect({
source: "window2",target: "window3",anchors: ["BottomCenter",connectionParams);
//
jsPlumb.draggable(
jsPlumb.getSelector(".window"),{ containment:".demo"}
);
});
B: Connecting two endpoints with one connection:
jsPlumb规则：两个窗口之间的一个连接.因此,如果您需要在一些连接中分配一些连接,则需要创建一个代理点,这将作为一个寡妇的源,并为其他窗口创建2个新连接.
jsPlumb.ready(function() {
// default settings for connectors
var connectionParams = {
connector: ["Flowchart",outlineColor:"green",endpointStyle: { radius:1 }
};
// w1 <=> w1s
jsPlumb.connect({
source: "window1",target: "window1s",anchors: ["Right","Center"],anchor:[ "Perimeter",{ shape:"Circle" } ]
},connectionParams);
// w1s <=> w2
jsPlumb.connect({
source: "window1s",target: "window2",anchors: ["Center","Bottom"]
},connectionParams);
// w1s <=> w3
jsPlumb.connect({
source: "window1s","Top"]
},{ containment:".demo"}
);
});
C: Connecting three endpoints with one connection:
它将与“B”相同,但具有额外的隐藏代理块.
jsPlumb.ready(function() {
// default settings for connectors
var connectionParams = {
connector: ["Flowchart",endpointStyle: { radius:1 }
};
// w1 <=> w1s1
jsPlumb.connect({
source: "window1",target: "window1s1","Center"]
},connectionParams);
// w1s1 <=> w1s2
jsPlumb.connect({
source: "window1s1",target: "window1s2",connectionParams);
// w1s1 <=> w2
jsPlumb.connect({
source: "window1s1",connectionParams);
// w1s1 <=> w3
jsPlumb.connect({
source: "window1s1",connectionParams);
// w1s2 <=> w4
jsPlumb.connect({
source: "window1s2",target: "window4",{ containment:".demo"}
);
});
