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

19

Можно ли заставить соединители jsPlumb Flowchart не пересекать соединяемые элементы или указанные элементы (в примере: элементы с классом «item»)?

Поведение потоковой диаграммы по умолчанию:

enter image description here

Желаемый результат:

enter image description here

Вот что я попробовал:

http://jsfiddle.net/CcfTD/1/

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
   jsPlumb.connect({
    source: $('#item2'),
    target: $('#item7'),
    anchors: [ "Continuous" ],
    connector:[ "Flowchart" ],
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    }
});

По сути, чтобы jsPlumb engine (SVG или canvas) был осведомлен о соответствующих элементах DOM и иметь схему избегания объекта

http://jsfiddle.net/adardesign/2ZFFc/

Вы нашли решение? adardesign
Кажется, будет реализованоhere для соединенных элементов - линии изгибаются вокруг них, а не проходят. UIlrvnd
@star, спасибо за подсказку и идею, как я могу использовать flowchart.com вне их платформы? adardesign

Ваш Ответ

3   ответа
2

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

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

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

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

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

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

Кроме того, я отредактировал среднюю точку (установите ее на 1 или 0,7 в зависимости от положения привязки конечной точки). Примеры:imageshack.us/photo/my-images/829/ksxa.jpg а такжеimageshack.us/photo/my-images/844/hny3.jpg
Я добавил дополнительный шаг в свой «избежать узлов» код: после добавления вспомогательных сегментов, предназначенных для обхода блоков, я также добавил метод очистки, который в основном сокращает массив сегментов, если обнаружены ненужные сегменты (если 2 сегмента, которые не являются последовательными, в противном случае могут быть связаны меньшим числом сегментов, то текущие сегменты удаляются и добавляются новые сегменты).
5

Хотя я на самом деле пытаюсь найти правильный способ сделать это (что привело меня к вашему вопросу). У меня есть решение, которое я использую в то же время, чтобы заставить 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
});
Спасибо! Кажется, что вы движетесь в определенном направлении, но оно не завершено, не могли бы вы изменить и показать полное решение?
Эй, одним из возможных решений может быть захват границ div и помещение их в двумерный массив, как здесь:stackoverflow.com/a/5930077/586033  Затем мы могли бы динамически размещать эти якоря и избегать коллизий ... для того, что я хочу сделать, я также хочу, чтобы эти соединения были параллельны друг другу (например: они не проходят прямо друг над другом), имея в виду, что мы могли бы также добавьте некоторые правила, такие как некоторое расстояние между div и другими связями
2

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

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

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

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

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

Похожие вопросы