javascript – jsPlumb:如何使Flowchart连接器避免相交元素?

是否可以使jsPlumb Flowchart连接器不能交叉连接的项目或指定的元素(在示例中为’item’类的元素)?

默认流程图行为:

期望的结果:

这是我试过的:

07000

编辑澄清

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元素
并具有对象避免方案

07001

虽然我实际上正在寻找一个正确的方法来做这个(这导致我的你的问题)。我确实有一个我正在使用的解决方案,让jsPlumb以我想要的方式工作。

基本上你必须添加一个零高度/宽度的div作为一个中间节点。然后,您连接到该节点,而不是直接位于实际项目之间。

我有modified your jsfiddle(updated link)提供了一个例子。

要注意的重要事项是使用坐标和使用两种不同端点形状的能力来设置锚定位置。另外,由于在示例中从锚点到第一个回合的默认长度太长,所以可以使用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
});
http://stackoverflow.com/questions/10621934/jsplumb-how-to-make-flowchart-connectors-avoid-intersecting-elements

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – jsPlumb:如何使Flowchart连接器避免相交元素?