Изменение цвета изображения в фабри c. js

Question

Недавно я начал изучать Фабри c. js. Я хочу изменить цвет изображения, выбрав цвет из палитры цветов.

Я начал с в этом примере . Изучение документации fabri c. js Я сделал вывод (я могу ошибаться), что fabri c использует цветовую модель HSL. Проблема везде, где я ищу, диапазон оттенков задается в диапазоне от 0 до 360 градусов, но фильтр HueRotation в fabri c ожидает, что значения будут находиться в диапазоне от -1 до 1. Чтобы решить эту проблему, я вычислил sin оттенка, чтобы привести его между -1 и 1, но это все вместе меняет цвет.

Было бы замечательно, если бы кто-то указал на то, что мне не хватает. Я использую этот код для преобразования HEX в HSL. Единственная разница в том, что я вычисляю грех оттенка на Math.sin(h * Math.PI/180), чтобы получить его в диапазоне от -1 до 1.

Answer 1

Если эта библиотека ожидает нормализованный диапазон, эквивалентный [-180º, 180º] или [-π, π], вы не можете разрешить ее с помощью синуса или косинуса. Обе функции могут давать один и тот же результат для разных углов (sin (45) == sin (135)), в то время как эти углы представляют разные оттенки (желтый и светло-зеленый).

Вы можете преобразовать свой ввод в [-180º , 180º] сначала диапазон:

hue = hue % 360; //handle inputs greater than 360 degrees
let displacedHue = (hue > 180) ? hue - 360 : hue

Затем вы нормализуете его до [-1, 1]:

let normalizedHue = displacedHue/180