2016-06-28 43 views
0

我成功地創建了一個使用jsPlumb的行。下面是代碼:獲取jsPlumb線色後SetPaintStyle

myid_create_line_instance(0, '1px', '#00000'); 

//A function that creates line instance. 
function myid_create_line_instance(id, width, color){ 
    jsPlumb_instance[id] = jsPlumb.getInstance();  
    var id1 = 'myid_templates_editor_line_' + id + '_pair_1'; 
    var id2 = 'myid_templates_editor_line_' + id + '_pair_2';  

    var endpointOptions = { 
     anchor:'BottomCenter', 
     maxConnections:1,      
     endpoint:['Rectangle',{width:'1px', height:'1px' }],      
     connectorStyle:{lineWidth:width,strokeStyle:color}, 
     connector:['Straight'],      
    }; 

    div1Endpoint = jsPlumb_instance[id].addEndpoint(id1, endpointOptions); 
    div2Endpoint = jsPlumb_instance[id].addEndpoint(id2, endpointOptions);  

    jsPlumb_instance[id].connect({  
     source:div1Endpoint, 
     target:div2Endpoint, 
    });   

    jsPlumb_instance[id].draggable(id1); 
    jsPlumb_instance[id].draggable(id2); 

} 

enter image description here

我通過下面的代碼編輯的行的顏色和寬度。

//The width and color values are from the users input. 
width = '5px'; 
color = '#ff8080'; 
jsPlumb_instance[0].select().setPaintStyle({lineWidth: width, strokeStyle:color}); 

enter image description here

我想保存線到數據庫的選擇的寬度和顏色,所以我用下面的代碼:

console.log(myid_get_line_color(0)); 
console.log(myid_get_line_width(id)); 

//A function that gets the line color base on it's id. 
function myid_get_line_color(id){ 
    var connections = jsPlumb_instance[id].getConnections(); 
    return connections[0]['endpoints'][0]['connectorStyle']['strokeStyle']; 
} 

//A function that gets the line width base on it's id. 
function myid_get_line_width(id){ 
    var connections = jsPlumb_instance[id].getConnections(); 
    return connections[0]['endpoints'][0]['connectorStyle']['lineWidth']; 
} 

控制檯返回1#00000,這是不正確的。它正在輸出以前的值。我該如何解決它?

回答

0

我使用計算器中的post幫助修復了我自己的問題。我使用getPaintStyle而不是使用setPaintStyle

jsPlumb_instance[id].select().getPaintStyle()[0][0].strokeStyle = color; 
jsPlumb_instance[id].select().getPaintStyle()[0][0].lineWidth = width + 'px';