在大小不同的两个元素之间绘制连接线

Question

我正在使用以下javascript函数在两个元素之间绘制连接线。

function createLine(x1,y1,x2,y2,lineID) {
        dist = Math.sqrt( ((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2)) );
        xMid = (x1+x2)/2;
        yMid = (y1+y2)/2;
        radius = Math.atan2(y1 - y2, x1 - x2);
        degrees = (radius * 180) / Math.PI;

        line = document.getElementById(lineID);
        line.style.width = dist;
        line.style.top = yMid;
        line.style.left = xMid - (dist/2);
        line.style.transform = "rotate("+degrees+"deg)";
    }

很简单，我只指定第一个元素的x，y和第二个，第三个或第四个元素的x，y以及行div的id，所以它变得像这样：

    <div id="element1"></div>
    <div id="element2"></div>
    <div id="element3"></div>
    <div id="line"></div>
    <div id="line"></div>

代码工作正常，除了如果我更改div元素的宽度/高度（例如：第一个div是一个16x16的圆，第二个div是21x21的圆，而第三个div也是一个16x16的圆），这些行会变得混乱并没有指出元素的实际中心。无论大小如何，如何重写代码以检测连接线并将其放置在任何元素的中心？请记住，我不想使用SVG或任何画布绘制线条。我想坚持使用javascript函数和div行。