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

【问题标题】：JsPlumb How to change connection style from default to dashed?JsPlumb 如何将连接样式从默认更改为虚线？
【发布时间】：2017-01-01 13:25:09
【问题描述】：

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

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

当鼠标单击一次时，连接符将变为破折号。

【问题讨论】：

在paintstyle参数中尝试dashstyle:1
还是空白。 dashstyle: 1 参数将减少两条虚线段之间的空间。

标签： javascript css jsplumb

【解决方案1】：

试了两天的工作，有解决办法。要使用端点connectorStyle而不是连接样式，并且需要在设置dashstyle后调用元素重绘方法。完整代码在这里：

//元素变量为网关节点

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

【讨论】：