Search code examples
javascriptjqueryjquery-uijquery-pluginsjsplumb

Set jsPlumb Line Pattern

I had made a line using 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,
});

I want to customize the line by tweaking its pattern. I noticed the line was just solid, like the image below:

enter image description here

I want to make it dashed or dotted line. Is it possible? If yes, how?

Solution

  • You need to customize paintStyle

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

    By the way there are three types of paintStyle's; for source endpoint, target endpoint and connection.

    You may like to check here; https://jsplumbtoolkit.com/community/doc/paint-styles.html

    Here is an example; http://jsfiddle.net/mokarakaya/gcabyo3h/4/