Làm cách nào để vẽ một đường thẳng giữa hai div?

Question

Tôi hiện đang cố gắng vẽ đường chéo giữa góc dưới cùng bên phải của một div tới góc trên cùng bên phải của một div khác. Nếu có thể, tôi muốn làm điều đó mà không cần jQuery. Điều này có thể không?

Answer 1

http://jsfiddle.net/cnmsc1tm/

này sẽ không làm việc với IE8 hoặc dưới vì những hạn chế 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; 
} 

• The Distance Formula
• Tìm Center Of Two Điểm
• Tìm góc giữa hai điểm
• CSS transform: Xoay
• HTML Yếu tố bù đắp [Width | Chiều cao | Lên trên | Left] properties

Chỉnh sửa (cho o Thers với cùng một vấn đề):

Nếu bạn cần, ví dụ, tạo ra một dòng từ hai góc mà không phải là phía trên bên phải và divs dưới bên phải, đi đến phần này của mã:

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

nơi bạn thấy + off1.width và + off1.height, điều đó có nghĩa là mã đang tính vị trí của phần dưới cùng hoặc bên phải của div. Hãy xóa + off1.width hoặc + off1.height để lấy bên trái hoặc đầu div.

EDIT được cập nhật thành hàm getOffset chuẩn hơn. Nếu bạn muốn thực sự hậu môn, bạn có lẽ cũng phải thêm document.documentElement.client [Left/Top] và đi bộ cây offsetParent, nhưng tôi nghĩ rằng getBoundingClientRect() và window.page [X/Y] Offset là đủ cho một ví dụ như thế này

Answer 2

Có sử dụng hình ảnh làm đường viền dưới cùng cho lớp div đó không? Nếu đường chéo của bạn luôn luôn có cùng kích thước/màu sắc, v.v ... đó sẽ là một tùy chọn không phải jQuery bạn có thể sử dụng.

Answer 3

Có cách để thực hiện điều đó mà không cần jQ.

1. Tìm vị trí của divs bằng cách sử dụng bù trừ.
2. Tìm độ dốc
3. vẽ 1x1px điểm từ vị trí bắt đầu đến kết thúc bằng cách sử dụng độ dốc trong vòng lặp của bạn.