Kolorowanie obiektów. Skrypt do kolorowania obiektów wektorowych na kolor tła leżącego pod nim (testy zakończone) Aplikacja na urządzenia mobilne

W tej notatce chcę przedstawić inny mój twór JavaScript: Color Picker - selektor kolorów. Skrypt jest dość prosty pod względem funkcjonalności i instalacji, no w zasadzie jego kod również nie jest zbyt skomplikowany. NIE używa jQuery i obrazów, jest niewielkich rozmiarów i jest dość prosty i szybki. Działa w IE 6-9, Opera, FireFox, Safari, Chrom.

Próbnik kolorów domyślnie generuje paletę 216 bezpiecznych kolorów internetowych i ma wygląd stylizowany na CSS, ale wygląd i zawartość palety można dostosować. Poniżej kilka przykładów tego, co może zrobić.

Skrypt został zaktualizowany do wersji 1.2 (dodano przycisk zamykania palety), ale listingi pozostały bez zmian. Nowa wersja tylko w archiwum.

Demo próbnika kolorów

Archiwum skryptów z przykładami można pobrać tutaj:
colorPicker.v1.1 (wersja oryginalna)
colorPicker.v1.2 (Dodano przycisk zamykający paletę)

Wprowadzę kilka definicji, aby ułatwić mi wyjaśnienie:

Paleta

Sama paleta zawierająca próbki kolorów

Próbka

Element palety, który po kliknięciu wybiera kolor.

Zbieracz

Jest to kwadrat z kolorem, który widzi użytkownik i na który musi kliknąć, aby pojawiła się paleta kolorów.

Integracja z próbnikiem kolorów

Skrypt jest dość łatwy w użyciu. Próbnik kolorów - ma w sumie trzy dostępne metody(pokazane z typem danych):

ColorPicker.insertInto(element HTMLElement, nazwa ciągu, wybrany ciąg, int offsX, int offsY)

Główna metoda — wstawia Color Picker do określonego elementu html. Parametry:

1. element elementu- Węzeł DOM - drzewo, w którym należy umieścić próbnik kolorów
2. nazwa ciągu- nazwa elementu formularza, który będzie reprezentował wybrany kolor*
3. wybrany ciąg- ciąg taki jak "#FFCC00" - domyślny kolor selektora
4. odchyłki odchyłki X- przesunięcie współrzędnych palety (prawy górny róg) względem kliknięcia myszką w poziomie
5. int offsY- przesunięcie współrzędnych palety (prawy górny róg) względem kliknięcia myszą w pionie

* — Sam selektor kolorów tworzy ukryty element INPUT i umieszcza go w DOM przed selektorem. Jeśli nie określisz nazwy jawnie, skrypt spróbuje ustawić nazwę ukrytego elementu INPUT tak, aby była taka sama jak id elementu określonego w pierwszym parametrze.

// Dodaj do strony: ColorPicker.insertInto(document.getElementById("color_picker_two"), "base_color", "#0000ff", 10, 15); ColorPicker.setPallete(array arrayOfColors)

Pozwala ustawić własną paletę kolorów. Pobiera parametr - tablicę, na przykład:

ColorPicker.setPalete(["#FFFFFF","#FFCC00","#00FFCC","#0000FF","#00CCFF","#CC00FF"]); ColorPicker.setClasses(selektor ciągów, paleta ciągów, ciąg colorItem)

Umożliwia określenie niestandardowych nazw klas stylów dla selektora, palety i próbek kolorów, na przykład:

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

Będzie to wymagane, gdy chcesz ustawić własną paletę kolorów lub zmienić wygląd standardowych.

Przykład użycia próbnika kolorów

Pierwszą rzeczą, jakiej potrzebujemy, jest formularz - w dwóch jego elementach wstawimy Color Pickery:

Łączymy główny plik Color Picker - a

Dodajmy style do standardowej palety:

W rzeczywistości dla selektora kolorów potrzebne są tylko trzy klasy: dla samego selektora, dla palety i dla próbek. Dla wyrazistości, dla próbek kolorów, dodaliśmy kolejną pseudo-klasę... :hover To wszystko.

Mam nadzieję, że wyjaśniłem to w przystępny sposób, pliki skryptów można pobrać z linku na początku artykułu, ale wypisuję skrypt na stertę - jak zawsze starałem się być prostszy i krótszy jeśli ty masz jakieś pytania, napisz.

Lista selektora kolorów

Dziś przedstawiamy przydatny skrypt do Adobe Illustrator. Został stworzony przez utalentowanego ukraińskiego programistę skryptów i wtyczek do programu Adobe Illustrator oraz mojego przyjaciela - Yaroslav Tabachkovsky (Yemz), który jest również znany jako twórca darmowej wtyczki Mesh Tormentor. Skrypt RandomSwatchesFill losowo maluje wybrane obiekty kolorami wybranymi w palecie Próbki.

Możesz pobrać skrypt za darmo, klikając przycisk Pobierz na początku lub na końcu tej recenzji.

Umieśćmy skrypt w następującym folderze, na przykład:

Dla Windowsa: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

Dla Maca: Aplikacje / Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

Jako przykład działania skryptu Wypełnianie próbek losowych weźmy pracę wektorową składającą się z wielu jednokolorowych obiektów.

Zwracam uwagę na fakt, że obiekty, do których zostanie zastosowany skrypt, muszą być rozgrupowane i wybrane. Bez odznaczania otwórz panel Próbki. Używając klawisza Ctrl/Command, wybierz kolory z palety Próbki, których użyjemy do pokolorowania obiektów.

Używamy skryptu RandomSwatchesFill, w tym celu przechodzimy do Plik > Skrypty > RandomSwatchesFill. W efekcie otrzymujemy losowo pomalowane kolorowe przedmioty.

Skrypt ten można zastosować zarówno do całej pracy wektorowej, jak i do kilku obiektów. Używając narzędzia Lasso (Q), wybierz kilka obiektów i używając klawisza Ctrl/Command, wybierz kolory z palety Próbki, aby pomalować te obiekty.

W efekcie część pracy wektorowej jest losowo kolorowana wybranymi kolorami.

Możesz eksperymentować z kolorami, wypełnieniami gradientowymi lub wzorami w panelu Próbki i zobaczyć, jakie oryginalne rezultaty możesz osiągnąć. W swoim własnym imieniu dziękuję Yemzowi za ten skrypt i mam nadzieję, że przyda się on w codziennej pracy twórczej i mniej czasu spędzicie na rutynowych sprawach technicznych.

Osobiście zgłosiłem się podany skrypt, podczas tworzenia nowej wtyczki do zamawiania połączeń. Ta paleta pomaga użytkownikowi wybrać kolor przycisku oraz formularz zamówienia. Przez długi czas wybierałem odpowiedni scenariusz i jak dla mnie ten jest jednym z najlepszych. Poza tym, jak powiedziałem, łatwo się go wszczepia. Przykład tego, co otrzymujesz w wyniku, możesz zobaczyć w poniższym przykładzie. Wybierz kolor kursorem na polach z gradientem.

Aby zrobić taką paletę, musisz wykonać 4 kroki. Zacznijmy w porządku ze znacznikami HTML. Musisz go dodać w miejscu, w którym chcesz zobaczyć samą paletę.

Główny blok nadrzędny o identyfikatorze - narzędzie do wybierania kolorów. Zawiera trzy główne bloki, które w środku mają elementy potomne, który tworzy strukturę naszej palety. Weźmy je w kolejności, w stosunku do poniższego obrazu.

1. blok z identyfikatorem picker-wrapper to pierwszy blok. Odpowiada za narysowanie kwadratu z gradientem jednego koloru, aby wybrać jego odcień. Wewnątrz znajduje się blok z samym gradientem oraz blok odpowiedzialny za wskaźnik.
2. blok z identyfikatorem opakowanie pcr- drugi blok odpowiedzialny za blok wyświetlający wszystkie kolory w formie gradientu. Wewnątrz znajduje się blok z gradientem i blok, który wyświetla suwak poruszający się w górę iw dół.
3. Lista UL z identyfikatorem wartości kolorów- W środku jest kilka punktów. Pierwsze trzy, na schemacie są ponumerowane - 3. Wyświetlają kody kolorów w trzech formatach - RGB, HSV, HEX.
4. Klocek na obrazku o numerze 4 jest jednym z elementów poprzedniej listy. To ostatnia pozycja li. Wewnątrz znajduje się blok z identyfikatorem pcr_bg. Ten blok wyświetla aktualnie wybrany kolor.

Możesz, w zależności od potrzeb, zamienić lub nawet usunąć te elementy, które nie są potrzebne. Kiedy już zakończymy instalację palety, będziesz mógł sam zrozumieć bardziej szczegółowo i określić, jak zmienić ten lub inny element palety.

Drugim krokiem do zainstalowania palety jest dodanie stylów. css. Dodajesz je, jak zwykle, do pliku stylów swojej witryny lub elementu, z którym łączysz tę paletę kolorów.

#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 ( pozycja: względna; float: lewa; ) .picker-indicator, .pcr-indicator ( pozycja: bezwzględna; lewa: 0; top: 0; ) .picker, .pcr ( kursor: celownik; float: lewo; ) .cp-default .picker ( szerokość: 200px; wysokość: 200px; ) .cp-default .pcr ( szerokość: 30px; wysokość : 200px; ) .cp-default .pcr-wrapper ( margin-left: 10px; ) .cp-default .picker-indicator ( szerokość: 5px; wysokość: 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 ( szerokość: 100%; wysokość: 10px; odszedł t: -4px nieprzezroczystość: 0,6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Nieprzezroczystość=60)"; filtr: progid:DXImageTransform.Microsoft.Alpha(Nieprzezroczystość=60); filtr: alfa (nieprzezroczystość=60); obramowanie: 4px stałe jasnoniebieskie; -moz-border-radius: 4px; -o-obramowanie-promień: 4px; -webkit-obramowanie-promień: 4px; promień obramowania: 4px kolor tła: biały )

Nie będę pisał o CSSie. Jak powiedziałem, jest mało prawdopodobne, że początkujący ustawi paletę, ale doświadczony zna CSS. Myślę, że zrozumiesz, który parametr za co odpowiada. Przejdźmy do następnego kroku.

Trzecią kwestią, którą musisz zrobić, jest dołączenie pliku, który zawiera sam skrypt palety kolorów. Sam plik będzie w archiwum ze źródłami tego artykułu. Możesz go pobrać z poniższego linku.

Plik nazywa się colorpicker.min.js. Połącz ją w nagłówku lub w stopce strony, jeśli będziesz wyświetlać paletę na stronie. Jeśli w jakimś module, wtyczce itp., to gdzie podłączasz resztę skryptów. Oczywiście podaj poprawną ścieżkę do pliku.

Cóż, ostatnim krokiem jest podłączenie skryptu, który będzie kontrolował wyjście wartości palety, no cóż, i rozpoczęcie pracy jako takiego. Skrypt najlepiej połączyć zaraz po bloku palety z HTML.

W skrypcie można skonfigurować kilka rzeczy. Rozbijmy je. To, co można zmienić, zaczyna się od dziewiątej linii.

• 9 linia - blok z id - klątwa, wartość koloru jest przypisywana w formacie szesnastkowym. To znaczy na liście, która jest numerem 3 na powyższym obrazku, pierwsza linia. W ten sposób możesz przypisać kod koloru do dowolnego bloku, aby go wyświetlić.
• 10 linia - blok z id - RGB, przypisuje wartość w formacie rgb. Wszystko jest podobne do poprzedniego akapitu.
• 11 linia - blok z id - hsv, przypisuje wartość w formacie hsv.
• 13. linia - blok z id - pcr_bg, przypisywany jest styl w postaci tła odpowiadającego formatowi szesnastkowemu. To znaczy kwadrat, który pokazuje aktualny kolor. W podobny sposób możesz wyświetlić kolor z palety, na przykład dla tła witryny określonego bloku i tak dalej.
• 15., ostatnia linia, ustawia domyślny kolor. Możesz określić swój własny, w formacie szesnastkowym.

To w zasadzie całe połączenie paleta kolorów. Jak powiedziałem na samym początku, ten artykuł może nie pomóc początkującym, jest przeznaczony dla bardziej doświadczonych webmasterów. Mam nadzieję, że ci pomoże.

To wszystko, dzięki za uwagę. 🙂.

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

Zmian w skrypcie można dokonać w następujących fragmentach zaznaczonych na czerwono: nazwa filmu (rol), przycisk (btn.cvet), zmienna (cvet), funkcja (f) i wartość koloru (0000ff).

Przeanalizujmy powyższy skrypt:

• Rola (jak również wszystkie symbole) ma właściwość transform, która zawiera informacje o różnych transformacjach zastosowanych do obiektu (takich jak transformacje geometryczne, ustawienia kolorów). Aby zastosować przekształcenia związane z ustawieniem koloru obiektu, użyj właściwości colorTransform.
• Nowa utworzona zmienna cvet jest ustawiona na wartość roli właściwości filmu związanej z ustawieniami kolorów.
• Zmieniamy wartość koloru właściwości color na nową:

  0000ff to szesnastkowa reprezentacja RGB czerwonego, zielonego i niebieskie kolory podawane są jako liczby dwucyfrowe w kodzie szesnastkowym (w kodzie szesnastkowym stosuje się cyfry arabskie 0-9 oraz litery łacińskie a, b, c, d, e, f, pełniące rolę odpowiedników liczb 10, 11, 12, 13 , 14 i 15). Ostateczny kolor przedmiotu uzyskujemy poprzez zmieszanie trzech kolorów w określonych proporcjach.

• Zaktualizuj właściwość colorTransform obiektu rol (wykonaj korekcję kolorów).

Praca praktyczna nr 1

Stwórzmy na scenie film (obiekt do kolorowania - nazwany rolą) oraz 2 przyciski (btn.cvet1 i btn.cvet2), symbolizujące 2 kolory w palecie kolorów. Kliknięcie każdego przycisku maluje wideo w kolorze przypisanym do przycisku. Wygląd przyciski powinny mówić o ich przeznaczeniu (na przykład kolor przycisków odpowiada kolorowi malowanego obiektu).

W skrypcie będziesz musiał stworzyć zmienną odczytującą kolor obiektu i ustawić dla niego jeden z dwóch kolorów, w zależności od wciśniętego przycisku:

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

Praca praktyczna №2

Stwórzmy na scenie 2 przyciski (obiekty do kolorowania - nazwane rol1, rol2) i 2 przyciski (symbolizujące 2 kolory w palecie kolorów - nazwane btn.cvet1 i btn.cvet2). Naciśnięcie przycisku palety kolorów - wybór koloru; klikanie na przyciski-obiekty do kolorowania prowadzi do pokolorowania ich na wybrany wcześniej w kroku kolor. Wygląd przycisków palety kolorów powinien wskazywać na ich przeznaczenie.

Kolorowanie obiektu składa się z 2 kroków:

• Wybierz kolor;
• wybierz obiekt do pomalowania w wybranym kolorze.

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

