vue 任意两个div之间连线

UpSeven0

于 2024-07-12 10:55:48 发布

阅读量112

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_34811855/article/details/140373401

版权

drawLine(obj1, obj2, item, inx) {
      let color = inx % 2 === 0 ? '#0499A0' : '#3531AA';
      // 起点坐标
      var x1 = obj1.getBoundingClientRect().left + obj1.clientWidth / 2;
      var y1 = obj1.getBoundingClientRect().top + obj1.clientHeight;

      // 终点坐标
      var x2 = obj2.getBoundingClientRect().left + obj2.clientWidth / 2;
      var y2 = obj2.getBoundingClientRect().top + obj2.clientHeight / 10 - 10;

      // 在线的中间绘制长度等信息
      this.drawInfo(item, inx, (x1 + x2) / 2, (y1 + y2) / 2);
      // 计算连接线长度
      var length = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));

      // 计算连接线旋转弧度值
      var rad = Math.atan2((y2 - y1), (x2 - x1));

      // 连接线未旋转前，起点坐标计算
      var top = (y1 + y2) / 2;
      var left = (x1 + x2) / 2 - length / 2;

      // 创建连接线 dom 节点，并设置样式
      var line = document.createElement('div');
      var style = 'position: absolute; background-color: ' + color + '; height: 2px; top:' +
        top + 'px; left:' + left + 'px; width: ' + length + 'px; transform: rotate(' + rad + 'rad);';
      line.setAttribute('style', style);
      line.setAttribute('id', 'line' + inx);
      document.body.appendChild(line);
    }