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