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