JsPlumb：连接线问题

Question

我想用角度画出下面这条线。

实际

预期

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

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

    // https://stackoverflow.com/a/4502207
    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

例如，没有一个锚声明包含锚方向的值

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