0

私は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>

上記のコードは、ソース ノードとターゲット ノードに適切な色を適用しません。

4

1 に答える 1

1

次の方法を使用して、接続を作成するときに接続の色を設定できます

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

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

ソースとターゲットに応じて色を取得する getConnectionColor(source, target) メソッドを実装する

于 2013-05-27T07:14:31.723 に答える