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

设置 jsPlumb 线型

Set jsPlumb Line Pattern

javascript

jquery

jquery-ui

jquery-plugins

jsplumb