jsPlumb: 如何使流程图连接器避免与元素相交？

Question

jsPlumb: 如何使流程图连接器避免与元素相交？

javascriptcanvassvgflowchartjsplumb

22

有没有可能让 jsPlumb 流程图的连接器不要穿过可连接的元素或指定的元素（例如：带有“item”类的元素）？

默认的流程图行为：

enter image description here

期望的结果：

enter image description here

这是我尝试过的：

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/

- Dmitry Druganov

似乎已经在这里实现了（http://flowchart.com/demo/）连接的项目-线条绕过它们而不是穿过它们。 - UIlrvnd

@star，感谢你的提示，你有什么想法可以让我在flowchart.com平台之外使用它吗？ - adardesign

4个回答

2

实际上，解决你的问题需要更深入的思考，特别是当你处理动态数据时。经过几个小时的探索，我终于找到了一个“破绽”，虽然不是很完美的解决方案，但是是一个“破绽”。我只对流程图连接器进行了更改，而且我根本不熟悉其他连接器，从未使用过它们。

在考虑了各种事情，如midx和midy以及初始桩（这些应该在完整的解决方案中使用，但我放弃了），最简单的方法是在connectors-flowchart.js文件中搜索addSegment函数。那里添加了线段。

在添加当前线段之前（将其推入线段数组中），检查它是否与任何元素相交，只需计算一些中间点（因此添加额外的线段，将初始线段分成几部分），使其绕过相交的元素。如果需要更多详情，我很乐意分享。

- Diana

我在我的“避免节点”代码中添加了一个额外的步骤：在添加旨在绕过块的辅助段之后，我还添加了一种清理方法，如果发现不必要的段（如果两个不连续的段可以通过更少的段连接，则删除当前段并添加新段）则基本上缩短段数组。 - Diana

另外，我编辑了中点（根据端点锚点位置将其设置为1或0.7）。示例：http://imageshack.us/photo/my-images/829/ksxa.jpg/ 和 http://imageshack.us/photo/my-images/844/hny3.jpg/ - Diana

2

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

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

“stub”参数也接受数组（文档中没有说明）。我只是设置了：

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

希望这有所帮助！

- Heiko

1

我尝试了上述选项，如果你只想要一个简单的解决方案而不添加中间节点，以下方法对我有效：

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

在您的连接上添加这些参数。

- dessskris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff · Accepted Answer

虽然我正在尝试找到一种合适的方法来实现这个（这让我想到了你的问题）。但是，我有一个解决方案，可以让jsPlumb按照我想要的方式工作。

基本上，您需要添加一个零高度/宽度的div作为中间节点。然后，您将连接与该节点之间进行连接，而不是直接连接真正的项。

我已经修改了您的jsfiddle（更新的链接）以提供此示例。

需要注意的重要事项是能够使用坐标设置锚点位置和使用两种不同的端点形状。此外，在您的示例中，由于从锚点到第一个拐角的默认长度太长，因此可以通过使用stub参数来控制。

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

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
});