jsPlumb：如何使流程图连接器避免交叉元素？

Question

是否可以使jsPlumb流程图连接器不跨越可连接的项目或指定的元素（在示例中：带有'item'类的元素）？

默认流程图行为：

期望的结果：

这是我试过的：

  

http://jsfiddle.net/CcfTD/1/

编辑澄清

HTML

 <div id="root">
        <div class="item" id="item1">Item 1</div>
        <div class="item" id="item2">Item 2</div>
        <div class="item" id="item3">Item 3</div>
        <div class="item" id="item4">Item 4</div>
        <div class="item" id="item5">Item 5</div>
  </div>

JS

   jsPlumb.connect({
    source: $('#item2'),
    target: $('#item7'),
    anchors: [ "Continuous" ],
    connector:[ "Flowchart" ],
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    }
});

基本上让jsPlumb引擎（SVG或canvas）知道相关的DOM元素 并有一个避免对象的方案

  

http://jsfiddle.net/adardesign/2ZFFc/

Answer 1

虽然我实际上正在尝试找到一种合适的方法（这导致了我的问题）。我确实有一个解决方案，我正在使用它来让jsPlumb以我想要的方式工作。

基本上，您必须添加零高度/宽度div作为中间节点。然后，您可以与该节点建立连接，而不是直接在真实项目之间建立连接。

我有modified your jsfiddle（updated link）来举例说明。

需要注意的重要事项是使用坐标设置锚位置的能力以及使用两种不同端点形状的能力。另外，由于在您的示例中从锚点到第一个转弯的默认长度太长，因此可以使用存根参数来控制它。

以下是带注释的相关修改。

<强> HTML

<div id="root">
    <div class="item" id="item1">Item 1</div>
    <div class="item" id="item2">Item 2</div>
    <div class="item" id="item3">Item 3</div>
    <div class="item" id="item4">Item 4</div>
    <div class="item" id="item5">Item 5</div>
    <div class="item" id="item6">Item 6</div>
    <div class="item" id="item7">Item 7</div>
    <div class="node" id="8-12"></div>            <!-- Midpoint -->
    <div class="item" id="item8">Item 8</div>
    <div class="item" id="item9">Item 9</div>
    <div class="item" id="item10">Item 10</div>
    <div class="item" id="item11">Item 11</div>
    <div class="item" id="item12">Item 12</div>
    <div class="item" id="item13">Item 13</div>
    <div class="item" id="item14">Item 14</div>
</div>

<强> CSS

.node {
    position: absolute;
    height: 0px;
    width: 0px;
    visibility: hidden;

    /* change these to place the midpoint properly */
    left: 285px;
    top: 160px;
}

<强> JS

//connection from item8 to midpoint(8-12)
jsPlumb.connect({
    source: $('#item8'),
    target: $('#8-12'),
    connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
                                         //    as short as you need it
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    },
    anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
    endpoints:[ ["Dot", {radius:2}],["Blank"] ] //<== Blank connector at end
});

//connection from midpoint(8-12) to item12
jsPlumb.connect({
    source: $('#8-12'),
    target: $('#item12'),
    connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
                                         //    as short as you need it
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    },
    anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
    endpoints:[ ["Blank"],["Dot", {radius:2}] ] //<== Blank connector at start
});

Answer 2

实际上，您的问题的解决方案更深入，尤其是在您处理动态数据时。

经过几个小时的挖掘，我终于发现了一个“裂缝”，不是一个漂亮的解决方案，而是一个裂缝。

我刚刚对流程图连接器进行了此更改，我也不熟悉其他连接器，从未使用它们。

在考虑了midx和midy以及初始存根（这些应该在完整的解决方案中使用但我放弃了它们）之后，最简单的方法是在connectors-flowchart.js文件中搜索addSegment函数。 这就是添加细分的地方。

在添加当前片段（在片段数组中推送）之前，检查它是否会与您的任何元素相交，只需计算一些中间点（从而添加其他片段，将初始片段分成片段），这样它基本上绕过相交的元素绕道而行。

如果需要更多细节，我很乐意与大家分享。

Answer 3

我遇到了类似的问题，其中动态生成的图表的连接与元素相交。

对我来说有用的是为流程图连接指定“midpoint”参数。也许这对你的情况也有帮助。

存根参数也接受数组（不在文档中）。 我刚刚设定：

jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];

希望这有帮助！

Answer 4

我已经尝试了上述选项，并且如果您只是想要一个简单的解决方案而不添加中间节点，那么以下方法对我有用：

connector: ["Flowchart", { anchors: ["Bottom", "Top"] }]

在连接上添加这些参数。