如何在两个div之间画一条线？ [英] How to draw a line between two divs?

问题描述

我目前正试图在一个div的右下角与另一个div的右上角之间画一条对角线。如果可能的话，我想不用jQuery。这可能吗？

> http://jsfiddle.net/cnmsc1tm/

由于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 
}; 
 
 
函数connect（div1，div2，color，thickness）{//绘制连线元素
 var off1 = getOffset（div1）; 
 var off2 = getOffset（div2）; 
 //右下角
 var x1 = off1.left + off1.width; 
 var y1 = off1.top + off1.height; 
 //右上角
 var x2 = off2.left + off2.width; 
 var y2 = off2.top; 
 //距离
 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元素偏移量[Width | Height | Top | Left]属性

b 问题）：



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



  //右下角
 var x1 = off1.left + off1.width; 
 var y1 = off1.top + off1.height; 
 //右上角
 var x2 = off2.left + off2.width; 
 var y2 = off2.top; 
  

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



编辑更新为更标准的getOffset函数。如果你想得到真正的肛门，你可能还必须添加document.documentElement.client [Left / Top]，并走偏移父窗口树，但我认为getBoundingClientRect（）和window.page [X / Y]偏移足够像这样的例子。




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?

解决方案

http://jsfiddle.net/cnmsc1tm/

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

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

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.

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.

这篇关于如何在两个div之间画一条线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！