Окрашивание объектов. Скрипт для перекраски векторных объектов в цвет фона лежащего под ним (тестирование закончено) Приложение для мобильных устройств

В этой заметке я хочу представить ещё одно своё JavaScript творение: Color Picker - выбиралку цветов. Скрипт довольно простой по функционалу и установке, ну, и впринципе код у него тоже не очень сложный. Он НЕ использует JQuery и картинки, небольшой по размеру, и довольно прост и быстр. Работает в IE 6-9, Opera, FireFox, Safari, Chrom.

Color Picker по - умолчанию генерирует палитру из 216 безопасных web ветов, и имеет определённый CSS стилями вид, но вид и содержимое палитры можно настраивать. Ниже пара примеров на что он способен.

Скрипт обновлен до версии 1.2 (добавлена кнопка закрытия палитры), но листинги остались старыми. Новая версия только в архиве.

Color Picker demo

Архив скрипта с примерами можно скачать тут :
colorPicker.v1.1 (Исходная версия)
colorPicker.v1.2 (Добавлена кнопка, закрывающая палитру)

Введу некоторые определения, что бы мне было проще вам объяснять:

Палитра

Собственно сама палитра, содержащая образцы цветов

Образец

Элемент палитры, при клике на котором выбирается цвет.

Пикер

Это квадратик с цветом, который видит пользователь, и на который ему нужно кликнуть, что бы появилась палитра цветов.

Пользоваться скриптом довольно просто. Color Picker - имеет всего три доступных метода (показано с указанием типа данных):

ColorPicker.insertInto(HTMLElement element, string name, string selected, int offsX, int offsY)

Основной метод - вставляет Color Picker в указанный html - элемент. Параметры:

* - Color Picker сам создаёт скрытый элемент INPUT и помещает его в DOM перед пикером. Если вы не зададите имя явно - скрипт попытается установить имя скрытого элемента INPUT такое же, как id - элемента, указанного в первом параметре.

// Добавляем на страницу: ColorPicker.insertInto(document.getElementById("color_picker_two"), "base_color", "#0000ff", 10, 15); ColorPicker.setPallete(array arrayOfColors)

Позволяет установить свою палитру цветов. Принимает параметр - массив, например:

ColorPicker.setPallete(["#FFFFFF","#FFCC00","#00FFCC","#0000FF","#00CCFF","#CC00FF"]); ColorPicker.setClasses(string picker, string palette, string colorItem)

Позволяет указать свои имёна классов стилей для пикера, палитры, и образцов цветов например:

ColorPicker.setColors("col-safe-picker","col-safe-palette","col-safe-item");

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

Певрое, что нужно это форма - в два её элемента мы вставим Color Picker-ы:

Безопасные WEB цвета:

Базовые WEB цвета + град. серого:

Отправить

Подключаем основной файл Color Picker - а

// Безопасные web цвета (стандарнт.), добавляем на страницу: ColorPicker.insertInto(document.getElementById("color_picker_one"), "safe_color", "#ff0000"); // Базовые web цвета + град. серого: ColorPicker.setPallete(["#BE2137","#FFA100","#00752C","#0052AC","#701F85", "#E62937","#FFCB00","#009E2F","#0079F1","#873CBE", "#FF7525","#FDF900","#00E430","#00A9FF","#C87AFF", "#FFFFFF","#999999","#666666","#333333","#000000"]); // Так как цветов меньше палитра будет иметь иной внешний вид - нужно скорректировать стили: ColorPicker.setClasses("col-safe-picker","col-safe-palette","col-safe-item"); // Добавляем на страницу: ColorPicker.insertInto(document.getElementById("color_picker_two"), "base_color", "#0000ff", 5, 5);

Добавим стили для стандарной палитры:

/* Безопасные цвета */ .col-pic-item{float:left;width:15px;height:15px;border:solid 1px #FFF;margin:0px} .col-pic-item:hover{border:solid 1px #00FF00} .col-pic-picker{width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;} .col-pic-palette{width:306px;border:solid 2px #666}

В JS - листинге выше, в строке 5 мы установили свою палитру, а она имеет меньше цветов чем стандарная, поэтому в строке 10, там же, мы указали новые классы стилей - определим их:

/* Базовые цвета */ .col-safe-item{float:left;width:40px;height:40px;border:solid 1px #FFF;margin:0px} .col-safe-item:hover{border:solid 1px #00FF00} .col-safe-picker{width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;} .col-safe-palette{width:210px;border:solid 2px #666}

По сути для Color Picker нужно всего три класса: для самого пикера, для палитры и для образцов. Для выразительности, для образцов цвета мы добавили ещё один псевдокласс... :hover Вот собственно и всё.

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

Сегодня мы представляем полезный скрипт для Adobe Illustrator. Он был создан талантливым украинским разработчиком скриптов и плагинов для Adobe Illustrator и моим другом - Ярославом Табачковским (Yemz), который также известен как разработчик бесплатного плагина Mesh Tormentor . Скрипт RandomSwatchesFill в случайном порядке окрашивает выделенные объекты в цвета выбранные в палитре Swatches.

Бесплатно скачать скрипт Вы можете нажав на кнопку Download в начале или конце данного обзора.

Давайте поместим скрипт в следующую папку, например:

Для Windows: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

Для Mac: Applications / Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

Для примера работы скрипта Random Swatches Fill возьмем векторную работу состоящую из множества однотонных объектов.

Обращаю ваше внимание, что объекты к которым будет применяться скрипт должны быть разгруппированы и выделены. Не снимая выделения, открываем панель Swatches. Используя клавишу Ctrl/Command, выбираем из палитры Swatches цвета, которые будем использовать для окрашивания объектов.

Применяем скрипт RandomSwatchesFill, для этого переходим File > Scripts > RandomSwatchesFill. В результате получаем цветные объекты окрашенные в случайном порядке.

Данный скрипт можно применить как ко всей векторной работе, так и к нескольким объектам. Используя инструмент Lasso Tool (Q), выделяем несколько объектов и используя клавишу Ctrl/Command, выбираем цвета из палитры Swatches, в которые будем окрашивать данные объекты.

В результате часть векторной работы окрашена в случайном порядке выбранными цветами.

Можете поэкспериментировать с цветами, градиентными заливками или Patterns в панели Swatches и увидеть каких оригинальных результатов можно добиться. От себя лично хочу поблагодарить Yemz за этот скрипт и надеюсь, что он будет полезен в вашей каждодневной творческой работе и вы будете меньше времени уделять рутинным техническим вопросам.

Лично я применил данный скрипт, при создании своего нового плагина для заказа звонка. Данная палитра помогает пользователю выбрать цвет кнопки и формы заказа. Долгое время я подбирал нужный скрипт и как по мне данный является одним из лучших. К тому же он, как я говорил, легко вживляется. Пример того что получится у Вас в результате, можно посмотреть в примере ниже. Выбирайте цвет курсором на полях с градиентом.

Чтобы сделать такую палитру, нужно сделать 4 шага. Начнем по-порядку с разметки HTML . Добавлять ее нужно туда, где хотите увидеть саму палитру.

• RGB:
• HSV:
• HEX:

Главный родительский блок с айди - color-picker . В нем заключено три основных блока, которые внутри имеют дочерние элементы, что и создают структуру нашей палитры. Давайте разберем их по порядку, относительно изображению ниже.

Можете в зависимости от Ваших нужд, менять местами или вообще убирать те элементы, что не нужны. Когда полностью завершим с установкой палитры, тогда Вы сможете более подробно сами разобраться и определить, как поменять тот или иной элемент палитры.

Вторым шагом по установке палитры, будет добавление стилей CSS . Их добавляете, как обычно в файл стилей своего сайта, ну или того элемента, к которому Вы подключаете данную цветовую палитру.

#color-picker{ margin:25px auto; width:450px; } #color-values{ display:block; list-style:none; color:#222; float:left; margin:0 0 0 15px; padding: 5px; text-align:left; } #pcr_bg{ height:135px; } .picker-wrapper, .pcr-wrapper { position: relative; float: left; } .picker-indicator, .pcr-indicator { position: absolute; left: 0; top: 0; } .picker, .pcr { cursor: crosshair; float: left; } .cp-default .picker { width: 200px; height: 200px; } .cp-default .pcr { width: 30px; height: 200px; } .cp-default .pcr-wrapper { margin-left: 10px; } .cp-default .picker-indicator { width: 5px; height: 5px; border: 2px solid darkblue; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50); background-color: white; } .cp-default .pcr-indicator { width: 100%; height: 10px; left: -4px; opacity: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); filter: alpha(opacity=60); border: 4px solid lightblue; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: white; }

По CSS расписывать не буду. Как и говорил, палитру вряд ли новичок будет ставить, а бывалый с CSS знаком. Думаю разберетесь какой параметр за что отвечает. Переходим к следующему шагу.

Третьим пунктом, того что Вы должны сделать, будет подключение файла, в котором содержится сам скрипт цветной палитры. Сам файл будет в архиве с исходниками этой статьи. Скачать его можно, по ссылке ниже.

Файл называется colorpicker.min.js . Подключите его в шапке или в подвале сайта, если выводить палитру будете на сайте. Если в каком-то модуле, плагине и тд, то там где вы подключаете остальные скрипты. Естественно укажите правильный путь к файлу.

Ну и последний шаг, это подключение скрипта, который будет управлять выводом значений палитры, ну и запустит ее работу как таковую. Скрипт лучше всего подключать сразу после блока палитры с HTML.

cp = ColorPicker(document.getElementById("pcr"), document.getElementById("picker"), function(hex, hsv, rgb, mousePicker, mousepcr) { currentColor = hex; ColorPicker.positionIndicators(document.getElementById("pcr-indicator"), document.getElementById("picker-indicator"), mousepcr, mousePicker); document.getElementById("hex").innerHTML = hex; document.getElementById("rgb").innerHTML = "rgb(" + rgb.r.toFixed() + "," + rgb.g.toFixed() + "," + rgb.b.toFixed() + ")"; document.getElementById("hsv").innerHTML = "hsv(" + hsv.h.toFixed() + "," + hsv.s.toFixed(2) + "," + hsv.v.toFixed(2) + ")"; document.getElementById("pcr_bg").style.backgroundColor = hex; }); cp.setHex("#D4EDFB");

В скрипте можно настроить несколько моментов. Давайте разберем их. То что можно менять начинается с 9-ой строки.

• 9-я строка - блоку с айди - hex , присваивается значение цвета в формате hex. То бишь в списке, что на картинке выше под номером 3, первая строка. Таким образом, Вы можете присваивать любому блоку код цвета, для его вывода.
• 10-я строка - блоку с айди - rgb , присваивает значение в формате rgb. Все аналогично предыдущему пункту.
• 11-я строка - блоку с айди - hsv , присваивает значение в формате hsv.
• 13-я строка - блоку с айди - pcr_bg , присваивается стиль, в виде фона соответствующего формату hex. То бишь, тому квадрату, что показывает текущий цвет. Схожим образом Вы можете выводить цвет с палитры, например, для фона сайта определенного блока и тд.
• 15-я, последняя строка, задает цвет по-умолчанию. Можете указать свой, в формате hex.

Вот по сути и все подключение цветовой палитры. Как и говорил в самом начале, новичку данная статья может не помочь, рассчитана она на более опытных вебмастеров. Надеюсь, она поможет Вам.

На этом все, спасибо за внимание. 🙂

var cvet: ColorTransform = rol.transform.colorTransform; btn.cvet.addEventListener(MouseEvent.CLICK, f); function f(event:MouseEvent):void { cvet.color = 0x0000ff; rol.transform.colorTransform = cvet }

Изменения в скрипте можно вносить в следующие фрагменты, выделенные красным цветом: в имя ролика (rol), кнопки (btn.cvet), переменной (cvet), функции (f) и в значение цвета (0000ff).

Разберем работу приведенного выше скрипта:

• У ролика rol (также, как и у всех символов) есть свойство transform, которое содержит сведения о различных преобразованиях, применяемых к объекту (таких как геометрические преобразования, настройки цвета). Для применения преобразований, связанных с заданием цвета объекта используется свойство colorTransform.
• Созданная новая переменная cvet получает значение свойств ролика rol, связанных с настройками цвета.
• Мы меняем значение цвета свойства color на новое:

  0000ff – шестнадцатиричное представление цвета в формате RGB: красный, зеленый и синий цвета задаются в виде двухзначных чисел в шестнадцатиричном коде (в 16-тиричном коде используются арабские цифры 0-9, и латинские буквы a, b, c, d, e, f, выступающие аналогами чисел 10, 11, 12, 13, 14 и 15). Итоговый цвет объекта получается путем смешивания трех цветов в заданных пропорциях.

• Обновляем свойство colorTransform объекта rol (производим цветокоррекцию).

Практическая работа №1

Создадим на сцене ролик ( объект для окрашивания – с именем rol) и 2 кнопки (btn.cvet1 и btn.cvet2), символизирующие 2 цвета в цветовой палитре. Нажатие на каждую кнопку окрашивает ролик в цвет, закрепленный за кнопкой. Внешний вид кнопок должен говорить об их назначении (допустим, цвет кнопок соответствует цвету окрашиваемого объекта).

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

var cvet:ColorTransform = rol.transform.colorTransform; btn.cvet1.addEventListener(MouseEvent.CLICK, f1); function f1(event:MouseEvent):void { cvet.color = 0x0000ff; rol.transform.colorTransform = cvet; } btn.cvet2.addEventListener(MouseEvent.CLICK, f2); function f2(event:MouseEvent):void { cvet.color = 0x00ff00; rol.transform.colorTransform = cvet; }

Практическая работа №2

Создадим на сцене 2 кнопки (объекты для окрашивания – с именами rol1, rol2) и 2 кнопки (символизирующие 2 цвета в цветовой палитре - с именами btn.cvet1 и btn.cvet2). Нажатие на кнопку цветовой палитры – выбор цвета; нажатие на кнопки-объекты для окрашивания приводит к окрашиванию их в выбранный шагом ранее цвет. Внешний вид кнопок цветовой палитры должен говорить об их назначении.

Для окрашивания объекта необходимо выполнить 2 шага:

• выбрать цвет;
• выбрать объект, который будет окрашен в выбранный цвет.

  var cvet:ColorTransform = rol1.transform.colorTransform; btn.cvet1.addEventListener(MouseEvent.CLICK, f1); function f1(event:MouseEvent):void { cvet.color = 0x0000ff; } btn.cvet2.addEventListener(MouseEvent.CLICK, f2); function f2(event:MouseEvent):void { cvet.color = 0x00ff00; } rol1.addEventListener(MouseEvent.CLICK, f3); function f3(event:MouseEvent):void { rol1.transform.colorTransform = cvet; } rol2.addEventListener(MouseEvent.CLICK, f4); function f4(event:MouseEvent):void { rol2.transform.colorTransform = cvet; }

Окрашивание объектов без анализа окраски различных объектов, как правило, не имеет смысла. При создании приложения, в котором раскрашивание объектов используется в качестве инструмента выбора данного объекта, необходимо анализировать цвета, полученные объектами в процессе работы. Существуют программные средства анализа цвета объекта.

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

Допустим, необходимо из набора геометрических фигур отметить квадраты, треугольники и ромбы так: окрасить квадраты одним цветом, треугольники – другим и т.д.

Рис. 22.1. Интерфейс приложения "Анализ цвета"

В скрипте объявляются переменные типа Number:

• c (для хранения информации о выбранном цвете),
• fla.1, fla.2, fla.3 (для хранения информации о полученном цвете каждым кругом).

На сцену помещена кнопка "Проверить" (ее имя pr) и динамическое текстовое поле (ttt), в которое выводится информация о правильности/неправильности окраски кругов.

В случае правильной окраски всех фигур (логическое выражение в команде ветвления будет истинным, когда истины все три простых логических выражения – первое и (&&) второе и (&&) третье) свойству text динамического текстового поля ttt присваивается значение "verno", иначе – "ne verno":

… pr.addEventListener(MouseEvent.CLICK, f7); function f7(event:MouseEvent):void { if ((fla.1==1) && (fla.2==2) && (fla.3==3)) { ttt.text = "verno"; } else { ttt.text = "ne verno"; } }

Краткие итоги лекции:

У символа есть свойство transform , которое содержит сведения о различных преобразованиях, применяемых к объекту (таких как геометрические преобразования, настройки цвета). Для применения преобразований, связанных с заданием цвета объекта используется свойство colorTransform.

Данный блок думаю будет очень полезен, особенно для случаев, когда Вам необходимо встроить его себе на сайт. Работает этот блок Color Picker с помощью Javascript. Итак рассмотрим, как его добавить на сайт и чем примечателен этот JQuery плагин.

В первую очередь нам необходимо подключить Javascript и CSS файлы. Не забудьте редактировать CSS файл и исправить пути к изображениям (если это необходимо), в соответствии с темой Вашего сайта.

XHTML

Пользовательские настройки плагина (необязательны).

• eventName – желаемое события, для вызова функции выбора цвета, по умолчанию: “щелчок”.
• color – цвет по умолчанию. Строка для HEX цвета или хэш для RGB и HSB ({r:255, r:0, b:0}), по умолчанию: “FF0000″.
• flat – вывести блок выбора цвета сразу или только по клику, значение по умолчанию false .
• livePreview – по умолчанию true .
• onShow – функция обратного вызова срабатывает, когда показан блок выбора цвета.
• onBeforeShow – функция обратного вызова срабатывает до того, как был показан блок выбора цвета.
• onHide – функция обратного вызова срабатывает, когда блок выбора цвета скрыт.
• onChange – функция обратного вызова срабатывает при изменении цвета.
• onSubmit – функция обратного вызова срабатывает, когда выбираем цвет.

Надеюсь Вам понравился этот плагин. Желаю успехов и развития Вашему сайту!

Данный урок подготовлен для вас командой сайта
Источник урока: http://www.eyecon.ro/colorpicker/
Перевел: Владислав Бондаренко