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

Question

是否可以使 jsPlumb Flowchart 连接器不交叉连接项目或指定元素(在示例中:具有“项目”类的元素)？

默认流程图行为:



期望的结果:



这是我尝试过的:

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) 提供一个例子。

需要注意的重要事项是使用坐标设置 anchor 位置的能力以及使用两种不同端点形状的能力。此外，由于在您的示例中从 anchor 到第一圈的默认长度太长，因此可以使用 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
});