Вопрос по javascript, canvas, svg – jsPlumb: как сделать так, чтобы соединители блок-схем избегали пересекающихся элементов?

На самом деле решение вашей проблемы более глубокое, особенно если вы работаете с динамическими данными.

После нескольких часов копания я наконец нашел «трещину», не красивое решение, а трещину.

Я только что сделал это изменение для разъемов Flowchart, также я не знаком с другими разъемами, никогда не использовал их.

После рассмотрения различных вещей, таких как midx и midy, а также начальных заглушек (их следует использовать в полном решении, но я отказался от них), самое простое, что нужно сделать, - это найти функцию addSegment в файле connectors-flowchart.js. Вот где сегменты добавляются.

Перед добавлением текущего сегмента (нажмите его в массиве сегментов), вы проверяете, будет ли он пересекаться с любым из ваших элементов, просто вычислите несколько промежуточных точек (таким образом добавляя дополнительные сегменты, разбивая начальный сегмент на куски), так что в основном он занимает объезд вокруг пересекаемого элемента.

Если потребуется более подробная информация, я буду рад поделиться с вами.

Хотя я на самом деле пытаюсь найти правильный способ сделать это (что привело меня к вашему вопросу). У меня есть решение, которое я использую в то же время, чтобы заставить jsPlumb работать так, как я хочу.

По сути, вы должны добавить нулевую высоту / ширину div, чтобы действовать как промежуточный узел. Затем вы устанавливаете соединения с этим узлом, а не непосредственно между реальными предметами.

я имеюизменил ваш jsfiddle (обновленная ссылка) привести пример этого.

Важные вещи, на которые следует обратить внимание, - это возможность установить расположение якоря с помощью координат и возможность использовать две разные формы конечных точек. Кроме того, поскольку длина по умолчанию от якоря до первого поворота в вашем примере слишком велика, ее можно контролировать с помощью аргумента-заглушки.

Ниже приведены соответствующие модификации с комментариями.

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

У меня просто была похожая проблема, когда соединения динамически генерируемой диаграммы пересекались с элементами.

То, что работало для меня, было указать"midpoint" аргумент для соединения потоковой диаграммы. Может быть, это поможет и вам.

stub Аргумент также принимает массивы (не в документации). Я просто установил:

jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];

Надеюсь это поможет!