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

【问题标题】：How to set different colors for source and target Endpoint with jsplumb如何使用 jsplumb 为源端点和目标端点设置不同的颜色
【发布时间】：2013-04-25 10:41:17
【问题描述】：

我是 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>

上面的代码没有对源节点和目标节点应用正确的颜色。

【问题讨论】：

标签： jquery html jsplumb

【解决方案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)方法根据源和目标获取颜色

【讨论】：