JsPlumb以编程方式创建连接隐藏端点

我正在尝试使用jsPlumb 1.3.16来执行以下操作。 1.将端点添加到两个div 2.以编程方式创建连接（请参见下文）。JsPlumb以编程方式创建连接隐藏端点

我遇到的问题是，连接似乎创建了它自己的端点，它们现在隐藏了原始端点。因此，我无法从这些端点创建更多的连接。这似乎是一个Z指数的问题。

任何人都可以帮忙吗？

var connectorOptions = {  
    uniqueEndpoint:false,  
    maxConnections:-1, 
    newConnection:true,  
    endpoint: ["Rectangle", { 
     width: 15, 
     height: 15 
    }], 
    endpointStyle: { 
     fillStyle: "rgba(255,255,255,50)", 
     outlineColor: "#ccc", 
     outlineWidth: 1 
    }, 
    setDragAllowedWhenFull: true, 
    connector: ["Straight"], 
    paintStyle: { 
     strokeStyle: "#ec51bb", 
     lineWidth: 4 
    }, 
    connectorStyle: { 
     lineWidth: 4, 
     fillStyle: "#ec51bb" 
    }, 
    overlays: [ 
     ["Arrow", { 
      width: 14, 
      length: 14, 
      foldback: 1, 
      location: 1, 
      id: "arrow" 
     }] 
    ] 
}; 



var endpointOptions = { 
    maxConnections:-1, 
    uniqueEndpoint:false, 
    isSource:true, 
    isTarget:true, 
    endpoint:["Rectangle", { 
     width:15, 
     height:15, 
     cssClass: "endPointStyle", 
     hoverClass: "endPointHoverStyle" 
    }], 
    setDragAllowedWhenFull:true, 
    paintStyle:{ 
     strokeStyle: "#9f9f9f" 
    }, 
    connectorStyle : { 
     lineWidth: 4, 
     strokeStyle:"#ec51bb" 
    }, 
    connector:[ "Straight"], 
    connectorOverlays:[ 
     [ "Arrow", { 
      width:14, 
      length:10, 
      foldback: 1, 
      location:1, 
      id:"arrow" 
     } ], 
     [ "Label", { 
      label:"", 
      id:"label" 
     } ] 
    ] 
}; 


jsPlumb.addEndpoint(itemId1,{ anchor:[ 0.5, -0.05, 0, 1, 0, -4 ] }, endpointOptions); 
jsPlumb.addEndpoint(itemId2,{ anchor:[ 0.5, -0.05, 0, 1, 0, -4 ] }, endpointOptions); 

var anchors= [[ 0.5, -0.05, 0, 1, 0, -4 ], [ 0.5, -0.05, 0, 1, 0, -4 ]]; 

var newConnection = jsPlumb.connect({ 
    source: itemId1, 
    target: itemId2, 
    anchor: anchors 
    }, 
    connectorOptions 
);

来源

2014-01-11 dutchman711

什么是你的创造元素之间的连接的声明？您可以在创建端点时尝试选项**锚点**，并使其连续，以便端点不重叠。 '主播： “连续”' – MrNobody

试试这个。现在每个元素上有2个端点，您可以使用它们连接到另一个元素，而无需创建新的端点。您只需将maxConections属性添加到端点声明。

var windows = jsPlumb.getSelector(".chart-demo .window"); 
      for (var i = 0; i < windows.length; i++) { 
       instance.addEndpoint(windows[i], { 
        uuid:windows[i].getAttribute("id") + "-bottom", 
        anchor:"Bottom", 
        maxConnections:-1 
       }); 
       instance.addEndpoint(windows[i], { 
        uuid:windows[i].getAttribute("id") + "-top", 
        anchor:"Top", 
        maxConnections:-1 
       }); 
      } 

      instance.connect({uuids:["chartWindow3-bottom", "chartWindow6-top" ], overlays:overlays}); 
      instance.connect({uuids:["chartWindow1-bottom", "chartWindow2-top" ], overlays:overlays}); 
      instance.connect({uuids:["chartWindow1-bottom", "chartWindow3-top" ], overlays:overlays}); 
      instance.connect({uuids:["chartWindow2-bottom", "chartWindow4-top" ], overlays:overlays}); 
      instance.connect({uuids:["chartWindow2-bottom", "chartWindow5-top" ], overlays:overlays});

来源

2014-01-14 12:38:16 MaxD

-2

div编号==>打开，PHONE1每个人都有一个翻转EP

<div class="w" id="opened">BEGIN<div class="ep"></div></div> 
<div class="w" id="phone1">PHONE INTERVIEW 1<div class="ep"></div></div>

如：http://jsplumbtoolkit.com/demo/dynamicAnchors/jquery.html 如何使instance.connect({ source:tmp_source, target:tmp_target });运行在一个块。

如：

for(){ 
var tmp_source="opened"; 
var tmp_target="phone1"; 
instance.connect({ source:tmp_source, target:tmp_target });// this line not run 

}

来源

2014-02-18 15:08:10 zhen

JsPlumb以编程方式创建连接隐藏端点

回答

相关问题