设置 jsPlumb 线型

Question

我用 jsPlumb 做了一条线。

var jsPlumb_instance = jsPlumb.getInstance();   
var endpointOptions = { 
                anchor:'BottomCenter',
                maxConnections:1,                      
                endpoint:['Rectangle',{width:'0px', height:'0px' }], 
                paintStyle:{fillStyle:'black'},
                connectorStyle : {  lineWidth: '1px' , strokeStyle: 'black' },
                connector : ['Straight'],                   
                setDragAllowedWhenFull:true,                    


};  
div1Endpoint = jsPlumb_instance.addEndpoint(id1, endpointOptions);
div2Endpoint = jsPlumb_instance.addEndpoint(id2, endpointOptions);      

jsPlumb_instance.connect({  
    source:div1Endpoint,
    target:div2Endpoint,
}); 

我想通过调整线条的图案来自定义线条。我注意到这条线很结实，如下图所示：

我想使它成为虚线或虚线。可能吗？如果是，怎么做？

Answer 1

您需要自定义paintStyle

jsPlumb_instance.connect({  
    source:div1Endpoint,
    target:div2Endpoint,
    paintStyle:{ strokeStyle:"blue", lineWidth:10,dashstyle = '3 3' }
}); 

顺便说一下，paintStyle 有 3 种类型；用于源端点、目标端点和连接。

您可以在这里查看； https://jsplumbtoolkit.com/community/doc/paint-styles.html

这是一个例子； http://jsfiddle.net/mokarakaya/gcabyo3h/4/