Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.05.2015, 09:55
Новичок на форуме
Отправить личное сообщение для NC22 Посмотреть профиль Найти все сообщения от NC22
 
Регистрация: 06.03.2011
Сообщений: 2

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

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

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

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

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

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

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

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

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

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

GitHub, документация
Ответить с цитированием
  #2 (permalink)  
Старый 16.05.2015, 19:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

NC22,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML5 Canvas. Поворот изображения Valdemor Элементы интерфейса 3 29.04.2013 18:12
HTML5 Canvas не перерисовывает egreek Общие вопросы Javascript 11 22.02.2013 17:37
html5. Canvas Valdemor (X)HTML/CSS 2 25.08.2012 00:26
Canvas html5 Иваннн Оффтопик 9 16.01.2012 00:41
Canvas замена цвета области, ограниченной другим цветом Nickolac Элементы интерфейса 3 26.03.2011 16:20