Jsplumb - 连接器

Question

我试图画一个流程图。我动态创建div，并为每个div设置了唯一的“id”属性，并使用Jsplumb连接器连接它们。

我从数据库中获取源和目标ID（注意动态创建的'id'属性是数据库的ID）并存储在'connectors'json中。其格式是 例如：

{[从：A，于：B]，[自：A，到：C]，[自：B，到：C]}

angular.forEach(connectors, function (connect) { 
         $scope.connection(connect.from, connect.to); 
        }) 

的jsplumb代码如下

$scope.connection = function (s, t) { 
var stateMachineConnector1 = { 
        connector: ["Flowchart", { stub: 25, midpoint: 0.001 }], 
        maxConnections: -1, 
        paintStyle: { lineWidth: 3, stroke: "#421111" }, 
        endpoint: "Blank", 
        anchor: "Continuous", 
        anchors: [strt, end], 
        overlays: [["PlainArrow", { location: 1, width: 15, length: 12 }]] 
       }; 
var firstInstance = jsPlumb.getInstance(); 
firstInstance.connect({ source: s.toString(), target: t.toString() }, stateMachineConnector1); 
    } 

问题：

我现在已经是

此处连接器B到C与现有的A到C连接器重叠。

我需要的是两个连接分离像下面

我找不到这个随时随地的解决方案。任何帮助？谢谢！

Answer 1

我什么建议你做，准确复制您的架构，将设置对A，B和C

箱2个端点

一个终点应该是[0.25，1，0，0，0 ，0]和[0.75，1，0，0，0，0]

B和C的端点应[0.25，0，0，0，0，0]和[0.75，0，0，0， 0,0]

它基本上是这样的（我可能是错的4最后一个它已经有一段时间，但你只需要担心x和y）

[X，Y，邻ffsetx，OFFSETY，角度，角度]

为X 0是极左和1个极右

也是一样的Y（0是顶部和1是底部）。

保重

Answer 2

使用锚点周长计算端点的适当位置。 jsfiddle demo for perimeter

jsPlumb.connect({ 
     source:$('#item1'), 
     target:$("#item2"), 
     endpoint:"Dot", 
     connector: ["Flowchart", { stub: 25, midpoint: 0.001 }], 
     anchors:[ 
      [ "Perimeter", { shape:"Square" } ], 
      [ "Perimeter", { shape:"Square" } ] 
     ] 
    }); 

Jsplumb anchors