Question

我正在使用instance.bind（＆＃34; connection＆＃34;，function（connInfo）{}）来使用jsplumb创建连接。在连接期间，我想编辑连接器类型并为连接添加标签。我可以添加标签或编辑连接器类型，但不能同时编辑。任何人都可以帮我解决这个问题吗？

js block：

instance.bind("connection", function (connInfo) {
// listens for connection anywhere on topology
    var sourceId = connInfo.sourceId;
    var targetId = connInfo.targetId;

    if (sourceId == targetId) {
    // to edit connector type
    connInfo.connection.setConnector([ "Flowchart", { stub:20, gap: 10, cornerRadius: 10} ]);     
    // To add label.          
    connInfo.connection.getOverlay("sourceLabel").setLabel("bar");
    console.log(connInfo);

    }

Answer 1

您可以在添加端点时设置连接器样式和标签，如下所示：

            jsPlumb.addEndpoint($(".yourselector"), {
                anchor: "Right",
                isSource:true,
                isTarget:false,
                connector:"Bezier",
                endpoint: "Dot",
                paintStyle:{ fillStyle:"white", outlineColor:"blue", 
                            outlineWidth:1, radius:8 },
                hoverPaintStyle:{ fillStyle:"lightblue" },
                connectorStyle:{ strokeStyle:"grey", lineWidth:3 },
                connectorHoverStyle:{ lineWidth:3 },
                overlays:[ [ "Label", {label:"FOO", id:"label"}] ] 
            });

当您从源端点手动拖动连接器时，它的格式将如下所示。您可以为不同的端点设置不同的样式。

在jsplumb中定义连接器类型时添加标签的问题

1 个答案: