画一条连接两点的线，由两点坐标确定一条直线

页面上有两颗星星图标，画一条线连接两颗星星。

1.先获取两点的坐标   2.计算弦长及旋转角度   3.绘制线

<div class="quality-analysis">
  <div class="cnt-box">
     <span  class="selected-start">
        <svg class="icon fs16 warn-text icon-orange " aria-hidden="true">
           <use xlink:href="#h-delete-collect"></use>
         </svg>
      </span>
      <span  class="selected-start">
        <svg class="icon fs16 gray-text" aria-hidden="true">
          <use xlink:href="#h-collect"></use>
         </svg>
        </span> 
  </div>
</div>

<script>
  export default {
    data() {
      return {
        positionList: [], // 获取坐标
      }
    },
    mounted() {
      this.getStartPosition()
      this.drawLine(this.positionList)
    },
    methods: {
      // 获取星星坐标
      getStartPosition() {
        let nodeList = document.querySelectorAll('.selected-start')
        let parentNode = document.querySelector('.cnt-box').offsetParent
        let actualLeft = 0
        let current = 0
        let actualTop = 0
        if(nodeList.length>0){
          for(let i=0;i<nodeList.length;i++){
            actualLeft = nodeList[i].offsetLeft  // 累加计算星星相对于顶级父元素的距离
            actualTop = nodeList[i].offsetTop
            current = nodeList[i].offsetParent
            while(current!== parentNode){
              actualLeft += current.offsetLeft
              actualTop += current.offsetTop
              current = current.offsetParent
            }
            let obj = {
              x:actualLeft,
              y:actualTop,
            }
            this.positionList.push(obj)
          }
        }
       
      },

      // 画星星连线
      drawLine(positionList) {
        if(positionList.length>0){
          for(let i=1;i<positionList.length;i++){
            // 计算长宽
            let rectWidth = Math.abs(positionList[i].x - positionList[i-1].x)
            let rectHeight = Math.abs(positionList[i].y - positionList[i-1].y)
            // 在页面确定div左上角的具体位置
            let rectX = positionList[i].x < positionList[i-1].x ? positionList[i].x : positionList[i-1].x
            let rectY = positionList[i].y < positionList[i-1].y  ? positionList[i].y : positionList[i-1].y
          
            // 弦长
            let stringWidth = Math.ceil(Math.sqrt((rectWidth * rectWidth)+ (rectHeight*rectHeight)))
            let xPad = (rectWidth - stringWidth)/2
            let yPad = (rectHeight - 2)/2
            // 从x轴到(x,y)的旋转角度
            let radNum = Math.atan2((positionList[i].y - positionList[i-1].y),(positionList[i].x - positionList[i-1].x))
            let  traX  = rectX +  xPad - 8 // 8为星星图标大小的1/2
            let  traY  = rectY +  yPad + 8
            // 创建div
            let div = document.createElement('div')
            div.innerHTML = '<div ' +
              ' style = "width:' + stringWidth + 'px;height:2px;transform:translate(' + traX+ 'px,' + traY +'px) rotate('+ radNum+ 'rad) " class="draw-line-style"></div>'
            let doc = document.querySelector('.quality-analysis')
            doc.appendChild(div)
          }
        }
      }
    }
  }
</script>

说明：

<style lang="scss">
  .quality-analysis {
    position: relative;
  .draw-line-style{
    top: 0;
    position: absolute;
    border-top: 1px solid $bgOrange;
  }
</style>

1.每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

2.atan2(y,x) ：返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。