Kolorowanie obiektów bez analizowania kolorystyki różnych obiektów z reguły nie ma sensu. Tworząc aplikację wykorzystującą kolorowanie obiektów jako narzędzie selekcji dla danego obiektu, należy przeanalizować kolory odbierane przez obiekty w trakcie pracy. Istnieć oprogramowanie analiza koloru obiektu.

Rozważymy przykład zadania, w którym analiza kolorystyczna polega na „zapamiętaniu” wybranego koloru do pokolorowania figury (a nie poprzez „analizę” koloru już namalowanej figury).

Załóżmy, że jest to konieczne z zestawu figury geometryczne zaznacz kwadraty, trójkąty i romby w ten sposób: pokoloruj kwadraty jednym kolorem, trójkąty innym itd.

Ryż. 22.1. Interfejs aplikacji do analizy kolorów

Skrypt deklaruje wpisz zmienne numer:

• c (do przechowywania informacji o wybranym kolorze),
• fla.1, fla.2, fla.3 (do przechowywania informacji o kolorze otrzymanym przez każde koło).

Na scenie umieszczony jest przycisk „Sprawdź” (jego nazwa to pr) oraz dynamiczne pole tekstowe (ttt), w którym wyświetlane są informacje o poprawności/nieprawidłowości kolorowania kółek.

W przypadku poprawnego kolorowania wszystkich kształtów (wyrażenie logiczne w poleceniu rozgałęziania będzie prawdziwe, gdy wszystkie trzy proste) wyrażenia logiczne– pierwszy i (&&) drugi i (&&) trzeci) właściwość text dynamicznego pola tekstowego ttt jest ustawiona na „verno”, w przeciwnym razie jest ustawiona na „ne verno”:

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

Krótkie podsumowanie wykładu:

Symbol posiada właściwość transformacji, która zawiera informacje o różnych transformacjach zastosowanych do obiektu (takich jak transformacje geometryczne, ustawienia kolorów). Aby zastosować przekształcenia związane z ustawieniem koloru obiektu, użyj właściwości colorTransform.

Myślę, że ten blok będzie bardzo przydatny, szczególnie w przypadkach, gdy trzeba go osadzić na swojej stronie. Ten blok selektora kolorów współpracuje z JavaScript. Przyjrzyjmy się więc, jak dodać go do witryny i co jest niezwykłego w tej wtyczce JQuery.

Praca z kodem

Przede wszystkim musimy uwzględnić JavaScript i plik css s. Nie zapomnij edytować pliku CSS i poprawić ścieżki do obrazów (jeśli to konieczne), aby pasowały do ​​motywu Twojej witryny.

XHTML

Ustawienia wtyczki

Niestandardowe ustawienia wtyczki (opcjonalnie).

• eventName — żądane zdarzenie do wywołania selektora kolorów, domyślnie: „klik”.
• kolor jest kolorem domyślnym. Ciąg znaków dla kolory szesnastkowe lub hash dla RGB i HSB ((r:255, r:0, b:0)), domyślnie: „FF0000”.
• flat - wyświetlaj selektor kolorów natychmiast lub tylko po kliknięciu, wartość domyślna to false .
• livePreview - domyślnie true.
• onShow — funkcja wywołania zwrotnego jest uruchamiana, gdy pokazywany jest selektor kolorów.
• onBeforeShow — funkcja wywołania zwrotnego jest uruchamiana przed wyświetleniem selektora kolorów.
• onHide — funkcja wywołania zwrotnego uruchamia się, gdy selektor kolorów jest ukryty.
• onChange — funkcja zwrotna jest uruchamiana, gdy zmienia się kolor.
• onSubmit — wywołanie zwrotne jest uruchamiane po wybraniu koloru.

Mam nadzieję, że spodoba ci się ta wtyczka. Życzę powodzenia i rozwoju Twojej strony!

Ta lekcja została przygotowana dla Ciebie przez zespół serwisu
Źródło lekcji: http://www.eyecon.ro/colorpicker/
Tłumacz: Vladislav Bondarenko