Bagaimana cara menarik garis di antara dua divisi?

Question

Lebih

Sumber Tidak AMP-versi Sunting

Bagaimana cara menarik garis di antara dua divisi?

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?

BalusC

Pertanyaan edit 29 Desember 2011 в 7:38

Pemrograman

javascript html

29 Desember 2011 в 7:17

1 tampilan

user2271253

Sumber Tidak AMP-versi Sunting

Ada cara untuk melakukannya tanpa jQ.

Temukan posisi div Anda menggunakan offset.
Temukan kemiringannya
Gambarkan titik-titik 1x1px dari posisi awal hingga akhir menggunakan kemiringan dalam loop Anda.

Wouter J

Jawaban edit 11 April 2013 в 4:46

2

0

Komentar (0)

Louis Ricci · Accepted Answer · 2011-12-29T20:50:41+00:00

http://jsfiddle.net/cnmsc1tm/

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

Rumus Jarak
Menemukan Pusat Dua Titik
Menemukan Sudut Antara Dua Titik
Transformasi CSS:Rotasi
Properti pergeseran Elemen HTML [Lebar|Tinggi|Top|Kiri]

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.