Jsplumb - 连接器答案

【问题标题】：Jsplumb - ConnectorsJsplumb - 连接器
【发布时间】：2017-05-30 07:00:42
【问题描述】：

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

我从数据库中获取源和目标 id（请注意，动态创建的 div 的 '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 连接器重叠。

我需要的是像下面这样分开两个连接

我在任何地方都找不到解决方案。有什么帮助吗？谢谢！

【问题讨论】：

标签： jsplumb

【解决方案1】：

使用锚点周长计算端点的适当位置。 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

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
@MCEmperor 是的，我已经更新了更准确的解决方案。（也许）
这样好多了！

【解决方案2】：

我建议您做的，要准确复制您的架构，将在 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]

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

[x,y,offsetx, offsety, angle, angle]

因为 x 0 是最左边和 1 最右边

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

保重

【讨论】：