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作为中间节点.然后,您可以与该节点建立连接,而不是直接在实际项目之间建立连接.

我修改了你的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
});