So ändern Sie Farben in JavaScript mithilfe von Chroma.js

Im heutigen Tutorial-Screencast werde ich Ihnen zeigen, wie Sie mit JavaScript Farben bearbeiten können. Das stimmt, JavaScript. Nicht CSS. Lass uns eintauchen, um zu sehen, wovon ich rede!

Screencast anschauen

Wir haben uns alle an die Idee gewöhnt, dass CSS Stile verarbeitet, während JavaScript für das Verhalten verwendet wird, und die beiden Anliegen sollten getrennt werden. Wenn es jedoch nicht möglich ist, Stile direkt über CSS zu definieren, z. B. wenn sie über Benutzereingaben festgelegt werden, übernimmt JavaScript alle anstrengenden Aufgaben.

Chroma.js ist eine kleine Bibliothek, die bei der Bearbeitung von Farben eine große Hilfe sein kann. Schauen wir uns also an, wie Sie damit anfangen können.

Heb es auf

Chroma kann aus seinem Repo auf Github entnommen oder von CDNJS aus über diesen Link verlinkt werden:

Demo

Sehen Sie sich die schnelle Demo an, die ich erstellt habe, um Ihnen zu zeigen, was möglich ist. Wir werden einen Farbschema-Generator erstellen, der einen eingegebenen Farbwert verwendet und zur Ausgabe eines monochromatischen Schemas verwendet.

Wenn Sie während der Neuerstellung der Demo mitverfolgen möchten, greifen Sie zur Datei start.html (die alles außer dem von uns zu schreibenden JavaScript enthält) und öffnen Sie sie in einem Code-Editor.

Fügen Sie zunächst den folgenden Code ein > Tags am unteren Rand des HTML-Dokuments:

 document.addEventListener ('DOMContentLoaded', function () var btnGenerateColorScheme = document.querySelector ('# generate-color-scheme')), btnGenerateColorScale = document.querySelector ('# generate-color-scale'), colorScheme = ('.color-scheme'), colorScale = document.querySelector ('. color-scale'), Schritte = 5, // ist vorzugsweise eine ungerade Zahl. chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList; btnGenerateColorScheme.addEventListener ( 'click', function () ); btnGenerateColorScale.addEventListener ('click', function () );); 

Dies ist ein großes Stück, aber es ist weniger einschüchternd, als Sie auf den ersten Blick meinen! Es beginnt mit einem Ereignis-Listener DOMContentLoaded die wartet, bis das Dokument geladen ist, bevor eine der folgenden Funktionen ausgeführt wird. 

Als Nächstes definiere ich eine Reihe von Variablen, die wir verwenden werden, beginnend mit zwei Schaltflächen und dann mit der Farbschema und colorScale dann Container Schritte (eine Nummer, die wir in Kürze verwenden werden).

Zuletzt gibt es zwei Klickereignis-Listener mit (bisher noch) leeren Funktionen. Wir beginnen mit der ersten dieser Funktionen, der btnGenerateColorScheme, Dies ist (nicht überraschend) der Knopf, der ein Farbschema erzeugt. 

btnGenerateColorScheme


Innerhalb der leeren Funktion zwischen den geschweiften Klammern setzen wir zunächst ein leeres Array, das aufgerufen wird colorList:

// Die Farbliste erneut initialisieren. colorList = [];

Wenn ein Benutzer auf die Schaltfläche klickt, müssen wir als Erstes die Farbe aus dem Fenster holen # Benutzerfarbe Eingang.

 // Holen Sie sich den Farbwert. userColor = document.querySelector ('# user-color'). value;

Dann müssen wir die Werte in der Farbschemaliste zurücksetzen. Dies geschieht durch Abziehen des innerHTML des .Farbschema Element, das in unserem Fall ein ist

. Hier sehen Sie, dass wir die innereHTML als leere Zeichenfolge definieren.

 // Den Inhalt der Farbschemaliste zurücksetzen. colorScheme.innerHTML = ";

Chroma aufrufen

Nun zum Spaß! Wir initialisieren die chroma.js-Bibliothek durch Aufruf Chroma () und in einer Farbe übergeben:

 // Chroma initialisieren. chromaColor = chroma (userColor);

Unsere Farbe ist userColor, der Wert, den wir früher aus der Eingabe gezogen haben.

Wir werden ein monochromatisches Farbschema erstellen, das auf der ausgewählten Farbe basiert. Wir machen dies, indem wir ein Array erstellen, dank der folgenden zum Schleife:

 // Ein monochromatisches Farbschema erstellen. für (var i = 0; i < steps; i++)  colorList[i] = chromaColor.darken(i); 

Diese Schleife durchläuft die in der Variablen definierte Anzahl von Schritten Schritte (Wir haben es vorher auf 5 gesetzt, erinnerst du dich?) Jedes Mal, wenn wir iterieren, wird der Kollektion ein etwas dunklerer Farbton hinzugefügt.

Schließlich müssen wir einige Elemente mit den fünf Werten in unserem Array generieren. Jedes Mal erstellen wir ein

1. Element, gib es ein Hintergrundfarbe nach unserem colorList, dann hängen Sie es an Farbschema.

    // Generiere einige Elemente. für (var j = 0; j < colorList.length; j++)  var newItem = document.createElement('li'); newItem.style.backgroundColor = colorList[j]; colorScheme.appendChild(newItem); 

   Erledigt!

   Wir haben erfolgreich einen Farbschema-Generator entwickelt, der eine Reihe von Blöcken ausgibt, beginnend mit der ausgewählten Farbe und allmählich dunkler wird.

   Unser Farbschema

   Möglicherweise möchten Sie dies verbessern, indem Sie die ausgewählte Farbe in der Mitte des Bereichs mit helleren Farben links und dunkleren Farben rechts platzieren. In diesem Fall schauen Sie sich das Video an und folgen den abschließenden Schritten. Sie können auch Farbdetails für jeden Block hinzufügen, z. B. den Hex-Wert. Ich erkläre das auch im Screencast.

   Schließlich enthält der Screencast auch Anweisungen zum Erstellen des Farbskalengenerators. Springen Sie also mit und lassen Sie mich wissen, wie Sie vorankommen!

   Weitere Ressourcen

   • chroma.js auf Github
   • Sein Schöpfer @driven_by_data (Gregor Aisch) auf Twitter
     
   • Startdatei für dieses Tutorial
   Web-Design