Question

我需要帮助来理解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>

Answer 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>

Bare bone js：

jsPlumb.addEndpoint("0",{uuid:"ep1"});
jsPlumb.addEndpoint("1",{uuid:"ep2"});
jsPlumb.connect({ uuids:["ep1","ep2"] });

jsplumb.connect不适用于动态创建的端点

1 个答案: