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

Question

[thehighhomie]

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

Использую фреймворк 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 и обратно?

Comments

[Евгений Шатунов]

thehighhomie , думаю, понятнее будет если ты снабдишь свой вопрос поясняющими изображениями того, что у тебя есть и что тебе хочется получить.
Сейчас смысл этих самых x1,y1,x2,y2 не читается никак, равно как и непонятно, откуда у тебя берется угол (0-360).

[thehighhomie]

Евгений Шатунов, сейчас поправлю, спасибо

[thehighhomie]

Евгений Шатунов, так лучше?

[Евгений Шатунов]

thehighhomie , да не, все так же ничего не понятно.
Ты, наверное, что-то вот такое хочешь сделать?


В таком случае лучше будет посмотреть на барицентрические координаты.

Answer 1

[Роман]

Исправил под Вашу ситуацию

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

Comments

[thehighhomie]

возможно вам также понадобится вычисление длины отрезка между точками x1,y1 и x2,y2
// в градусах
var length = Math.sqrt( Math.pow(x2-x1, 2) + Math.pow(y2-y1, 2) );

спасибо), а в каких случаях это может понадобиться?

[Роман]

thehighhomie, честно говоря не знаю зачем оно может понадобится при решении Вашей задачи, так как мне до конца не ясно что вы пытаетесь сделать. Данная формула является одним из звеньев преобразования декартовых координат в полярные, так же она используется для расчета длинны вектора, заданного координатами точек в декартовом пространстве.

В любом случае не торопитесь применять формулы, возможно расчет необходимо производить по другому. Напишите пожалуйста, что обозначают точки x1,y1 и x2,y2 и угол anglePI

[thehighhomie]

Роман, я как раз сейчас пробую, точки x1, y1, x2, y2 - это углы (topleft, topright, bottomright, bottomleft)

присвоение переменной anglePI:

// angle это угол в градусах
const anglePI = -angle * (Math.PI / 180)

это мой недочет, собирался этот код в пример вставить, но упустил, сейчас исправлю, спасибо!

[Роман]

thehighhomie, а angle откуда берется? в чем его смысл? Это угол между чем и чем?

x1, y1, x2, y2 - это углы (topleft, topright, bottomright, bottomleft)

углы чего? объекта на канвасе?

[thehighhomie]

Роман,
angle - угол градиента из колорпикера, может быть в диапазоне 0-360.
x1, y1, x2, y2 - угловые точки объекта на канвасе

[thehighhomie]

Роман, так, вы застали меня в расплох, оказалось как я понял, что x1, y1, x2, y2 это и в правду похоже на точки объекта, но это как я понял внутренние координаты в объекте для градиента

вот пример:
fabricjs.com/fabric-intro-part-2#gradients

я пишу на fabricjs но в примере все понятно

[thehighhomie]

Роман,

В любом случае не торопитесь применять формулы, возможно расчет необходимо производить по другому.

Вы были правы, не получается по этим формулам, угол сбивается

[thehighhomie]

Роман, я исправил вопрос, может вам понятнее будет? может вообще по другому нужно описать формулу, которую я использовал для преобразования градусов в x1, y1, x2, y2, чтобы ваша формула для обратного преобразования сработала?

[Роман]

thehighhomie, я понял что ничего не понял:)))

Не буду сейчас допытывать Вас вопросами типа:
1. каким образом, от угла на колорпикере зависят координаты точек (x1, y1) (x2, y2)?
2. почему в формулах для получения координат вы умножаете синусы и косинусы угла на * 50
3. и так далее.

Просто дам общую информацию по преобразованиям из полярных координат в декартовы:

преобразование декартовых координат в полярные
есть некая точка, заданная координатами 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);

[Роман]

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

thehighhomie, так как вы используете округление, то обратно, тот же угол вы получить не сможете, только какой то угол, достаточно близкий к исходному, но все же отличающийся от него.

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

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

[thehighhomie]

Роман,

1. каким образом, от угла на колорпикере зависят координаты точек (x1, y1) (x2, y2)?
2. почему в формулах для получения координат вы умножаете синусы и косинусы угла на * 50

к примеру при таких параметрах, градиент растягивается на всю ширину объекта:

{
  x1: 0,
  y1: 0,
  x2: circle.width,
  y2: 0
}

то есть это похоже, что ширина градиента идет от x1 до x2, похоже на углов в 90 градусов
если углол изменить, то x2 уже будет другим, и в зависимости от угла, другие точки тоже могут измениться.

на счет умножения синусов и косинусов угла на * 50 - это я в интернете формуру нашел, сам я не силет в математике и геометрии, так что я не знаю, но это работает. к сожалению решить проблему с преобразованием обратно я не смог

[Роман]

thehighhomie, чуть выше, дал ответ как получить угол из x1,y1

[thehighhomie]

Роман,

так как вы используете округление, то обратно, тот же угол вы получить не сможете, только какой то угол, достаточно близкий к исходному, но все же отличающийся от него.

так может мою формулу выкинуть и другую подставить? чтобы ваши формулы работали? :D

[Роман]

thehighhomie, погрешность между исходным углом и его вычисленным значением будет минимальной. Так же вы можете попробовать убрать округление, но я не знаю насколько критично, если х1,y1 будет не целым числом.

var x1 = (50 + Math.sin(anglePI) * 50) * obj.width / 100;
var y1 = (50 + Math.cos(anglePI) * 50) * obj.height / 100;


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

[thehighhomie]

Роман, я тоже ничего не понял)) ну ладно, все равно вы дали больше инфы чем нужно. буду разбираться. спасибо!)

[Роман]

thehighhomie, вы скажите, последний вариант получения угла дает удовлетворительный результат?

[thehighhomie]

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

[Роман]

значения угла получаются такие же, но отрицательные

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

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

сбивается значение градусов, примерно на десятые

попробуйте все же убрать округление, думаю что obj.setGradient не требует только целочисленных значений

var x1 = (50 + Math.sin(anglePI) * 50) * obj.width / 100;
var y1 = (50 + Math.cos(anglePI) * 50) * obj.height / 100;

[thehighhomie]

Роман, с минусом я тоже догадался), на счет округления поясните пожалуйста, что вы имеете ввиду, под "убрать округление", где?

[Роман]

thehighhomie, с округлением:

var x1 = (Math.round(50 + Math.sin(anglePI) * 50) * obj.width) / 100;
var y1 = (Math.round(50 + Math.cos(anglePI) * 50) * obj.height) / 100;

без округления:

var x1 = (50 + Math.sin(anglePI) * 50) * obj.width / 100;
var y1 = (50 + Math.cos(anglePI) * 50) * obj.height / 100;

[thehighhomie]

Роман, а, все, извиняюсь) возможно кстати и сработает, логично)

[Роман]

thehighhomie, ну и по поводу самих этих строк.

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: {
    // тут уже идут цвета
  }
})

я написал бы их так

const anglePI = angle * Math.PI / 180;

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

и соответственно расчет угла получился бы:

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

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

[thehighhomie]

Роман, вот это мне больше нравится, чем то, что я написал) я отпишу о результате) после обеда попробую. спасибо еще раз!