Saat ini saya sedang mencoba menggambar garis diagonal antara sudut kanan bawah satu div ke sudut kanan atas div lainnya. Jika memungkinkan, saya ingin melakukannya tanpa jQuery. Apakah hal ini memungkinkan?
Ini tidak akan berfungsi dengan IE8 atau di bawahnya karena keterbatasan 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;
}
Edit (untuk orang lain dengan masalah yang sama):
Jika Anda perlu, misalnya, membuat garis dari dua sudut yang bukan div kanan atas dan kanan bawah, buka bagian kode ini:
// 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;
di mana Anda melihat + off1.width
dan + off1.height
, itu berarti kode tersebut sedang menghitung posisi bagian bawah atau kanan div. Hapus + off1.width
atau + off1.height
untuk mendapatkan bagian kiri atau atas dari div.
EDIT diperbarui ke fungsi getOffset yang lebih standar. Jika Anda ingin benar-benar analitis, Anda mungkin juga harus menambahkan document.documentElement.client[Left/Top] dan menelusuri pohon offsetParent, tapi saya pikir getBoundingClientRect() dan window.page[X/Y] sudah cukup untuk contoh seperti ini.
Ada cara untuk melakukannya tanpa jQ.
1x1px
dari posisi awal hingga akhir menggunakan kemiringan dalam loop Anda.