如何使用jsplumb为源和目标端点设置不同的颜色

我是jsplumb的新手。我需要你的帮助来完成这个例子。如何使用jsplumb为源和目标端点设置不同的颜色

如何使用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>

上面的代码并未将适当的颜色应用于源节点和目标节点。

来源

2013-04-25 Muthuraman

您可以使用下面的方法来设置连接的颜色，当创建连接

jsPlumb.bind("jsPlumbConnection", function (conn) { 
    var source = conn.source; 
    var target = conn.target; 

    conn.connection.setPaintStyle({ 
      strokeStyle: getConnectionColor(source, target), 
      lineWidth: 3 
    });     
});

实现getConnectionColor（源，目标）方法根据源得到的颜色和目标

来源

2013-05-27 07:14:31 pasanbuddhika

如何使用jsplumb为源和目标端点设置不同的颜色

回答

相关问题