2つのdivの間に線を描くにはどうすればよいですか？

Question

私は現在、あるdivの右下隅と別のdivの右上隅との間に対角線を描画しようとしています。可能であれば、私はjQueryなしでやりたいと思います。これは可能ですか？

Answer 1

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

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
2点間の角度を見つける2点
• の中心を見つける：回して
• HTML要素は、[幅をオフセット|高|トップ|左]特性

編集（o同じ問題を持つその他）：

あなたは、たとえば、コードのこのセクションに移動し、右上と右下のdivはない2つのコーナーからのラインを作成する必要がある場合：

// 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の左または上部を取得します。

EDITが、より標準的なgetOffset関数に更新されました。本当に肛門を取得したいのであれば、おそらくdocument.documentElement.client [Left/Top]を追加してoffsetParentツリーを歩かなければならないでしょうが、getBoundingClientRect（）とwindow.page [X/Y] Offsetで十分ですこのような例です。

Answer 2

問題のあるdivクラスの下の境界線として画像を使用していますか？あなたの対角線が常に同じサイズ/色などでなければならない場合、それは非jQueryオプションになります。

Answer 3

jQなしで行う方法があります。

1. オフセットを使用してdivの位置を探します。
2. ループの勾配を使用して、勾配を見つけます。
3. 1x1px開始点から終了点を描画します。