JsPlumb 如何将连接样式从默认更改为虚线？

Question

一般可以在jsPlumb的ready方法中初始化默认的paint样式。连接线样式为实线，但在某些情况下，用户希望将其更改为虚线样式。首先创建实线并渲染到页面上，然后在事件触发时将样式更改为虚线样式。

var connectorType = ["Flowchart", { stub: [2, 2], gap: 1, cornerRadius: 5, alwaysRespectStubs: true }]
    ,
    connectorPaintStyle = {
        strokeWidth: 2,
        stroke: "#61B7CF",
        joinstyle: "round",
        outlineStroke: "white",
        outlineWidth: 2,
        //dashstyle: "2 4"
    },
    connectorHoverStyle = {
        strokeWidth: 3,
        stroke: "#216477",
        outlineWidth: 5,
        outlineStroke: "white"
    },
    endpointHoverStyle = {
        fill: "#216477",
        stroke: "#216477"
    },
    sourceEndpoint = {
        endpoint: "Dot",
        paintStyle: {
            stroke: "#7AB02C",
            fill: "transparent",
            radius: 4,
            strokeWidth: 1
        },
        isSource: true,
        connector: connectorType,
        connectorStyle: connectorPaintStyle,
        hoverPaintStyle: endpointHoverStyle,
        connectorHoverStyle: connectorHoverStyle,
        maxConnections: 100,                        //the limition of max connections
        dragOptions: {},
        overlays: [
            ["Label", {
                location: [0.5, 1.5],
                label: "Drag",
                cssClass: "endpointSourceLabel",
                visible: false
               }
            ]
        ]
    },
    targetEndpoint = {
        endpoint: "Dot",
        paintStyle: { fill: "#7AB02C", radius: 4 },
        hoverPaintStyle: endpointHoverStyle,
        maxConnections: -1,
        dragOptions: { hoverClass: "hover", activeClass: "active" },
        isTarget: true,
        overlays: [["Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible: false }]]
    };

我尝试过使用连接 setPaintStyle() 和端点 setPaintStyle，但这不是我想要的方式。调用该方法后，该行为空白，除非点击一次，然后变为虚线样式。

    var dashedType = {
        connector: "StateMachine",
        paintStyle: { stroke: "red", strokeWidth: 4 },
        hoverPaintStyle: { stroke: "blue" },
        dashstyle: "2 4"
    };

调用了连接setPaintStyle方法，连接器将为空白。

connection.setPaintStyle(dashedType);

当鼠标点击一次时，连接符会变成破折号。

Answer 1

试了两天，有解决办法。要使用端点connectorStyle而不是连接样式，需要在设置dashstyle后调用element repaint方法。完整代码在这里：

//元素变量为网关节点

        instance.selectEndpoints({ source: element }).each(function (endpoint) {
            endpoint.connectorStyle.dashstyle = "2 4";
            instance.repaint(element);
        });

JsPlumb 如何将连接样式从默认更改为虚线？

JsPlumb How to change connection style from default to dashed?

javascript

css

jsplumb