Динамические соединения jsPlumb не рисуют точную линию

Я использую jsPlumb для рисования линии соединения одного изображения с другим изображением, но линия не является точной. Я рисую линию между двумя изображениями, когда пользователь держит левую кнопку мыши на исходном изображении и отпускает левую кнопку мыши на целевом изображении. Я передаю правильные идентификаторы изображений, и линия рисуется, но линия не соединяет два изображения.

Вот как это выглядит:

введите здесь описание изображения

Вот мой код:

$(document).on("mousedown",".component", function (e) {
    if (e.which == 3)
    {
        source = e.target.id;
    }
}).on("mouseup", function (e) {
    if (e.which == 3)
    {
        destination = e.target.id;
        alert("src: " + source + " dest: " + destination);
        jsPlumb.connect({ source:source, target:destination });
    }
});

Два изображения (начальное и конечное) создаются динамически. Также они используют jquery ui, который можно перетаскивать и отбрасывать.

Но два идентификатора передаются правильно.

Вот отрендеренный html:

<div id="circuit-board" style="width:100%; height:400px; background-color:#333; color:white;" class="ui-droppable"><div class="ui-draggable ui-draggable-handle ui-resizable" style="position: relative; width: 100px; height: 100px;"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div><img id="component_1" class="component ui-draggable ui-draggable-handle canvas-element jsplumb-endpoint-anchor jsplumb-connected" src="images/components/start.png" width="100" height="100" style="position: relative; width: 100px; height: 100px;"><div class="jsplumb-endpoint jsplumb-endpoint-anchor jsplumb-draggable jsplumb-droppable" style="position: absolute; height: 20px; width: 20px; left: 45px; top: 95px;"><svg style="position:absolute;left:0px;top:0px" width="20" height="20" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="10" cy="10" r="10" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div><div class="jsplumb-endpoint jsplumb-endpoint-anchor jsplumb-draggable jsplumb-droppable" style="position: absolute; height: 20px; width: 20px; left: 1119px; top: 395px;"><svg style="position:absolute;left:0px;top:0px" width="20" height="20" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="10" cy="10" r="10" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div><svg style="position:absolute;left:49px;top:99px" width="1086" height="462" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="jsplumb-connector"><path d="M 1074 300 C 1064 450 10 150 0 0 " transform="translate(6,6)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="#456" style="" stroke-width="4"></path></svg></div><div class="ui-draggable ui-draggable-handle ui-resizable" style="position: relative; width: 100px; height: 100px; left: 402px; top: 0px;"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div><img id="component_2" class="component ui-draggable ui-draggable-handle canvas-element jsplumb-endpoint-anchor jsplumb-connected" src="images/components/end.png" width="100" height="100" style="position: relative; width: 100px; height: 100px;"></div></div>

Идентификатор источника = component_1 и идентификатор назначения = component_2.

Если есть лучший способ сделать это .... я весь внимание. Благодарность!


javascript html jquery jsplumb
person user3788671    schedule 22.03.2016    source источник
comment
Какую версию JSPlumb вы используете?   -  person Ben Felda    schedule 22.03.2016
comment
Я использую JSPlumb 2.0.7-min.js   -  person user3788671    schedule 22.03.2016
comment
Я запутался, как приложение работает. Если вы используете перетаскивание jQuery для изображений, разве исходное изображение не перемещается с помощью мыши при перетаскивании на второе изображение? Так как же навести курсор мыши на второе изображение? Можете ли вы опубликовать свой полный пример в jsFiddle?   -  person Sam Fen    schedule 23.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

Если это так, то это связано с тем, что jsPlumb кэширует смещения элементов из соображений производительности, поэтому вам нужно явно указать jsPlumb пересчитать смещения.

Я предполагаю, что что-то вроде этого сработает для вас:

on("mouseup", function (e) {
  if (e.which == 3)
  {
    jsPlumb.recalculateOffsets($("#circuit-board>div"));
    destination = e.target.id;
    jsPlumb.connect({ source:source, target:destination });
  }
});

Я не уверен, какой именно элемент вызывать recalculateOffsets, в общем случае он должен быть родителем перетаскиваемых компонентов.

person Sam Fen    schedule 23.03.2016