如何在两个女主角之间划清界限?

I'm currently trying to draw a diagonal line between the bottom right corner of one div to the top right corner of another. If possible, I would like to do it without jQuery. Is this possible?

我正在尝试在一个div的右下角和另一个div的右上角之间画一条对角线。如果可能的话，我希望没有jQuery。这是可能的吗?

3 个解决方案

#1

http://jsfiddle.net/cnmsc1tm/

This won't work with IE8 or below because of CSS limitations.

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

The Distance Formula
的距离公式
Finding the Center Of Two Points
求两点的中心
Finding the Angle Between Two Points
求两点间的夹角
CSS Transform:Rotate
CSS转换:旋转
HTML Element offset[Width|Height|Top|Left] properties
HTML元素抵消[宽度|高度最高| |离开]属性

Edit (for others with the same problem):

编辑(对于有相同问题的人):

If you need to, for example, create a line from two corners that are not the top right and bottom right divs, go to this section of the code:

例如，如果您需要从右上角和右下角以外的两个角创建一条线，请访问代码的以下部分:

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

where you see + off1.width and + off1.height, that means that the code is calculating the position of the bottom or the right of the div. Remove the + off1.width or the + off1.height to get the left or the top of the div.

你看到的是+ off1。宽度和+ off1。高度，这意味着代码是计算div的底部或右侧的位置。宽度或+ off1。高度以获得div的左边或顶部。

EDIT updated to a more standard getOffset function. If you want to get really anal you'd probably also have to add document.documentElement.client[Left/Top] and walk the offsetParent tree, but I think getBoundingClientRect() and window.page[X/Y]Offset are sufficient for an example like this.

编辑更新到更标准的getOffset函数。如果你想要真正地了解它，你可能还需要添加document。documentelement。客户端[左/上]并遍历offsetParent树，但我认为是getBoundingClientRect()和window。页[X/Y]偏移量对于这样的例子是足够的。

#2

There is a way to do it without jQ.

没有jQ也有办法。

Find the position of your divs using offset.
使用偏移量找到div的位置。
Find the slope
斜率
draw 1x1px points from start to end position using the slope in your loop.
使用循环中的斜率从开始到结束的位置绘制1x1px点。

#3

Is using an image as the bottom border for that div class out of the question? If your diagonal line always has to be the same size/color, etc... that would be a non-jQuery option you could use.

用一个图像作为这个div类的底部边界是不可能的吗?如果你的对角线总是相同的尺寸/颜色，等等……这是一个可以使用的非jquery选项。

#1