Javascript 如何在JsPlumb中建立与边的连接？ 我如何设置一个在中间分裂并连接到不止一个像在下面的图像中的终结符的连接？

A:使用一个连接连接两个端点：

B:使用一个连接连接两个端点：

C:使用一个连接连接三个端点：

编辑：使用流程图选项，我得到一个奇怪的错误，其中有一个小点，请参见下图

---

下面是带脚本的JSFIDLE链接。所有蓝色块都是可拖动的，因此您可以尝试块位置和连接行为

我很抱歉回答了这么多；）

A:使用一个连接连接两个端点：

jsplump.ready（函数（）{
//连接器的默认设置
变量connectionParams={
连接器：[“流程图”{cornerRadius:1}]，
画风：{
线宽：1，
大纲颜色：“蓝色”，
大纲宽度：0
},
可分离：假，
端点样式：{radius:1}
};
//w2 w1
jsPlumb.connect({
资料来源：“window2”，
目标：“窗口1”，
锚定：[“上止点”、“左止点”]
}，连接参数）；
//w2 w2
jsPlumb.connect({
资料来源：“window2”，
目标：“窗口3”，
锚定：[“底部中心”，“左侧”]
}，连接参数）；
//
jsPlumb.draggable(
jsPlumb.getSelector（“.window”），
{包含：“.demo”}
);
});

B:使用一个连接连接两个端点：

jsPlumb规则：两个窗口之间的一个连接。所以，若你们最后需要划分一些连接，你们需要创建代理点，它将作为一个窗口的源，并将为其他窗口创建两个新连接

jsplump.ready（函数（）{
//连接器的默认设置
变量connectionParams={
连接器：[“流程图”{cornerRadius:1}]，
画风：{
线宽：1，
大纲颜色：“绿色”，
大纲宽度：0
},
可分离：假，
端点样式：{radius:1}
};
//w1 w1s
jsPlumb.connect({
资料来源：“window1”，
目标：“window1s”，
锚定：[“右”、“中”]，
锚定：[“周长”{形状：“圆”}]
}，连接参数）；
//w1s w2
jsPlumb.connect({
资料来源：“window1s”，
目标：“窗口2”，
锚定：[“中心”、“底部”]
}，连接参数）；
//w1s w3
jsPlumb.connect({
资料来源：“window1s”，
目标：“窗口3”，
锚定：[“中心”、“顶部”]
}，连接参数）；
//
jsPlumb.draggable(
jsPlumb.getSelector（“.window”），
{包含：“.demo”}
);
});

C:使用一个连接连接三个端点：

它将与“B”中的相同，但具有额外的隐藏代理块

jsplump.ready（函数（）{
//连接器的默认设置
变量connectionParams={
连接器：[“流程图”{cornerRadius:1}]，
画风：{
线宽：1，
大纲颜色：“蓝色”，
大纲宽度：0
},
可分离：假，
端点样式：{radius:1}
};
//w1 w1s1
jsPlumb.connect({
资料来源：“window1”，
目标：“window1s1”，
锚定：[“右”、“中”]
}，连接参数）；
//w1s1 w1s2
jsPlumb.connect({
资料来源：“window1s1”，
目标：“window1s2”，
锚定：[“中心”，“中心”]
}，连接参数）；
//w1s1 w2
jsPlumb.connect({
资料来源：“window1s1”，
目标：“窗口2”，
锚定：[“上止点”、“左止点”]
}，连接参数）；
//w1s1 w3
jsPlumb.connect({
资料来源：“window1s1”，
目标：“窗口3”，
锚定：[“底部中心”，“左侧”]
}，连接参数）；
//w1s2 w4
jsPlumb.connect({
资料来源：“window1s2”，
目标：“窗口4”，
锚定：[“右”、“左”]
}，连接参数）；
//
jsPlumb.draggable(
jsPlumb.getSelector（“.window”），
{包含：“.demo”}
);
});

我看不到图像。是我一个人吗？你能告诉我@confile你用这个的目的是什么吗？你说这个是什么意思？这个看起来很棒。非常感谢。有没有办法保证在移动接线盒时，接线不会接触到蓝色接线盒？有什么算法吗？试着使用“锚”参数。“动态锚定”可能会有帮助。你能为此制作一个JSFIDLE吗？@confile检查此：，但它还需要修复块位置。@itspoma我实现了你的解决方案，并在最终端点处得到一个小点。见我的编辑上面。你知道我该怎么解决吗？

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

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

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

});