本文已参与「新人创作礼」活动，一起开启掘金创作之路。
刷论坛时，看到有小伙伴提问不依赖图形化工具，怎么实现两个div之间的连线，
看着追问的人不少，顺题发挥了下，
下面代码实现两个dom元素中心坐标的连线，首先引入jquery（任意版本），主要是为了方便dom操作，当然改成原生js也可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
height:100px;
width:200px;
position: absolute;
z-index: 2;
}
#one{
background:red;
top:200px;
left:400px;
}
#two{
background:blue;
top:100px;
left:40px;
}
#three{
background:yellow;
top:400px;
left:10px;
}
.line{
position:absolute;
background:green;
height:1px;
z-index: 1;/*这里设置大于2，即可看到真正连线的其实是两个元素的中心坐标*/
}
</style>
</head>
<body>
<div id="one" class="item"></div>
<div id="two" class="item"></div>
<div id="three" class="item"></div>
</body>
<script src="jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").append(drawLine($("#one"),$("#two")))
$("body").append(drawLine($("#three"),$("#two")))
$("body").append(drawLine($("#one"),$("#three")))
})
/**
* 实现两个元素中心点的连线
* @author 渀波儿灞 2021-02-20
* @param {Object} startObj jquery对象，起点元素
* @param {Object} endObj jquery对象，终点元素
* @return {String} 返回连线的dom
*/
function drawLine(startObj, endObj) {
//起点元素中心坐标
var y_start = Number(startObj.css("top").replace("px","")) + startObj.height()/2;
var x_start = Number(startObj.css("left").replace("px","")) + startObj.width()/2;
//终点元素中心坐标
var y_end = Number(endObj.css("top").replace("px","")) + endObj.height()/2;
var x_end = Number(endObj.css("left").replace("px",""))+ endObj.width()/2;;
//用勾股定律计算出斜边长度及其夹角（即连线的旋转角度）
var lx = x_end - x_start;
var ly = y_end - y_start;
//计算连线长度
var length = Math.sqrt(lx * lx + ly * ly);
//弧度值转换为角度值
var c = 360 * Math.atan2(ly, lx) / (2 * Math.PI);
//连线中心坐标
var midX=(x_end+x_start)/2;
var midY=(y_end+y_start)/2
var deg = c <= -90 ? (360 + c) : c; //负角转换为正角
return `<div class='line'
style='top:${midY}px;left:${midX-length/2}px;width:${length}px;transform:rotate(${deg}deg);'>
</div>`
}
</script>
</html>
效果图：
编辑
就这样吧，不对之处，欢迎批评指正~~~
