Convert angle (0-360) to points x1,y1,x2,y2 and back?

Question

JavaScript

I connect the colorpicker to the canvas, I need to set colors and gradients to the canvas objects.
I use fabric.js framework. An example of setting a gradient on an object: fabricjs.com/fabric-intro-part-2#gradients
The gradient starts from the center of the object.
In from the colorpicker I get the value of colors and angle. Angle value in degrees, from 0 to 360.
I have a problem with moving values ​​from angle to points x1,y1,x2,y2 and back.
When i get the angle value i can convert it to x1,y1,x2,y2 values ​​like this

var obj= new fabric.Rect({
  left: 100,
  top: 100
});

// у меня получилось перевести только angle в x1, y1, x2, y2

// angle - это значение, полученное из колорпикера: угол в градусах, допустим 33

const anglePI = -angle * (Math.PI / 180)

obj.setGradient('fill', {
  x1: (Math.round(50 + Math.sin(anglePI) * 50) * obj.width) / 100,
  y1: (Math.round(50 + Math.cos(anglePI) * 50) * obj.height) / 100,
  x2: (Math.round(50 + Math.sin(anglePI + Math.PI) * 50) * obj.width) / 100,
  y2: (Math.round(50 + Math.cos(anglePI + Math.PI) * 50) * obj.height) / 100,
  colorStops: {
    // тут уже идут цвета
  }
})

x1 = (Math.round(50 + Math.sin(anglePI) * 50) * obj.width) / 100,
y1 = (Math.round(50 + Math.cos(anglePI) * 50) * obj.height) / 100,
x2 = (Math.round(50 + Math.sin(anglePI + Math.PI) * 50) * obj.width) / 100,
y2 = (Math.round(50 + Math.cos(anglePI + Math.PI) * 50) * obj.height) / 100

I can't figure out how to get the angle value from x1, y1, x2, y2 back for the colorpicker.
Maybe you need to write formulas differently to convert to x1, y1, x2, y2 and vice versa?

Answer 1

Corrected for your situation

// получаем угол в радианах
var angle = Math.atan2((x1*100/obj.width)-50,(y1*100/obj.height)-50); 

// или в градусах
var angle = 180*Math.atan2((x1*100/obj.width)-50,(y1*100/obj.height)-50)/Math.PI;

PS: a bit of theory with examples The
is a certain point given by x,y coordinates in the Cartesian coordinate system. to calculate its polar coordinates, we use the formulas

// угол между осью X и отрезком, заданным координатами (0,0)-(x,y)
var angle = Math.atan2(x,y); // в радианах
var angle = 180*Math.atan2(x,y)/Math.PI; // в градусах

// длинна отрезка (сежду точкми 0,0 и x,y)
var radius = Math.sqrt( Math.pow(x, 2) + Math.pow(y, 2) );

is a certain point, given by the coordinates angle, radius in the polar coordinate system. to calculate its Cartesian coordinates, we use the formulas

// угол angle задан в радианах
var x = radius*Math.cos(angle); 
var y = radius*Math.sin(angle);

option 1. there is a certain segment (vector) given by Cartesian coordinates of points (beginning and end) x1,y1 and x2,y2 respectively.

// угол между осью X и отрезком, заданным координатами (x1,y1)-(x2,y2), он же направление вектора.
var angle = Math.atan2(x2-x1,y2-y1); // в радианах
var angle = 180*Math.atan2(x2-x1,y2-y1)/Math.PI; // в градусах

// длинна отрезка, заданного координатами (x1,y1)-(x2,y2), он же длина (размер) вектора
var radius = Math.sqrt( Math.pow(x2-x1, 2) + Math.pow(y2-y1, 2) );

option 2. there is a certain segment (vector) specified by the Cartesian coordinates of the point (beginning) x1,y1 and the polar coordinates of the end point - angle and radius, indicating the direction of the segment and its length, relative to the start point x1,y1.

// находим декартовы координаты точки конца. угол angle задан в радианах
var x2 = x1+radius*Math.cos(angle); 
var y2 = y1+radius*Math.sin(angle);