--- theme: cyanosis --- 我正在参加「掘金·启航计划」 # 1 问题引出项目上遇到这样一个需求：给文本块加批注，然后将批注块与文本块用连接线连接起来，效果如图： ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc4abcd4d9284d6683d83382887b2602~tplv-k3u1fbpfcp-watermark.image?) 本文以原生 JS 的环境，来对连接线做实现与讲解。 # 2 实现思路及过程 ## 2.1 斜线的样式实现 “连接线” ，先抛开 “连接” 不谈，首先它是一条 “线” ，我们最先考虑如何在页面的任意位置画一条斜线： ~~~ css

.line { position: absolute; background-color: #333333; width: 200px; height: 1px; top: 300px; left: 400px; transform: rotate(0.5rad); } ~~~ - 选取 `div` 元素， `width` 设置线的长度， `height` 设置线的粗细； - 通过 `position: absolute` 、 `top` 、 `left` 属性，来设置线在页面中的位置； - 通过 `transform: rotate()` 来将线旋转某一弧度（rad）或角度（deg）。 ## 2.2 问题分解连接两个 div ，其实是在每个 div 中选取一个点，将所选取的两个点进行连接。结合上面斜线的样式实现方案，我们可以将连接两个 div 的问题进一步分解为：（1）从两个 div 中分别选取一个点作为连接点，并计算出两个连接点的 **坐标**；（2）通过两个点的坐标，计算出斜线样式所需的 `width` 、 `top` 、 `left` 、 `transform: rotate` 的数值，也就是连接线的 **长度**、**位置** 与 **旋转弧度**；（3）动态创建连接线 DOM ，设置其样式，添加到页面中。 ## 2.3 连接点的坐标计算从 div 中选取连接点，通常可以选取 div **元素块的中心点**、或 **某一条边框的中心点**、或 **某一个顶点**，根据自身的审美选择即可。通过 div 元素在浏览器可见区域的 top 、 left 值，以及其自身宽高，可以计算出两个点在浏览器可见区域中的坐标，如计算元素块的中心点坐标： ~~~ js var obj = document.getElementById('divID') var x = obj.getBoundingClientRect().left + obj.clientWidth / 2 var y = obj.getBoundingClientRect().top + obj.clientHeight / 2 ~~~ ## 2.4 连接线的长度计算有了两个连接点的坐标后，我们可以通过勾股定理，计算出连接线的长度： ~~~ js var length = Math.sqrt((x2 -x1) * (x2 -x1) + (y2 -y1) * (y2 -y1)) ~~~ ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/275c05a487c84ad2837d2916770b8212~tplv-k3u1fbpfcp-watermark.image?) > 注：图中的坐标系并非数学意义上严格的直角坐标系，而是按照网页样式布局的习惯所画的示意图，其 y 轴负方向（向下方向）为正值。 ## 2.5 连接线的旋转弧度计算 `Math.atan2(y, x)` 方法可以计算二维坐标系中任意一个点 (x, y) 和原点 (0, 0) 的连线与 x 轴正半轴的夹角大小（弧度值）。将连接线平移，使其原 (x1, y1) 点与远点 (0, 0) 重合，则原 (x2, y2) 点移动至 (x2 -x1, y2 -y1) ，套用 `Math.atan2(y, x)` 即可计算出连接线的旋转弧度： ~~~ js var rad = Math.atan2((y2 -y1), (x2 -x1)) ~~~ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5c109d94eec40a3a24f4349b39dc0c2~tplv-k3u1fbpfcp-watermark.image?) ## 2.6 连接线的位置计算连接线的位置，指的是连接线在未做旋转前（旋转是按照元素的中心点进行旋转），其左上顶点的坐标，计算如下： ~~~ js var top = (y1 + y2) / 2 // length = Math.sqrt((x2 -x1) * (x2 -x1) + (y2 -y1) * (y2 -y1)) var left = (x1 + x2) / 2 - length / 2 ~~~ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa8092abc3b943379a826ef6a87cef11~tplv-k3u1fbpfcp-watermark.image?) ## 2.7 创建连接线 DOM 斜线样式所需的所有属性值都计算完毕，最后创建 DOM ，为其设置行内样式，再将 DOM 添加到页面中即可： ~~~ js var line = document.createElement('div') var style = 'position: absolute; background-color: #333333; height: 1px; top:' + top + 'px; left:' + left + 'px; width: ' + length + 'px; transform: rotate(' + rad + 'rad);' line.setAttribute('style', style) document.body.appendChild(line) ~~~ # 3 完整代码样例最后给出完整的样例代码，连接了 5 个圆形的中心点绘制出一个五角星： ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c383cc91fac34863bfc4e62c601af2db~tplv-k3u1fbpfcp-watermark.image?) ~~~ html

~~~