JsPlumb动态端点作为连接覆盖

Question

我正尝试在我的连接上创建动态端点作为覆盖并遇到问题。我想模拟一下这个人有在这里SO：

jsPlumb connecting custom overlays - endpoint not moved

但是，不管我怎么努力做时，我得到了这一点：

var overlay_div = $(connection.overlays[0].canvas); 

我无法连接得到认可。我试图把这个逻辑放在绑定连接中，但是当试图建立连接覆盖时，这并不起作用。任何协助这将是非常有益的。

Answer 1

http://jsfiddle.net/nitincool4urchat/c3b514wf/14/

首先，创建自定义元素叠加

其次，确保这些元素具有唯一的ID

三，绑定到connection事件来创建这些定制覆盖端点。

jsPlumb.ready(function() { 
     // setup some defaults for jsPlumb. 
     instance = jsPlumb.getInstance({ 
      Endpoint : ["Dot", {radius:2}], 
      HoverPaintStyle : {strokeStyle:"#1e8151", lineWidth:4 }, 
      ConnectionOverlays : [ 
       [ "Arrow", { 
        location:1, 
        id:"arrow", 
        length:14, 
        foldback:0.8 
       }] 
       ,["Custom", { 
        create: function(component) { 
         return connectionNode(); 
        }, 
        location:0.5 
       }] 
       //,[ "Label", { label:"Connect To", id:"label", cssClass:"aLabel" }] 
      ], 
      Container: "flowchart-demo" 
     }); 


     var relationEndpoint = { 
      endpoint: ["Dot", { radius: 2 }], 
      isSource: true, 
      connector: ["Flowchart", { stub: [40, 60], cornerRadius: 5, alwaysRespectStubs: true }], 
      connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 4, outlineColor: "transparent", outlineWidth: 4 }, 
      maxConnections: 5, 
      onMaxConnections: function (info, e) { 
       alert("Maximum connections (" + info.maxConnections + ") reached"); 
      }, 
      isTarget: true, 
      dropOptions: { 
       tolerance: "touch", 
       hoverClass: "dropHover", 
       activeClass: "dragActive" 
      }, 
      beforeDetach: function (conn) { 
       return confirm("Detach connection?"); 
      } 
     }; 

     function connectionNode() { 
      //var overlay_div = $(connection.ConnectionOverlays[0].canvas); 
      //jsPlumb.addEndpoint({ anchor: ["Perimeter", { shape: "Rectangle" }] }, relationEndpoint); 
      return $("<div>Custom</div>",{id:Date.now()}).css({border:'1px solid black',background:'green'}); 
     } 


     var windows = jsPlumb.getSelector(".flowchart-demo .window"); 

     instance.draggable(windows); 

     instance.bind("connection", function(info) { 
      console.dir(info.connection); 
      console.dir(info.connection.getOverlays()); 
      console.dir(info.connection.getOverlays()[1].canvas); 
      var overlay_div = $(info.connection.getOverlays()[1].canvas);   
      jsPlumb.addEndpoint(overlay_div,{ anchor: ["Perimeter", { shape: "Rectangle" }] }, relationEndpoint);   
     }); 


     // suspend drawing and initialise. 
     instance.doWhileSuspended(function() { 
      var isFilterSupported = instance.isDragFilterSupported(); 
      // make each ".ep" div a source and give it some parameters to work with. here we tell it 
      // to use a Continuous anchor and the StateMachine connectors, and also we give it the 
      // connector's paint style. note that in this demo the strokeStyle is dynamically generated, 
      // which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i 
      // would recommend you do. Note also here that we use the 'filter' option to tell jsPlumb 
      // which parts of the element should actually respond to a drag start. 
      // here we test the capabilities of the library, to see if we 
      // can provide a `filter` (our preference, support by vanilla 
      // jsPlumb and the jQuery version), or if that is not supported, 
      // a `parent` (YUI and MooTools). I want to make it perfectly 
      // clear that `filter` is better. Use filter when you can. 
      if (isFilterSupported) { 
       instance.makeSource(windows, { 
        filter:".ep", 
        anchor:"Continuous", 
        connector: ["Flowchart", { stub: [40, 60], cornerRadius: 5, alwaysRespectStubs: true }], 
        connectorStyle:{ strokeStyle:"#5c96bc", lineWidth:4, outlineColor:"transparent", outlineWidth:4 }, 
        maxConnections:5, 
        onMaxConnections:function(info, e) { 
         alert("Maximum connections (" + info.maxConnections + ") reached"); 
        } 
       }); 
      } 
      else { 
       var eps = jsPlumb.getSelector(".ep"); 
       for (var i = 0; i < eps.length; i++) { 
        var e = eps[i], p = e.parentNode; 
        instance.makeSource(e, { 
         parent:p, 
         anchor:"Continuous", 
         connector: ["Flowchart", { stub: [40, 60], cornerRadius: 5, alwaysRespectStubs: true }], 
         connectorStyle:{ strokeStyle:"#5c96bc",lineWidth:4, outlineColor:"transparent", outlineWidth:4 }, 
         maxConnections:5, 
         onMaxConnections:function(info, e) { 
          alert("Maximum connections (" + info.maxConnections + ") reached"); 
         } 
        }); 
       } 
      } 
     }); 

     // initialise all '.w' elements as connection targets. 
     instance.makeTarget(windows, { 
      dropOptions:{ hoverClass:"dragHover" }, 
      anchor:"Continuous", 
      allowLoopback:true, 
      anchor:"Continuous" 
     }); 

     jsPlumb.fire("jsPlumbDemoLoaded", instance); 

    });