Окрашивание объектов. Скрипт для перекраски векторных объектов в цвет фона лежащего под ним (тестирование закончено) Приложение для мобильных устройств
В этой заметке я хочу представить ещё одно своё 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 интеграцияПользоваться скриптом довольно просто. 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 пример использованияПеврое, что нужно это форма - в два её элемента мы вставим 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 Вот собственно и всё.
Надеюсь объяснил доступно, файлы скрипта вы можете скачать по ссылке в начале статьи, но до кучи привожу листинг скрипта - как всегда старался проще и корочеесли будут вопросы пишите.
Color Picker листинг var ColorPicker = (function (GLOB) { "use strict"; var DOC = GLOB.document, pickerClass = "col-pic-picker", paletteClass = "col-pic-palette", colorItemClass = "col-pic-item", PALETTE = , // Создаёт DOM-элемент для образца цвета getColorItem = function (clickHandler) { var colDiv = DOC.createElement("DIV"); colDiv.className = colorItemClass; colDiv.onclick = clickHandler; return colDiv; }, // Получить прокрутку страницы: pageScroll = function() { return { y: GLOB.pageYOffset || DOC.documentElement.scrollTop || DOC.body.scrollTop, x: GLOB.pageXOffset || DOC.documentElement.scrollLeft || DOC.body.scrollLeft } }, // Формирование палитры цветов (используются 216 Safe Web Colors) // Эта ф-ция не доступна из вне. createPalette = function (srcPicker, srcInput) { var palette = DOC.createElement("DIV"), length = PALETTE.length, hexR = "", hexG = "", hexB = "", colItem = null, i, q, m, // Обработчик кликов на образцах: clickHandler = function () { srcPicker.style.background = this.style.background; srcInput.value = this.hv; palette.style.display = "none"; }, // Добавляет образец цвета в палитру: addColor = function (color) { colItem = getColorItem(clickHandler); colItem.style.background = colItem.hv = color; palette.appendChild(colItem); }; // Если пользователь не задал свою палитру: if (length === 0) { // Генерим палитру Safe Web Colors: for (i = 0x0; i 0) ? i.toString(16) : "00"; for (q = 0x0; q 0) ? q.toString(16) : "00"; for (m = 0x0; m 0) ? m.toString(16) : "00"; addColor("#" + hexR + hexB + hexG); } } } // Иначе, если пользователь ввёл свой массив цветов - выводим его: } else { for (i = 0; i < length; i += 1) { addColor(PALETTE[i]); } } // Конфиг палитры: palette.className = paletteClass; palette.style.display = "none"; palette.style.position = "absolute"; // Добавляем в DOM DOC.body.appendChild(palette); return palette; }; return { /** * Установка имён классов стилей. * @param string picker - Имя класса для значка выбора цвета, по-умолчанию: "col-pic-picker". * @param string palette - Имя класса для появляющейся палитры, по-умолчанию: "col-pic-palette". * @param string colorItem - Имя класса элементов - образцов цвета в палитре, для по-умолчанию: "col-pic-item". * @return ColorPicker */ setClasses: function (picker, palette, colorItem) { pickerClass = picker; paletteClass = palette; colorItemClass = colorItem; return this; }, /** * Установка своей палитры цветов. * @param array arrayOfColors - массив HEX-значений цветов. * @return ColorPicker */ setPallete: function (arrayOfColors) { PALETTE = arrayOfColors; return this; }, /** * Вставить выбиралку цвета в HTMLElement * @param HTMLElement element - элемент, результат выборки: document.getElementById * @param string name - атрибут для элемента формы, представляющего выбранный цвет. * @param string selected - значение по-умолчанию для элемента формы, представляющего выбранный цвет. * @param int offsX - смещение палитры относительно эемента выбора цвета по горизонтали * @param int offsY - смещение палитры относительно эемента выбора цвета по вертикали * @return ColorPicker */ insertInto: function (element, name, selected, offsX, offsY) { var picker = DOC.createElement("DIV"), hideInput = DOC.createElement("INPUT"), palette = createPalette(picker, hideInput), oX = offsX || 1, oY = offsY || 1; // Скрытый элемент формы, значение которого // будет меняться, в зависимости от выбора цвета // и которое будет передаваться на сервер. hideInput.value = picker.style.background = selected; hideInput.type = "hidden"; hideInput.name = name || element.id; picker.className = pickerClass; // Обработчик клика на элементе - пикере picker.onclick = function (ev) { var e = ev || GLOB.event, x = e.clientX, y = e.clientY; palette.style.display = "block"; palette.style.top = (y + pageScroll().y) - oY + "px"; palette.style.left = (x + pageScroll().x) + oX + "px"; }; // Добавляем в DOM element.appendChild(picker); element.insertBefore(hideInput, picker); return this; } }; }(this));Сегодня мы представляем полезный скрипт для 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.
Вот по сути и все подключение цветовой палитры. Как и говорил в самом начале, новичку данная статья может не помочь, рассчитана она на более опытных вебмастеров. Надеюсь, она поможет Вам.
На этом все, спасибо за внимание. 🙂
объект . Имя кнопки btn.cvet). Для ключевого кадра создадим скрипт :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/
Перевел: Владислав Бондаренко