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

通常，可以在jsPlumb的ready方法中初始化默认的绘制样式。连接器线条样式很稳固，但在某些情况下，用户希望将其更改为虚线样式。首先，在页面上创建并渲染实体，然后在触发事件时将样式更改为虚线样式。JsPlumb如何将连接样式从默认值更改为虚线？

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

当鼠标点击一次，该连接器将改变冲。

来源

2017-01-01 Bes Ley

尝试'dashstyle：1'在'paintstyle'参数 –

它仍然是空白。 dashstyle：1参数将减少两个虚线段之间的空间。 –

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

//元素varibale是网关节点

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

来源

2017-01-02 09:18:00

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

回答

相关问题