如何在 JsPlumb 中建立与边缘的连接？答案

【问题标题】：How to build Connections with Edges in JsPlumb?如何在 JsPlumb 中建立与边缘的连接？
【发布时间】：2013-10-22 23:41:55
【问题描述】：

如何设置JsPlumb 连接，该连接在中间分裂并连接到多个端点，如下图所示？

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

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

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

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

【问题讨论】：

我看不到图片。只有我吗？
你能告诉我@confile 你使用这个的目的是什么吗？
这个是什么意思？

标签： javascript jquery html css jsplumb

【解决方案1】：

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

我很抱歉回答这么多；）

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

http://jsfiddle.net/TkyJB/2/

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：用一个连接连接两个端点：

jsPlumb 规则：2 个窗口之间的一个连接。所以如果你最后需要分割一些连接，你需要创建代理点，它将作为一个寡妇的源，并为其他窗口创建2个新的连接。

http://jsfiddle.net/TkyJB/8/

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：用一个连接连接三个端点：

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

http://jsfiddle.net/TkyJB/7/

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

});

【讨论】：

这看起来很棒。谢谢你。有没有办法保证在移动盒子时连接线永远不会碰到蓝色盒子？有什么算法吗？
尝试使用“锚”参数。 “动态锚点”也许可以帮助解决这个问题。
你能为此做一个 jsfiddle 吗？
@confile 检查这个：jsfiddle.net/TkyJB/9，但它也需要修复块位置。
@itspoma 我实施了您的解决方案，并在最终端点获得了一个小点。请参阅我上面的编辑。你知道我该如何解决这个问题吗？