设置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。

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

下面是一个例子：http://jsfiddle.net/mokarakaya/gcabyo3h/4/