2016-06-28 452 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';