Question

我在一个Div元素中显示了一个图标。我需要在这些图标之间画一条连线。请注意，Div是一个动态元素。

我已在下方显示当前图片。

预期图像显示在下方。

请指导我如何做到这一点。提前谢谢。

Answer 1

这是一个小型演示，可以帮助您了解如何使用jsPlumb来实现您想要的效果。

jsPlumb.ready(function() {
            jsPlumb.connect({
                source:"firstItem",
                target:"secondItem",
                endpoint:"Dot"
            });
        });

span{
  display:inline-block;
  height:50px;
  width:100px;
  background-color:yellow;
}

     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
 <div id="diagramContainer">
        <div  >
        <span id="firstItem">Smiley1</span>
        </div>
        <div >
         <span style="float:right" id="secondItem">Smiley2</span>
        </div>
    </div>

希望它有所帮助：）

Answer 2

这个概念是在＆＃34;起点＆＃34;内部绘制一个绝对位置的div。并以2点之间的角度旋转：

// a,b  = jquery results i.e. a=$('#smile1'), b=$('#smile2'),
  function dist(a,b) {
      let o1 = a.offset(), o2 = b.offset();
       return Math.sqrt(Math.pow(o1.top  - o2.top,2) + Math.pow(o1.left - o2.left,2));
    }
    function angle(a, b) {
       let ao = a.offset(), bo = b.offset();
           dx = ao.left-bo.left, dy = ao.top-bo.top;
       return Math.PI + Math.atan2(dy, dx);
    }
    function drawConnection(a,b) {
       $('.line').remove();
       let d = dist(a,b);
       a.removeClass('first');
       let ang = d<10 
           ? 0
           : (angle(a,b) * 180)/ Math.PI;
       a.append(
          $('<div>').addClass('line')
              .css({
                  width: Math.round(d) +'px',
                  transform: 'rotate(' + Math.round(ang) + 'deg)'
              })
       );
       return ang;
    }

该行的CSS应为：

.line {
   position: absolute;
   transform-origin: top left; // to make it rotate around top-left
   border-top: solid 2px blue; // set any color
   top: 10px; // center of your "smile"
   left: 10px;
}

以下是working example

如何在两个不同div中显示的两个图标之间绘制线连接器。

2 个答案: