How to rotate a div using two coordinate points in JavaScript?

Question

I use div to create lines, reducing their width. I have two coordinates of random points, and I want to draw a line between them using a div. However, creating a div requires only one point coordinate, as well as their width and height, and the result is always a vertical div. Is there a way to rotate a div to join two random points? I tried the rotate function, but it uses the specified angle. Here is the code I use to create the div:

function creatediv(id, width, height, left, top, opacity) 
{ 
    var newdiv = document.createElement('div'); 
    newdiv.setAttribute('id', id);  

    newdiv.style.width =  width + "px";     
    newdiv.style.height = height + "px";     

    newdiv.style.position = "absolute";         
    newdiv.style.left = left + "px";         
    newdiv.style.top = top + "px";  

    newdiv.style.background = "red";    
    newdiv.style.opacity = opacity;
    //newdiv.style.transform = "rotate(37deg)";
    document.body.appendChild(newdiv); 

}

Run codeHide result

Answer 1

For two points aand? bhaving x ycoordinates

Math.hypot(by-ay, bx-ax)
Math.atan2(by-ay, bx-ax) * 180 / Math.PI;

div top,left a.
transformOrigin left 50%, div -:

function creatediv(id, ax,ay, bx,by, size, opacity, color) { 

    var length = Math.hypot(by-ay, bx-ax),
        deg    = Math.atan2(by-ay, bx-ax) * 180 / Math.PI;

    var newdiv = document.createElement('div'); 
    newdiv.setAttribute('id', id);  
    newdiv.style.width =  length + "px";     
    newdiv.style.height = (size||2) + "px";  
    newdiv.style.left = ax + "px";   
    newdiv.style.top = ay + "px";   
    newdiv.style.background = color || "red";    
    newdiv.style.opacity = opacity || 1;
    newdiv.style.transformOrigin = "left 50%";
    newdiv.style.transform = "rotate("+ deg +"deg)";
    newdiv.style.position = "absolute";

    document.body.appendChild(newdiv); 

}


creatediv("a", 20, 20, 200, 80);

Hide result

:

function creatediv(id, ax,ay, bx,by, size, opacity, color) { 

  var length = Math.hypot(by-ay, bx-ax),
      deg    = Math.atan2(by-ay, bx-ax) * 180 / Math.PI,
      newdiv = document.createElement('div'),
      css    = {
        width: length + "px",
        height: (size||2) + "px",
        left: ax + "px",
        top: ay + "px",
        background: color || "red",
        opacity: opacity || 1,
        transformOrigin: "left 50%",
        transform: "rotate("+ deg +"deg)",
        position: "absolute"
      };
      
  for(var s in css) newdiv.style[s] = css[s];
  document.body.appendChild(newdiv); 
}

creatediv("a",  0,30,   10,10);
creatediv("b",  10,10,  60,80,  5,  0.3,  "#0bf");
creatediv("c",  60,80,  70,50);
creatediv("d",  70,50,  150,90, null, null, "gold");

Hide result

Answer 2

:

   
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 10);
var point1x = 65;
var point1y = 45;
var point2x = 80;
var point2y = 90;

var height = Math.sqrt(Math.pow((point2x-point1x),2) + Math.pow((point2y-point1y),2));
var angleDeg = Math.atan2(point2y - point1y, point2x - point1x) * 180 / Math.PI;

newdiv.style.width = 30 + "px";
newdiv.style.height = height + "px";
newdiv.style.position = "absolute";
newdiv.style.left = point1x + "px";
newdiv.style.top = point1y + "px";
newdiv.style.borderColor = "black";
newdiv.style.borderWidth = "1px";
newdiv.style.borderStyle = "solid";
newdiv.style.background = "red";
newdiv.style.opacity = 5;
  
newdiv.style.transform = "rotate("+angleDeg+"deg)";
document.body.appendChild(newdiv);

Hide result

, , , . .

: , . , . , - .