thehighhomie
@thehighhomie

Преобразование угла (0-360) в точки x1,y1,x2,y2 и обратно?

Подключаю колорпикер к канвасу, мне нужно выставлять цвета и градиенты объектам канваса.

Использую фреймворк fabric.js. Пример установки градиента на объект: fabricjs.com/fabric-intro-part-2#gradients

Градиент начинается из центра объекта.

В из колорпикера я получаю значение цветов и угла. Значение угла в градусах, от 0 до 360.

У меня проблема с перегонами значений из угла в точки x1,y1,x2,y2 и обратно.
Когда я получаю значение угла, я могу преобразовать его в значения x1,y1,x2,y2 следующим образом

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


Как обратно для колорпикера получить значение угла из x1, y1, x2, y2 я не могу понять.

Может по другому нужно формулы написать и для преобразования в x1, y1, x2, y2 и обратно?
  • Вопрос задан
  • 140 просмотров
Решения вопроса 1
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
Исправил под Вашу ситуацию

// получаем угол в радианах
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: немного теории на примерах

преобразование декартовых координат в полярные
есть некая точка, заданная координатами x,y в декартовой системе координат. для вычисления ее полярных координат используем формулы
// угол между осью 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) );


преобразование полярных координат в декартовы
есть некая точка, заданная координатами angle, radius в полярной системе координат. для вычисления ее декартовых координат используем формулы
// угол angle задан в радианах
var x = radius*Math.cos(angle); 
var y = radius*Math.sin(angle);


векторные преобразования (самая малость)
вариант 1. есть некий отрезок (вектор) заданный декартовыми координатами точек (начала и конца) x1,y1 и x2,y2 соответственно.
// угол между осью 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) );


вариант 2. есть некий отрезок (вектор) заданный декартовыми координатами точки (начала) x1,y1 и полярными координатами точки конца - angle и radius, указывающими направление отрезка и его длинну, относительно точки начала x1,y1.
// находим декартовы координаты точки конца. угол angle задан в радианах
var x2 = x1+radius*Math.cos(angle); 
var y2 = y1+radius*Math.sin(angle);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы