最简单的纯 div 实现两点之间绘制线！！！

最简单的纯 div 实现两点之间绘制线！！！"/>

最简单的纯 div 实现两点之间绘制线！！！

今天 1024，分享一个两点之间绘制线的方法，纯 div 绘制，拿之即用，希望搜索引擎能分享给需要的人。
先看下效果图：

可点击查看 在线预览

第一步：获取两个点的中心点坐标

// 中心点坐标（相较于滚动条外的 dom 边界）
function useElementCenterPoint(el: HTMLElement) {try {const { x, y, width, height } = el.getBoundingClientRect()return {x: x + width / 2 + window.scrollX,y: y + height / 2 + window.scrollY}} catch (e) {console.warn(`获取元素位置信息报错：`, e)}
}

因为我们绘制的线是连接两个点的中心点，这样效果更好。

使用 getBoundingClientRect 获取元素的位置信息，其中 x 和 y 在这里可以理解为是元素的 left 和 top，为了获取它们的中心点坐标，这里需要加上元素一半的宽高，这个脑补一下很好理解。
另外 getBoundingClientRect 是相对于 视口 获取元素的位置的，也就是它不考虑滚动条的位置。考虑到会有滚动的情况，我们需要加上横、纵向滚动条位置。

计算两个点之间的距离

 // 两点之间的距离function usePointsDistance(point, point2) {const horizontalLength = Math.abs(point.x - point2.x)const verticalLength = Math.abs(point.y - point2.y)return Number(Math.sqrt(Math.pow(horizontalLength, 2) + Math.pow(verticalLength, 2)).toFixed(2))}

如图所示，我们在有坐标的情况下，根据 勾股定理 可以很轻易的获取到两点之间的距离。

根据坐标计算蓝线的长度，从而计算出红线的长度。

绘制线

export function drawLine(dotOne: HTMLElement,dotTwo: HTMLElement,options: {thickness: number // 线粗lineClassName?: string // 线的类名lineStyle?: Partial<CSSStyleDeclaration> // 线的 css 样式}
) {const line = document.createElement('div')const { x: x1, y: y1 } = useElementCenterPoint(dotOne)!const { x: x2, y: y2 } = useElementCenterPoint(dotTwo)!const point = {x: x1,y: y1}const point2 = {x: x2,y: y2}// 线的长度const distance = usePointsDistance(point, point2)// 线的坐标const topValue = (y1 + y2) / 2 - options.thickness / 2const letValue = (x1 + x2) / 2 - distance / 2// 线的角度const angle = Math.atan2(y1 - y2, x1 - x2) * (180 / Math.PI)Object.assign(line.style, {...options.lineStyle,position: 'absolute',top: `${topValue}px`,left: `${letValue}px`,width: `${distance}px`,transform: `rotate(${angle}deg)`})// 用来定位已存在的 lineline.classList.add('unique-line-class')options.lineClassName && line.classList.add(options.lineClassName)document.body.appendChild(line)
}

调用以下代码即可绘制一条线

 drawLine(dotOne, dotTwo, {thickness: 2,lineClassName: 'line-style'})

线的角度

// 线的角度
const angle = Math.atan2(y1 - y2, x1 - x2) * (180 / Math.PI)

Math.atan2(y1 - y2, x1 - x2) 的目的是为了计算从点 (x1, y1) 到点 (x2, y2) 的角度。Math.atan2 是反正切函数，它返回的是从原点到点 (x2, y2) 的角度。 在二维平面上，点的位置是由 x 和 y 坐标决定的。

当我们想要知道两点之间的角度时，我们需要考虑这两个点的 x 和 y 坐标的差值。 当我们使用 Math.atan2(y1 - y2, x1 - x2) 时，我们实际上是在计算这两点之间的角度。

x 坐标的差值 (x1 - x2) 表示在 x 轴方向上的移动距离，而 y 坐标的差值 (y1 - y2) 则表示在 y 轴方向上的移动距离。 这个角度的计算考虑了 x 和 y 坐标的相对大小，因此它能够准确地表示出这两点之间的角度关系，而不仅仅是直线距离。

这个函数返回的角度是以弧度为单位的，但是如果你想用度来表示，你只需要乘以(180/π)。这就是为什么在代码中会有 * (180 / Math.PI) 的部分。

结语

以上就是纯 div 实现两点之间绘制线的核心实现了，全部代码可查阅 这里 。