How to calculate the angle of inclination of a straight line in degrees?

Question

How to calculate the angle of inclination of a straight line in degrees?

There are two <div>, they have position: absolute

x1 = 50px, y1 = 150px;
x2 = 100px, y2 = 200px;

Distance between them -

I want to set the angle (using transform: rotate), and then draw a line between the points.
The coefficient of the angle of inclination of the straight line is equal to the tangent of the angle(the opposite cathet is divided by the adjacent cathet in a right triangle)
The formula that can be used to calculate the coefficient of the angle of inclination of a straight line: (y2-y1)/(x2-x1)
How do I set this angle in degrees?

1

javascript тригонометрия

Author: Михаил Камахин, 2020-01-10

Source

1 answers

score 2 · Accepted Answer

Okay, the corner... here with the positioning after the turn, you need to tinker)
A triangle of dots-lines (in case aliens arrive and disable SVG for us):

let pointSize = 5;

setPoints();
drawLines();

function setPoints(){
  let points = document.querySelectorAll('.circle');
  points.forEach( elem => {
    let [x, y] = elem.dataset.coors.split(",");
    // (?) Google → Деструктурирующее присваивание.
    
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    elem.style.width = elem.style.height = pointSize + 'px';
  });
}

function drawLines(){
  let lines = document.querySelectorAll('.line');
  let PI = Math.PI;
  
  lines.forEach( elem => {
    let [x1, y1, x2, y2] = elem.dataset.points.split(/,|\s/).map(Number);
    
    // .map(Number) → map получает встроенную функцию Number(), и из полученных строк
    // от dataset, сразу делает число, чтобы не было сюрпризов "1" + "1" = "11" 
    
    let lineLength = ( (x2 - x1)**2 + (y2 - y1)**2 ) ** 0.5;
    let angle = Math.atan( (y2-y1) / (x2-x1) ) * 180 / PI; // Искомый угол в градусах
    
    elem.style.width = lineLength + 'px';
    elem.style.transform = `rotate(${ angle }deg)`; // (?) → Интерполяция строк
    elem.style.top = ( y1 + (y2-y1)/2 + 2 ) + 'px';
    
    let cos = Math.cos( angle * PI / 180 );
    let x0 = Math.min(x1, x2);
    elem.style.left = ( x0 + lineLength * (cos - 1)/2 + pointSize/2 ) + 'px'; // (*)
  });
}

.svg {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid red;
}

.circle {
  position: absolute;
  background-color: red;
  border-radius: 50%;
}

.line {
  position: absolute;
  height: 1px;
  background-color: #123;
}

<div class="svg">
  <div class="circle" data-coors="200,50"></div>
  <div class="circle" data-coors="250,100"></div>
  <div class="circle" data-coors="50,200"></div>
  
  <div class="line" data-points="200,50 250,100"></div>
  <div class="line" data-points="250,100 50,200"></div>
  <div class="line" data-points="50,200 200,50"></div>
</div>

(*) x0 + lineLength * (cos - 1)/2 + pointSize/2 - x0 and pointSize are clear - the necessary shift on the left, so that the rest is already calculated "from scratch". And where it came from lineLength * (cos - 1)/2 I haven't figured out how to explain it yet) It was clear that something related to sin or cos-I twisted and turned different sticks for an hour, using the poke method found)