Javascript 如何在两个div之间画一条线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8672369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a line between two divs?
提问by Louis Ricci
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 的情况下做到这一点。这可能吗？
回答by Louis Ricci
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
- HTML Element offset[Width|Height|Top|Left] properties
- 距离公式
- 寻找两点的中心
- 找到两点之间的角度
- CSS 变换：旋转
- HTML 元素偏移量[Width|Height|Top|Left] 属性
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:
例如，如果您需要从不是右上角和右下角 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;
where you see + off1.widthand + off1.height, that means that the code is calculating the position of the bottom or the right of the div. Remove the + off1.widthor the + off1.heightto get the left or the top of the div.
在您看到+ off1.width和 的地方+ off1.height，这意味着代码正在计算 div 底部或右侧的位置。删除+ off1.width或+ off1.height以获得 div 的左侧或顶部。
EDITupdated 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.
EDIT更新为更标准的 getOffset 函数。如果你想得到真正的肛门，你可能还必须添加 document.documentElement.client[Left/Top] 并遍历 offsetParent 树，但我认为 getBoundingClientRect() 和 window.page[X/Y]Offset 足以这样的例子。
回答by user2271253
There is a way to do it without jQ.
有一种方法可以在没有 jQ 的情况下做到这一点。
- Find the position of your divs using offset.
- Find the slope
- draw
1x1pxpoints from start to end position using the slope in your loop.
- 使用偏移量查找 div 的位置。
- 找到斜率
1x1px使用循环中的斜率从开始到结束位置绘制点。
