JsPlumb：连接线问题

Question

我想用角度画下面的线。

实际

预期

我试图找到有关此问题的文档，但没有成功。我附上了到目前为止我所设置的片段。如果有人对此问题有好的文档或解决方案，我很感兴趣。

https://codepen.io/adrian-jamet/pen/YzrEErM

 instance = jsPlumb.getInstance({});
instance.setContainer("diagram");

instance.bind("ready", function() {
    instance.registerConnectionTypes({
        "white-connection": {
            paintStyle: {
                stroke: "white",
                strokeWidth: 5,
                joinstyle: "round"
            },
            hoverPaintStyle: {
                stroke: "white",
                strokeWidth: 10
            },
            connector:"Flowchart"
        }
           
    });
    instance.draggable("table_photo", {
        "containment": true
    });
    instance.draggable("table_client", {
        "containment": true
    });
    instance.draggable("table_mobilhome", {
        "containment": true
    })
    instance.draggable("table_typemobil", {
        "containment": true
    })
    instance.draggable("table_reservation", {
        "containment": true
    })
    instance.draggable("table_ville", {
        "containment": true
    })


    // instance.addEndpoint("table_photo", {
    //     endpoint: "Dot", // rectangle, blank, image
    //     anchor: ["LeftMiddle"],
    //     isSource: true,
    //     connectionType: "white-connection"
    // });
    // instance.addEndpoint("table_typemobil", {
    //     endpoint: "Dot", // rectangle, blank, image
    //     anchor: ["RightMiddle"],
    //     isSource: true,
    //     connectionType: "white-connection"
    // });

    // 
    var e0 = instance.addEndpoint("table_typemobil", {
            uuid: "typemobil1",
            anchor: [
                [1, 0.23, 0, 0]
            ],
           
            connectionType: "white-connection"
        }),
        e01 = instance.addEndpoint("table_typemobil", {
            uuid: "typemobil2",
            anchor: [
                [0, 0.23, 0, 0]
            ],
           
           
            connectionType: "white-connection"
        }),
        e1 = instance.addEndpoint("table_photo", {
            uuid: "photo1",
            anchor: [0, 0.9, 0, 1],
            
           
            
        }),
        e2 = instance.addEndpoint("table_mobilhome", {
            uuid: "mobilhome1",
            anchor: [
                [1, 0.32, 0, 0]
            ],

            connectionType: "white-connection"
        }),
        e21 = instance.addEndpoint("table_mobilhome", {
            uuid: "mobilhome2",
            
            anchor: [
                [0, 0.92,0,0]
            ],
            connectionType: "white-connection"

        }),
        e3 = instance.addEndpoint("table_reservation", {
            uuid: "reservation1",
            anchor: [
                [0, 0.82, 0, 0]
            ],
            
        }),
        e31 = instance.addEndpoint("table_reservation", {
            uuid: "reservation2",
            anchor: [
                [1, 0.95, 0, 0]
            ],
           
        }),
        e4 = instance.addEndpoint("table_client", {
            uuid: "client1",
            anchor: [
                [1, 0.18, 0, 0]
            ],
           
            connectionType: "white-connection"

        });

    instance.connect({
        uuids: ["typemobil1", "photo1"],
        detachable: false,
       
    })
    instance.connect({
        uuids: ["mobilhome1", "reservation1"],
        detachable: false
    })
    instance.connect({
        uuids: ["client1", "reservation2"],
        detachable: false
    })
    instance.connect({
        uuids: ["typemobil2", "mobilhome2"],
        anchors: ["Right", "Left"],
       
    })

});

Answer 1

None 的锚点声明包含锚点方向的值，例如

anchor: [
  [1, 0.23, 0, 0]
],

这个位于顶部边缘附近的右侧，可能应该开始水平向右移动，所以：

anchor: [
  [1, 0.23, 1, 0]
],

而左边的这个应该开始向左水平移动：

anchor: [
  [0, 0.23, 0, 0]
],

所以：

anchor: [
  [0, 0.23, -1, 0]
],

需要对其他锚点进行类似的考虑。索引 3 处的值用于 y 轴。

讨论锚点here

JsPlumb：连接线问题

JsPlumb : Issue with connnector lines

javascript

html

css

jsplumb