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:rel="external nofollow" href="#h-delete-collect"></use> </svg> </span> <span class="selected-start"> <svg class="icon fs16 gray-text" aria-hidden="true"> <use xlink:rel="external nofollow" 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 弧度之间）。