Преобразование угла (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 и обратно?

Предыдущий
вопрос Следующий
вопрос