Jsplumb - 连接器

Question

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

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

  

{[from：A，to：B]，[from：A，to：C]，[from：B，to：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，offsetx，offsety，angle，angle]

因为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