jquery - How to set different colors for source and target Endpoint with jsplumb -


i new jsplumb. need complete sample.

how set different colors source , target endpoint jsplumb?

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>     <script type="text/javascript" src="../js/jquery.jsplumb-1.3.16-all-min.js"></script>     <script type="text/javascript">           jsplumb.bind("ready", function () {              var source= jsplumb.addendpoint("source", {                 overlays: [["label", { label: "source", id: "labelsource"}]],                 paintstyle: { fillstyle: 'red' },         //endpointstyle: { fillstyle: '#808000' },                 endpoint: ["dot", { radius: 15}]             });             var secure = jsplumb.addendpoint("target", {                 overlays: [["label", { label: "target", id: "labeltarget"}]],                 paintstyle: { fillstyle: 'green' },                 endpoint: ["dot", { radius: 15}]             });  jsplumb.connect({                 source: 'source', target: 'target', paintstyle: { linewidth: 10, strokestyle: '#66ccff' },                 sourceendpointstyle: { fillstyle: '#808000' },                  targetendpointstyle: { fillstyle: '#800000' },  endpoint: ["dot", { radius: 15}], anchor: "bottomcenter",                 //connector: [ "bezier", 0 ],                 connector: "straight",                 detachable: false,                 overlays: [         ["label", {             fillstyle: "rgba(100,100,100,80)",             color: "white",             font: "12px sans-serif",             //label:"static label",             borderstyle: "black",             borderwidth: 2         }],         ["arrow", { location: 0.5}]     ]              })  });       </script> </head> <body>     <div id="source" style="position: absolute; left: 100px; top: 250px;">     </div>     <div id="target" style="position: absolute; left: 600px; top: 250px;">     </div> </body> </html> 

the above code not apply proper colors source , target node.

you can use following method set connection color when create connection

jsplumb.bind("jsplumbconnection", function (conn) {    var source = conn.source;    var target = conn.target;     conn.connection.setpaintstyle({              strokestyle: getconnectioncolor(source, target),               linewidth: 3    });                 }); 

implement getconnectioncolor(source, target) method color according source , target


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -