2016-06-22 6 views
0

Я сделал линию, используя jsPlumb.Set jsPlumb Line Pattern

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, 
}); 

Я хочу настроить линию, настроив ее узор. Я заметил, что линия была просто твердой, как на картинку ниже:

enter image description here

Я хочу сделать это пунктирным или пунктирную линию. Является ли это возможным? Если да, то как?

ответ

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/

+0

Спасибо, но что означает '3 3' в вашем значении в стиле dashstyle? Я не смог найти его в ссылке на документацию. – Qerjiuthn

+0

Я пробовал ваш код выше, но он не работает. – Qerjiuthn

+0

@Eliyyahu Я создал пример. Я надеюсь, что это помогает; http://jsfiddle.net/mokarakaya/gcabyo3h/4/ – mokarakaya