Question

我正在尝试在一个div的右下角和另一个div的右上角之间画一条对角线。如果可能的话，我想在没有jQuery的情况下这样做。这可能吗？

Answer 1

由于CSS限制，这不适用于IE8或更低版本。

function getOffset( el ) {
    var rect = el.getBoundingClientRect();
    return {
        left: rect.left + window.pageXOffset,
        top: rect.top + window.pageYOffset,
        width: rect.width || el.offsetWidth,
        height: rect.height || el.offsetHeight
    };
}

function connect(div1, div2, color, thickness) { // draw a line connecting elements
    var off1 = getOffset(div1);
    var off2 = getOffset(div2);
    // bottom right
    var x1 = off1.left + off1.width;
    var y1 = off1.top + off1.height;
    // top right
    var x2 = off2.left + off2.width;
    var y2 = off2.top;
    // distance
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
    // center
    var cx = ((x1 + x2) / 2) - (length / 2);
    var cy = ((y1 + y2) / 2) - (thickness / 2);
    // angle
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
    // make hr
    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
    //
    // alert(htmlLine);
    document.body.innerHTML += htmlLine;
}

距离公式
寻找两点中心
找到两点之间的角度
CSS转换：旋转
HTML元素偏移[宽度|高度|顶部|左侧]属性

编辑（针对具有相同问题的其他人）：

例如，如果您需要从不是右上角和右下角div的两个角创建一条线，请转到代码的此部分：

// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;

您看到+ off1.width和+ off1.height，这意味着代码正在计算div底部或右侧的位置。移除+ off1.width或+ off1.height以获取div的左侧或顶部。

编辑更新为更标准的getOffset函数。如果你想得到真正的肛门，你可能还需要添加document.documentElement.client [Left / Top]并遍历offsetParent树，但我认为getBoundingClientRect（）和window.page [X / Y] Offset足以满足像这样的例子。

Answer 2

有一种方法可以在没有jQ的情况下完成。

使用偏移量找到div的位置。
找到坡度
使用循环中的斜率从开始到结束位置绘制1x1px点。

如何在两个div之间划一条线？

2 个答案: