css line between two divs code example
Example: draw line between two div css
class CreateLine {
line;
constructor(element, element2) {
let el1 = this.GetCoord(element);
let el2 = this.GetCoord(element2);
let x1 = el1[0];
let y1 = el1[1];
let x2 = el2[0];
let y2 = el2[1];
let length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
let cx = ((x1 + x2) / 2) - (length / 2);
let cy = ((y1 + y2) / 2) - (1 / 2);
let deg = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);
let line = document.createElement("div");
line.style.left = cx + "px";
line.style.top = cy + "px";
line.style.width = length + "px";
line.style.transform = "rotate(" + deg + "deg)";
this.line = line;
}
GetLine() {
return this.line;
}
GetCoord(element, top = true) {
let x = element.offsetLeft;
let y = element.offsetTop;
return [x, y];
}
}