Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Виджет выбора цвета на html5 canvas (https://javascript.ru/forum/project/55831-vidzhet-vybora-cveta-na-html5-canvas.html)

NC22 16.05.2015 09:55

Виджет выбора цвета на html5 canvas
 

Цветовое кольцо (оттенок-насыщеность+яркость - hsv)

Насыщенность и яркость цвета выбираются при помощи вписанного в кольцо треугольника, либо квадрата в зависимости от настроек вывода.

Изначально видж. задумывался как плагин для фотошопа т.к. хотелось "так же как в той рисовалке", но для начала решил закончить версию для веба, т.к. документация API фотошопа весьма специфична и дело затянулось. (если кто работал, просьба отписать в приват)

Пример инициализации виджета
new KellyColorPicker({
        place : 'color-picker', // id или обект элемент-контейнер, либо canvas
        input : 'color', // необязательная привязка к полю ввода
    });

Подробное описание, примеры входных параметров и возможных событий см. на странице документации.

Виджет синхронизирует значение цвета с hex представлением в поле ввода (если задано). Позиционирование независимо от расположения поля ввода.

Если кто-нибудь соизволит протестировать, просьба отписать о работоспособности в разных браузерах. В том числе и мобильных (на "яблоках" не было возможности проверить например). Предложения \ замечания приветствуются.

пример 1 (привязка к полю ввода), пример 2 (удаление и создание на рандоме), пример 3 (градиент по двум цветам)

Если кого-то заинтересовало в качестве готового решения для каких-либо целей, скачать актуальную версию можно на GitHub'е

GitHub, документация

рони 16.05.2015 19:40

NC22,
:victory:


Часовой пояс GMT +3, время: 11:04.