Как я могу сделать так, чтобы мои строки svg / canvas проходили между ними? - PullRequest
Новая
       16

Как я могу сделать так, чтобы мои строки svg / canvas проходили между ними?

0 голосов
/ 06 июня 2019

Я пытаюсь создать цифровой логический симулятор, и мне нужно графически отобразить мои ворота и разъемы. Существует этот базовый код, который позволяет мне соединять различные div с линиями svg.

это код, который я использую в качестве ссылки https://jsfiddle.net/kgfamo4b/

$('.ui-item').draggable({
      containment: "#canvas",
      drag: function( event, ui ) {
               var lines = $(this).data('lines');
               var con_item =$(this).data('connected-item');
               var con_lines = $(this).data('connected-lines');

               if(lines) {
                 lines.forEach(function(line,id){
                        $(line).attr('x1',$(this).position().left).attr('y1',$(this).position().top+1);  
                 }.bind(this));
               }

               if(con_lines){
                   con_lines.forEach(function(con_line,id){
                      $(con_line).attr('x2',$(this).position().left+5)
                            .attr('y2',$(this).position().top+(parseInt($(this).css('height'))/2)+(id*5));
                   }.bind(this));

               }

           }
    });

    $('.ui-item').droppable({
      accept: '.con_anchor',
      drop: function(event,ui){
         var item = ui.draggable.closest('.ui-item');
         $(this).data('connected-item',item);
         ui.draggable.css({top:-2,left:-2});
         item.data('lines').push(item.data('line'));

         if($(this).data('connected-lines')){
            $(this).data('connected-lines').push(item.data('line'));

             var y2_ = parseInt(item.data('line').attr('y2'));
             item.data('line').attr('y2',y2_+$(this).data('connected-lines').length*5);

         }else $(this).data('connected-lines',[item.data('line')]);

         item.data('line',null);
        console.log('dropped');
      }
    });


    $('.con_anchor').draggable({
         containment: "#canvas",
         drag: function( event, ui ) {
           var _end = $(event.target).parent().position();
           var end = $(event.target).position();
           if(_end&&end)    
           $(event.target).parent().data('line')
                                    .attr('x2',end.left+_end.left+5).attr('y2',end.top+_end.top+2);
                },
         stop: function(event,ui) {
            if(!ui.helper.closest('.ui-item').data('line')) return;
            ui.helper.css({top:-2,left:-2});
            ui.helper.closest('.ui-item').data('line').remove();
            ui.helper.closest('.ui-item').data('line',null);
            console.log('stopped');
          }
    });


    $('.con_anchor').on('mousedown',function(e){
        var cur_ui_item = $(this).closest('.ui-item');
        var connector = $('#connector_canvas');
        var cur_con;

      if(!$(cur_ui_item).data('lines')) $(cur_ui_item).data('lines',[]);

      if(!$(cur_ui_item).data('line')){
             cur_con = $(document.createElementNS('http://www.w3.org/2000/svg','line'));
             cur_ui_item.data('line',cur_con);
        } else cur_con = cur_ui_item.data('line');

        connector.append(cur_con);
        var start = cur_ui_item.position();
         cur_con.attr('x1',start.left).attr('y1',start.top+1);
         cur_con.attr('x2',start.left+1).attr('y2',start.top+1);
    });

Я ожидаю, что, если я соединяю 2 деления с линией, линия проходит вокруг любого деления. Если кто-то может подсказать мне, как это сделать на холсте, это также очень поможет.

...