设置jsPlumb线条样式

问题描述：

我已经使用jsPlumb做了一条线。设置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, 
});

我想通过调整其模式来自定义该行。我注意到行只是固体，像下面的图片：

我想使它虚线或虚线。可能吗？如果是，如何？

答

您需要定制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/

谢谢，但'3 3'代表你的冲刺值？我无法在文档链接中找到它。 – Qerjiuthn

我试过你的代码，但它不工作。 – Qerjiuthn

@Eliyyahu我创造了一个例子。我希望它有帮助; http://jsfiddle.net/mokarakaya/gcabyo3h/4/ – mokarakaya

设置jsPlumb线条样式

相关推荐