Get jsPlumb Line Color After SetPaintStyle

问题

I had sucessfully created a line using jsPlumb. Below is the code:

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

 }

I edited the color and width of the line by the code below.

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

I want to save the selected width and color of the line to the database, so I use the code below:

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'];   
}

The console returns 1 and #00000, which is not right. It was outputting the previous values. How am I gonna fix it?

回答1:

I fix my own problem with the help of a post in stackoverflow. Instead of using setPaintStyle, I used getPaintStyle.

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

来源：https://stackoverflow.com/questions/38068890/get-jsplumb-line-color-after-setpaintstyle