Cum să manipulați culorile în JavaScript utilizând Chroma.js

În ecranul tutorialului de astăzi am să vă arăt cum să manipulați culorile cu JavaScript. Așa e, JavaScript. Nu CSS. Să ne scufundăm pentru a vedea ce vorbesc!

Uita-te la Screencast

Toți ne-am obișnuit cu ideea că CSS se ocupă de stiluri în timp ce JavaScript este folosit pentru comportament, iar cele două preocupări trebuie păstrate separate. Dar când nu este posibil să definiți stiluri direct prin CSS, cum ar fi atunci când sunt setate prin intermediul intrării de utilizator, JavaScript va face toate grele de ridicare pentru tine.

Chroma.js este o bibliotecă mică, care poate fi un mare ajutor pentru manipularea culorilor, așa că să vedem cum să începeți să o utilizați.

Legați-vă

Cromul poate fi scos din repo pe Github, sau legat de CDNJS folosind acest link:

Demo

Uitați-vă la demo-ul rapid pe care l-am construit pentru a vă arăta ce este posibil. Vom construi un generator de scheme de culori care ia o valoare de culoare introdusă și o folosește pentru a emite o schemă monocromatică.

Dacă doriți să urmați în timp ce recreez demonstrația, apucați fișierul start.html (care conține totul, dar JavaScript pe care îl vom scrie) și îl deschideți într-un editor de cod.

Începeți prin adăugarea următoarei bucăți de cod între > în partea de jos a documentului html:

 document.addEventListener ("DOMContentLoaded", funcție () var btnGenerateColorScheme = document.querySelector ('# generate-color-scheme'), btnGenerateColorScale = document.querySelector (".color-scheme"), colorScale = document.querySelector (".color"), pașii = 5, // este de preferință un număr impar de culoriColor, userColor, colorList, scaleColors, scaleCount, scaleList; btnGenerateColorScheme.addEventListener 'click', functie () ); btnGenerateColorScale.addEventListener ('click', functie () );); 

Aceasta este o bucată mare, dar este mult mai puțin intimidantă decât credeți la început! Începe cu un ascultător de evenimente DOMContentLoaded care așteaptă până când documentul este încărcat înainte de a executa oricare dintre funcțiile care urmează. 

În continuare, definesc o grămadă de variabile pe care o vom folosi, începând cu două butoane, apoi schema de culori și colorScale containere, atunci pași (un număr pe care îl vom folosi în curând).

În cele din urmă, există două ascultători de evenimente clic cu funcții (încă) goale. Vom începe cu primul dintre acestea, btnGenerateColorScheme, care este (fără îndoială) butonul care va genera o schemă de culori. 

btnGenerateColorScheme


În cadrul funcției goale, între brațele curbate, vom începe prin a seta o matrice goală numită colorList:

// Reinitializați lista de culori. colorList = [];

Când un utilizator face clic pe buton, primul lucru pe care trebuie să-l facem este să obțineți culoarea din # User-culoare intrare.

 // Obțineți valoarea culorii. userColor = document.querySelector ('# user-color') valoare;

Apoi trebuie să resetăm valorile din lista de scheme de culori. Acest lucru se face prin striparea innerHTML din .schema de culori element, care este în cazul nostru un

. Aici puteți vedea că facem ca innerHTML să fie egal cu un șir gol.

 // Resetați conținutul listei de scheme de culori. colorScheme.innerHTML = ";

Apelează la Chroma

Acum, pentru distracție! Inițializăm biblioteca chroma.js apelând chroma () și trecând într-o culoare:

 // Inițializați cromul. chromaColor = croma (userColor);

Culoarea noastră este userColor, valoarea pe care am scos-o de la intrare mai devreme.

Vom crea o schemă de culori monocromatică, bazată pe culoarea aleasă. Vom face acest lucru creând o matrice, datorită următoarelor pentru buclă:

 // Creați o schemă de culoare monocromatică. pentru (var i = 0; i < steps; i++)  colorList[i] = chromaColor.darken(i); 

Această bucla iterează peste numărul de pași definiți în variabilă pași (am setat-o ​​la 5 mai devreme, amintiți?) De fiecare dată când repetăm, se adaugă o nuanță mai întunecată la colecție.

În cele din urmă, trebuie să generăm câteva elemente utilizând cele cinci valori din matricea noastră. De fiecare dată când creăm o

1. element, dați-i a culoare de fundal în conformitate cu noastre colorList, apoi adăugați-o schema de culori.

    // Generați câteva elemente. pentru (var j = 0; < colorList.length; j++)  var newItem = document.createElement('li'); newItem.style.backgroundColor = colorList[j]; colorScheme.appendChild(newItem); 

   Terminat!

   Am construit cu succes un generator de scheme de culori care emite o serie de blocuri, începând cu culoarea selectată și treptat, devenind mai întunecate.

   Schema noastră de culori

   S-ar putea să doriți să îmbunătățiți acest lucru, având culoarea selectată plasată în mijlocul culorii, cu culori mai deschise spre culorile din stânga și mai întunecate spre dreapta, caz în care aruncați o privire la film și urmați pașii finali. De asemenea, puteți adăuga detaliile de culoare pentru fiecare bloc, cum ar fi valoarea hex; De asemenea, explic acest lucru în ecran.

   În cele din urmă, ecranul include și instrucțiuni pentru construirea generatorului de scală de culoare, așa că sari și spune-mi cum te descurci!

   Resurse suplimentare

   • chroma.js pe Github
   • Creatorul său @driven_by_data (Gregor Aisch) pe Twitter
     
   • Fișier de pornire pentru acest tutorial
   Web design