jsPlumb:如何使流程图连接器避免元素相交？
有没有可能使jsPlumb流程图连接器不交叉连接项目或指定的元素(在示例中:具有'item‘类的元素)？
默认流程图行为：
想要的结果：
这是我尝试过的：
编辑以澄清
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元素并具有对象避免方案
回答 4
Stack Overflow用户
发布于 2013-02-02 00:31:57
而我实际上是在试图找到一个合适的方法来做这件事(这让我想到了你的问题)。我确实有一个解决方案，在此期间我正在使用让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
});Stack Overflow用户
发布于 2013-12-31 20:11:32
实际上，您的问题的解决方案更深层次，特别是当您使用动态数据时。
经过几个小时的挖掘，我终于找到了一个“裂缝”，不是一个很好的解决方案，而是一个裂缝。
我只是对流程图连接器做了这样的更改，而且我对其他连接器一点也不熟悉，从来没有用过它们。
在考虑了midx和midy以及初始存根(这些应该在完整的解决方案中使用，但我放弃了它们)等各种东西之后，最简单的事情就是在connectors-flowchart.js文件中搜索addSegment函数。这就是添加线段的地方。
在添加当前段之前(将其推入段数组)，您可以检查它是否会与任何元素相交，只需计算一些中间点(从而添加额外的段，将初始段分成几个部分)，因此它基本上绕过了相交的元素。
如果需要更多细节，我很乐意分享。
Stack Overflow用户
发布于 2014-01-08 22:33:50
我刚刚遇到了一个类似的问题，动态生成的图的连接与元素相交。
对我来说起作用的是为流程图连接指定"midpoint"参数。也许这对你也有帮助。
存根参数也接受数组(文档中没有)。我只是设置了：
jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];
希望这能有所帮助！
https://stackoverflow.com/questions/10621934
复制相似问题