소스 및 대상에 대해 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을 사용하여 다른 색상을 설정하는 방법

답변

관련 문제