JSplumb-连接器

Question

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

我从数据库中获取源和目标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的框上设置两个endpoint

aendpoint应为[0.25, 1, 0, 0, 0, 0]和[0.75, 1, 0, 0, 0, 0]

B和Cendpoint应为[0.25, 0, 0, 0, 0, 0]和[0.75, 0, 0, 0, 0, 0]

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

[x，y，偏移量x，偏移量，角度，角度]

对于x，0是最左边，1是最右边

y也是如此（0是顶部，1是底部）。

当心

Answer 2

使用“锚定周长”计算endpoint的适当位置。周界的JSFIDLE演示

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

垂直锚