如何在JsPlumb中建立边缘连接？

Question

如何在JsPlumb中建立边缘连接？

javascriptjqueryhtmlcssjsplumb

10

如何设置一个 JsPlumb 连接，在中间分裂并连接到多个终端，就像以下的图片一样?

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

enter image description here

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

enter image description here

连接三个端点的一条连接：

enter image description here

编辑：使用流程图选项时，我遇到了一个奇怪的错误，出现了一个小点，如下图所示。

enter image description here

- confile

我看不到图片，是只有我吗？ - anar khalilov

你能告诉我你正在使用这个 @confile 的目的是什么吗？ - Just code

你指的是什么？ - Michael

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- itspoma · Accepted Answer

以下是带有脚本的 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个新连接。

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

enter image description here

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/

enter image description here

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

});