如何设置 JsPlumb连接在中间 split 并到达多个端点,如下图所示?
A:用一个连接连接两个端点:
B:用一个连接连接两个端点:
C:用一个连接连接三个端点:
编辑:使用 FlowChart 选项我得到一个奇怪的错误,它是一个小点,请参见下图。
最佳答案
下面链接到带有脚本的 jsfiddle。所有蓝色 block 都是可拖动的,因此您可以试验 block 位置和连接行为。
很抱歉回答这么大 ;)
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", "Left"]
}, connectionParams);
//
jsPlumb.draggable(
jsPlumb.getSelector(".window"),
{ containment:".demo"}
);
});
B: Connecting two endpoints with one connection:
jsPlumb 规则:2 个窗口之间的一个连接。所以如果你需要在最后划分一些连接,你需要创建代理点,它将作为一个窗口的来源,并为其他窗口创建 2 个新连接。
jsPlumb.ready(function() {
// default settings for connectors
var connectionParams = {
connector: ["Flowchart", {cornerRadius:1}],
paintStyle:{
lineWidth: 1,
outlineColor:"green",
outlineWidth: 0
},
detachable:false,
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",
target: "window3",
anchors: ["Center", "Top"]
}, connectionParams);
//
jsPlumb.draggable(
jsPlumb.getSelector(".window"),
{ containment:".demo"}
);
});
C: Connecting three endpoints with one connection:
它将与“B”中的相同,但有额外的隐藏代理 block 。
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 }
};
// w1 <=> w1s1
jsPlumb.connect({
source: "window1",
target: "window1s1",
anchors: ["Right", "Center"]
}, connectionParams);
// w1s1 <=> w1s2
jsPlumb.connect({
source: "window1s1",
target: "window1s2",
anchors: ["Center", "Center"]
}, connectionParams);
// w1s1 <=> w2
jsPlumb.connect({
source: "window1s1",
target: "window2",
anchors: ["TopCenter", "Left"]
}, connectionParams);
// w1s1 <=> w3
jsPlumb.connect({
source: "window1s1",
target: "window3",
anchors: ["BottomCenter", "Left"]
}, connectionParams);
// w1s2 <=> w4
jsPlumb.connect({
source: "window1s2",
target: "window4",
anchors: ["Right", "Left"]
}, connectionParams);
//
jsPlumb.draggable(
jsPlumb.getSelector(".window"),
{ containment:".demo"}
);
});
关于javascript - 如何在 JsPlumb 中建立与边缘的连接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19530254/