Создайте палитру цветов, похожую на Photoshop, используя Javascript и HTML Canvas - PullRequest
12 голосов
/ 04 января 2012

Я совсем не разбираюсь в компьютерной графике и мне нужно создать палитру цветов в качестве инструмента javascript для встраивания в HTML-страницу.

Во-первых, и, глядя на фотошоп, я подумал оПалитра RGB как трехмерная матрица.Моя первая попытка заключалась в следующем:

<script type="text/javascript">
        var rgCanvas = document.createElement('canvas');
        rgCanvas.width = 256;
        rgCanvas.height = 256;
        rgCanvas.style.border = '3px solid black';
        for (g = 0; g < 256; g++){
            for (r = 0; r < 256; r++){
                var context = rgCanvas.getContext('2d');
                context.beginPath();
                context.moveTo(r,g);
                context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)';
                context.lineTo(r+1,g+1);
                context.stroke();
                context.closePath();
            }
        }

        var bCanvas = document.createElement('canvas');
        bCanvas.width = 20;
        bCanvas.height = 256;
        bCanvas.style.border = '3px solid black';       
        for (b = 0; b < 256; b++){
            var context = bCanvas.getContext('2d');
            context.beginPath();
            context.moveTo(0,b);
            context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')';
            context.lineTo(20, b);
            context.stroke();
            context.closePath();
        }

        document.body.appendChild(rgCanvas);
        document.body.appendChild(bCanvas);
    </script>

это приводит к чему-то вроде
3D RGB color map

Я думаю, что это слишком линейно, по сравнению с теми, что я вижу в Photoshop и навеб.Я хотел бы знать логику, лежащую в основе цветового отображения в сборщике, например: photoshop color picker

Мне не нужны сами алгоритмы, я в основном пытаюсь понять логику.

Спасибо

Ответы [ 4 ]

6 голосов
/ 04 января 2012

Я реализовал палитру цветов на холсте один раз Я сделал это, потому что большинство средств выбора цвета, которые я нашел в Интернете, использовали слишком много статических изображений, и я не хотел вызывать дополнительные запросы.

Генерация цвета основана на записи javascript , которую я нашел. Я просто исправил некоторые ошибки и произвел рефакторинг кода.

Все, что вам нужно сделать, это включить <input type="color-picker" /> в ваш код и вызвать PICKER.bind_inputs() после загрузки DOM.

Вот jsFiddle с моим кодом:

http://jsfiddle.net/mShET/1/

Имейте в виду, что спецификация HTML5 уже поддерживает ввод формы выбора цвета. Но в настоящее время только Opera реализовала это.

3 голосов
/ 04 января 2012

Чтобы ответить на ваш вопрос о логике средства выбора Photoshop: похоже, средство выбора цвета основано на цветовом пространстве HSB.Оттенок (H) выбирается вертикальным ползунком справа, насыщенность (S) выбирается горизонтальной осью области палитры цветов, а яркость (B) выбирается вертикальной осью области палитры цветов.

Цитата из Википедия :

Первоначальное назначение HSL и HSV и аналогичных моделей, а также их наиболее распространенное в настоящее время применение - в инструментах выбора цвета.В простейшем случае некоторые такие палитры цветов предоставляют три ползунка, по одному для каждого атрибута.Большинство, однако, показывают двумерный срез модели, а также ползунок, управляющий тем, какой конкретный срез отображается.

2 голосов
/ 04 января 2012

Смотрите здесь: http://jsfiddle.net/maniator/GXuqb/2/

Использование ColorPicker

См. Код для этого здесь: http://www.eyecon.ro/colorpicker/

0 голосов
/ 25 октября 2013

Я создал проект JavaScript «MasterColorPicker», который имеет 4 разных палитры цветов на основе холста.Мне потребовалось несколько месяцев, чтобы прочитать статьи из Википедии о «Цветном колесе», а также о «HSB» и «HSL» и «RGB», а также поработать с алгоритмами напрямую, пока я создавал каждый палитру цветов с нуля.В этом проекте я сосредоточился на том, чтобы привести ЛОГИКУ этих цветовых пространств в простой для понимания и использования формат.Я надеюсь, что простое использование проекта поможет вам понять каждое цветовое пространство.Что касается отображения из одного пространства в другое, например, отношения между RGB и HSL, вы должны действительно расширить свое трехмерное воображение, чтобы начать это.Вот где я надеюсь, что этот проект может помочь.Но на самом деле, не бейте голову об стену годами, пытаясь понять эти алгоритмы.Помимо Википедии, см .:

http://www.easyrgb.com/index.php?X=MATH

Все формулы, которые вы можете переварить.ЗА ИСКЛЮЧЕНИЕМ: Википедия говорит о «цветности» в одной из своих статей и говорит не путать ее с «насыщенностью».Мой проект MasterColorPicker добавляет еще одно цветовое пространство, оттенок-серый-серый (HCG), а исходный код этого проекта документирует формулы для преобразования между HCG и RGB.С помощью HCG вы можете найти организацию цветов «Web-Safe», а «RainbowMeistro Color-Picker» в проекте даст вам четкую визуализацию этого цветового пространства.Вы можете попробовать проект и загрузить файлы JavaScript / HTML для использования в собственной системе (с открытым исходным кодом и бесплатно) отсюда:

http://softmoon -webware.com / MasterColorPicker_instructions.php

Мир!

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