Как работают не-HTML5 JavaScript RGB палитры цветов? - PullRequest
Новая
       2

Как работают не-HTML5 JavaScript RGB палитры цветов?

2 голосов
/ 29 декабря 2011

Я уже спросил , как работают палитры цветов HSV, теперь я хотел бы узнать, как работают палитры цветов RGB с JavaScript. Те, которые не используют HTML5 Canvas API. Может ли кто-нибудь объяснить мне концепцию, стоящую за ними?

Вот пример того, что я имею в виду: http://www.eyecon.ro/colorpicker/

Примечание: я не ищу готовых к использованию палитр цветов jQuery. Я хочу разработать свой собственный в учебных целях! JQuery для решения хорошо, хотя!

1 Ответ

4 голосов
/ 29 декабря 2011

Предполагая, что вы хотите выбрать значения RGB в диапазоне от 0 до 255, аналогично примеру, на который вы ссылаетесь, вот как я бы подошел:

  • Создание 1 статического изображения (1x256 пикселей), содержащего«Радужный градиент», показанный на ползунке справа
  • Создание 1 статического наложенного изображения RGBA размером 256x256 пикселей следующим образом
    • вверху слева: R = 1 G = 1 B = 1 A =1
    • вверху справа: R = 0 G = 0 B = 0 A = 0
    • внизу слева: R = 0 G = 0 B = 0 A = 1
    • внизусправа: R = 0 G = 0 B = 0 A = 1
  • Используйте первое изображение в качестве фона для ползунка.Он должен генерировать цвет, который будет отображаться в верхнем левом углу палитры цветов.Используйте координаты мыши, чтобы найти фактическое значение Y для цвета
  • , создайте div "background" (256x256 px), для которого выбран цвет с помощью ползунка.Используйте второе статическое изображение, как на оверлейном div поверх него.Со значениями альфа он должен дать вам белый и 2 черных угла и один угол нужного вам цвета.
  • используйте координаты мыши в этом квадрате.Цвет должен быть рассчитан.

Я оставляю создание формул и изображений для вас.:)

...