思路:
1、得到两个div的某个连接点坐标;
2、判断是否在一条线上,分三种情况求出连线长度:
(1)x轴坐标相同;连线长度为x轴坐标差
(2)y轴坐标相同;连线长度为y轴坐标差
(3)坐标都不同,利用勾股定理算出两个坐标连线的距离,以起点为中心旋转响应的角度值
3、在页面上拼接响应的连线div,也可利用canvas画线
//此方法根据具体的需求更改,传进两个div对象,分别得到div中点的坐标值,利用left和top值
function drawLine(startObj, endObj) {
var html = "";
var y_start = Number(startObj.css("top").replace("px","")) + startObj.height()/2;
var x_start = Number(startObj.css("left").replace("px","")) + startObj.width();
var y_end = Number(endObj.css("top").replace("px","")) + endObj.height()/2;
var x_end = Number(endObj.css("left").replace("px",""));
var deg = 0;
if (y_start == y_end) // 画横线
{
if (x_start > x_end) {
var t = x_start;
x_start = x_end;
x_end = t
deg = 180;
}
length = Math.abs(x_end - x_start);
} else if (x_start == x_end) // 画竖线
{
deg = 90;
if (y_start > y_end) {
var t = y_start;
y_start = y_end;
y_end = t
deg = 270;
}
length = Math.abs(y_end - y_start);
} else {// 画线旋转角度
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); //弧度值转换为角度值
c = c <= -90 ? (360 + c) : c; //负角转换为正角
deg = c;
}
html = "<div class='rotate' style='top:" +y_start+ "px;left:" +x_start
+"px;width:"+length+"px;transform:rotate("+deg+"deg)'>" +
"<i class='arrow-img'></i>"+
"<i class='con-img'></i></div>";
return html;
}