1

我需要帮助来理解 jsplumb.connect 概念。我正在尝试从 xml 文件创建端点并尝试连接端点。但我能够生成端点但不能生成连接。

XML 文件

<?xml version="1.0" encoding="utf-8" ?>
<apps>
<source nodeStyle="Dot" nodeRadius="15">#66CCFF</source>
<target nodeStyle="Dot" nodeRadius="15">#66CCFF</target>
</apps>

.html 文件

<!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">


$(document).ready(function()
      {


var i=0;
var nodeName, nodeVal,nodeStyle,nodeRadius;

  $.get('data1.xml', function(d){      
        $(d).find('apps').each(function(){  
jsPlumb.Defaults.EndpointStyles = [{ fillStyle:"none" }, { fillStyle:"none" }]; 
while($(this).children()[i].nodeName!=null)
{

nodeName = $(this).children()[i].nodeName;
nodeVal = $(this).find($(this).children()[i].nodeName).text();
nodeStyle = $(this).find($(this).children()[i].nodeName).attr('nodeStyle');
nodeRadius = $(this).find($(this).children()[i].nodeName).attr('nodeRadius');

            var nodeName = jsPlumb.addEndpoint( nodeName, {
                overlays: [["Label", { label: nodeName, id: "label"+nodeName}]],               
        paintStyle: { fillStyle: nodeVal},
                endpoint: [nodeStyle , { radius: nodeRadius }]
           });
i++;
}

jsPlumb.bind("ready", function () {

             jsPlumb.connect({
                source: source, target: target, paintStyle: { lineWidth: 10, strokeStyle: '#66CCFF' },                
endpoint: ["Dot", { radius: 15}], anchor: "BottomCenter",
                connector: "Straight",
                detachable: false,
                overlays: [
        ["Label", {
            fillStyle: "rgba(100,100,100,80)",
            color: "white",
            font: "12px sans-serif",            
            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

这可以通过首先设置每个端点的 uuid 参数以编程方式完成，如下所示：

jsPlumb.addEndpoint("0",{uuid:"ep0_0", isSource:true, isTarget:true});
jsPlumb.addEndpoint("1",{uuid:"ep1_0", isSource:true, isTarget:true});

然后将它们连接起来

jsPlumb.connect({ uuids:["ep0_0","ep1_0"] });

//With more options looks like...
//jsPlumb.connect({ uuids:["ep0_0", "ep1_0"], endpoint: endpoint, anchors: flat_to_flat_anchors, overlays:overlays });

的HTML：

<div id="0" class="window"></div>
<div id="1" class="window"></div>

裸骨js：

jsPlumb.addEndpoint("0",{uuid:"ep1"});
jsPlumb.addEndpoint("1",{uuid:"ep2"});
jsPlumb.connect({ uuids:["ep1","ep2"] });
于 2014-03-31T21:04:13.527 回答