0

Hellow it possible get angle two lines in react js, using svg, without using the svg set attribute?

already tried several tutorials of the stack but none really returned the angle between the two lines and yes only the angle in which the line is, I tried this.

findAngle(p0,p1,p2) {
  var a = Math.pow(10,2) + Math.pow(100,2),
      b = Math.pow(10,2) + Math.pow(10,2),
      c = Math.pow(10,2) + Math.pow(70,2);
  var aa = Math.acos( (a+b-c) / Math.sqrt(4*a*b) );

  console.log(aa);

}

obs: these values are in my two lines.

Evgeny Timoshenko
  • 3,119
  • 5
  • 33
  • 53
Host Type
  • 11
  • 3

1 Answers1

0

Based on this answer, you want something like this:

// helper function: make a point
function point(x,y){
   return {'x':x,'y':y};
}

// helper function: get distance between points a and b (by Pythagoras)
function d(a,b) {
   return Math.sqrt(d2(a,b));
}

// helper function: get square of distance between points a and b
function d2(a,b) {
   return (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y);
}

// helper function: convert radians to degrees
function rad2deg(angleInRadians) {
   return angleInRadians/(Math.PI/180);
}

// get the angle in degrees between ab and ac, using the cosine rule:
function angle_deg(a,b,c) {
   return rad2deg(Math.acos((d2(a,b) + d2(a,c) - d2(c,b)) / (2 * d(a,b) * d(a,c))));
}

p0 = point(0,0);
p1 = point(1,0);
p2 = point(0,1);

console.log(angle_deg(p0,p1,p2)); // 90
Richard Inglis
  • 5,888
  • 2
  • 33
  • 37
  • what I am not understanding is that ai has only a, b and c, my lines would have in the case 8 positions, x1, x2, y1, y2 on the first and second lines, x1 and y1 on the first line would always be the same position as x1 and y2 of the second, what do I do with the other 4 positions? – Host Type May 24 '18 at 13:19
  • `a`, `b` and `c` are **points**, ie objects with an `x` and `y` property. For example we can create a point at (10,0) using `p1 = {x:10,y:0};` – Richard Inglis May 24 '18 at 13:25