cyber_ua 3 июл 2012 в 15:58

Как создать свой Color Picker на Javascript?

3 мин

28K

JavaScript*

Recovery Mode

+16

Комментарии 43

Keyten 3 июл 2012 в 16:08

Кстати раньше в colorpicker'ах ставили png-картинку с двумя градиентами (чёрный и белый), а цвет под ней рисовали.

nick4fake 3 июл 2012 в 16:44

colorpicker.com, например.
Когда-то увидев его подумал, что на javascript можно рисовать.

cyber_ua 3 июл 2012 в 16:52

на яваскрипт можно рисовать для этого есть canvas

Keyten 3 июл 2012 в 16:53

Это сейчас. А раньше-то и его не было…

Keyten 3 июл 2012 в 16:54

И ещё SVG.
А для кроссбраузерности есть Dojo Toolkit, в котором есть Flash, Java, Silverlight, Canvas, SVG и VML.

cyber_ua 3 июл 2012 в 16:56

canvas + ExplorerCanvas тоже как вариант кроссбраузерной реализации

Keyten 3 июл 2012 в 21:30

А ещё есть реализация WebGL на Java

olexandr17 3 июл 2012 в 18:47

все гениальное просто. никогда не задумывался об этом :)
у меня была функция рисования градиента
сейчас по вашей схеме нарисовал эту картинку 4 строчками кода:

_holder.graphics.beginFill(0xFF0000);
_holder.graphics.drawRect(0, 0, 200, 200);
DrawUtils.drawLinearGradient(_holder.graphics, [0xFFFFFF, 0xFFFFFF], [1, 0], null, new Rectangle(0, 0, 200, 200), 0);
DrawUtils.drawLinearGradient(_holder.graphics, [0x000000, 0x000000], [0, 1], null, new Rectangle(0, 0, 200, 200), 90);

cyber_ua 3 июл 2012 в 23:57

ну значит не зря я добавил линию на канве=)

hlx 3 июл 2012 в 16:10

Пример то работает, но код вообще не читабельный. Скажите, где вас учили так оформлять код?)

cheremushkin 3 июл 2012 в 16:12

switch (lH){
      
      case 0: R = V; G = t; B = p; break;
            case 1: R = q; G = V; B = p; break;
              case 2: R = p; G = V; B = t; break;
               case 3: R = p; G = q; B = V; break;
                case 4: R = t; G = p; B = V; break;
                  case 5: R = V; G = p; B = q; break;}

Вот это конечно круто. Почему у вас новый case с дополнительным пробелом (а кое-где с доп. табуляцией)? Уровень вложенности одинаковый => отступ тоже одинаковый.

cyber_ua 3 июл 2012 в 16:15

понял, спасибо за совет=)

Keyten 3 июл 2012 в 16:52

И вот это тоже:

S /=100;
            V /=100;
     
           lH = Math.floor(H / 60);
      
              f = H/60 - lH;
                    
                     p = V * (1 - S); 
                     
                    q = V *(1 - S*f);
           
                       t = V* (1 - (1-f)* S);

olexandr17 3 июл 2012 в 18:50

просто вспомнил о кейсах, может кто воспользуется.
меня всегда убивал дополнительный уровень вложенности для многострочных кейсов.
потом как-то, не помню где, попался совет оформлять кейсы вообще с фигурными скобками:

case 0: {
    ...
    break;
}

cyber_ua 3 июл 2012 в 16:13

я в колледже учусь, и нас нечему полезному за 3 года так и не научили. яваскрипт сам учу, а насчет код я пытаюсь с этим бороться =)

Keyten 3 июл 2012 в 21:32

Маленький совет: постарайтесь получше освоить JS прежде чем писать статьи. Так лучше будет, честно.

И ещё. Лучше всего осваивать JS на практике. Самое лучшее здесь: напишите свой jQuery. Очень полезный опыт.

cyber_ua 3 июл 2012 в 16:10

у меня такая же=)я долго мучался что бы от рисовать ее на канве но так и не смог. вот такую картинку я юзаю click me

nick4fake 3 июл 2012 в 16:44

Вы с собой разговариваете? :)

cyber_ua 3 июл 2012 в 16:51

нет я пытался ответить на первый пост но не понятно по каким причинам после нажатия кнопки ответить мои комментарии оказуются в низу(походу кармой не вышел)=)

Bodigrim 3 июл 2012 в 18:45

Однажды в одной далекой-далекой галактике все браузеры будут поддерживать <input type="color" />.
www.w3schools.com/html5/html5_form_input_types.asp

cyber_ua 3 июл 2012 в 19:05

да только есть такой браузер ИЕ ;)
и тут есть хорошая табличка по которой можно понятно что юзать это мы будем не скоро=)

Keyten 3 июл 2012 в 21:33

IE уже не так актуален, как раньше. Про IE6 лично я уже забыл

Dmitry_f 3 июл 2012 в 18:54

А почему-бы вместо канваса для радуги не использовать обычный linear-gradient в css?

cyber_ua 3 июл 2012 в 19:03

потому что благодаря гугл есть такая библиотека ExplorerCanvas и она делает canvas относительно кроссбраузерным, а linear-gradient это css3 (а css3 пока не очень кроссбраузерный)

Dmitry_f 3 июл 2012 в 19:19

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

cyber_ua 3 июл 2012 в 19:23

можно, но тут решать уже вам.
Просто я делаю рисовалку на канве и мне по любому пройдется подключить ExplorerCanvas (поэтому мне выгодней использовать канву)

cyber_ua 3 июл 2012 в 19:27

да и еще я подумал что по теме будет показать как от рисовать шкалу на канве ~~картинку вставить любой дурак сможет~~

Dmitry_f 3 июл 2012 в 19:31

Пожалуй, сделать такую картинку не намного проще, чем запрограммировать.

Dmitry_f 3 июл 2012 в 19:28

Раньше ie9, кстати говоря, это не работает.

cyber_ua 3 июл 2012 в 19:37

>>Раньше ie9, кстати говоря, это не работает.
вы на последнем демо проверяли?

>>Пожалуй, сделать такую картинку не намного проще, чем запрограммировать.
2 вариант:
— гугл
— photoshop градиент (делается на ура;))

Dmitry_f 3 июл 2012 в 19:50

Да, на последнем демо. У вас есть другие?

cyber_ua 3 июл 2012 в 19:51

нет просто там не подключена эта библиотека =)

Dmitry_f 3 июл 2012 в 20:17

Вообще верно, буду внимательней. explorercanvas, видимо, вплоть до 6-го работает.

Keyten 3 июл 2012 в 21:34

А для CSS3 есть css3pie

dom1n1k 3 июл 2012 в 23:17

И он сможет нарисовать CSS3-градиент со спектром? Сильно сомневаюсь.
В IE есть градиентный фильтр, но он поддерживает только простые 2-цветные градиенты «от-до», без промежуточных колор-стопов.
Или там через VML?..