Преобразование угла (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 и обратно?
Преобразование угла (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 и обратно?
Использую фреймворк 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 и обратно?
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки в течение 1 года
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Поможем написать учебную работу
Для преобразования точек x1, y1, x2, y2 обратно в угол можно воспользоваться функцией Math.atan2(y, x), которая возвращает угол, заданный отношением указанных координат.
В вашем случае, если у вас есть значения x1, y1, x2, y2, можно воспользоваться следующим образом:
const x1 = ...; // значение x1const y1 = ...; // значение y1
const x2 = ...; // значение x2
const y2 = ...; // значение y2
const angleRad = Math.atan2(y2 - y1, x2 - x1);
let angleDeg = angleRad * (180 / Math.PI);
if (angleDeg < 0) {
angleDeg += 360;
}
Теперь переменная angleDeg содержит значение угла в градусах, которое можно использовать для установки градиента на объект.