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

问题描述

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

Is it possible to make jsPlumb Flowchart connectors not to cross connectable items or specified elements (in the example: elements with 'item' class)?

默认流程图行为：

期望的结果：

以下是我的尝试：

编辑澄清

HTML

Edited to clarify

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

JS

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

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

Basically to have jsPlumb engine (SVG or canvas) be aware of the relevant DOM elementsand have a object-avoidance scheme

推荐答案

虽然我实际上试图找到一个合适的方法来做到这一点（这引导我提出你的问题）。我确实有一个解决方案，我正在使用它来让jsPlumb以我想要的方式工作。

While I am actually trying to find a proper method for doing this (which led me to your question). I do have a solution that I am using in the meanwhile to get jsPlumb to work in the way that I want it to.

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

Basically you have to add in a zero height/width div to act as an intermediate node. You then make connections to and from that node instead of directly between the real items.

我有（）以提供例如。

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

The important things to note are ability to set the anchor placement using coordinates and the ability to use two different endpoint shapes. In addition, since the default length from the anchor to the first turn is too long in your example, it can be controlled by using the stub argument.

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

Below are the relevant modifications with comments.

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

这篇关于jsPlumb：如何使流程图连接器避免交叉元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！