实现两个div的连线功能

思路：

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;
    }