html draw line div code example

Example: html draw line div

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

}