現在、あるdivの右下隅と別のdivの右上隅の間に斜めの線を引こうとしています。可能であれば、jQueryなしでそれをしたいです。これは可能ですか?
IE8以下ではCSSの制限により動作しません。
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;
}
編集 (同じ問題を持つ他の人のために)。
例えば、右上と右下の 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で十分だと思います。
jQを使わずにできる方法がある。
1.offsetを使ってdivの位置を求めます。
2.2. 勾配を求める。
3.ループの中で傾きを使って、開始位置から終了位置まで 1x1px
の点を描画する。