Multiple Farbverläufe in einem Bild mit PHP

Geschrieben am 23.05.2016 um 19:29 von

Kürzlich habe ich eine Anfrage bekommen, bei der es darum geht komplexere Farbverläufe mittels PHP zu erstellen. Hierbei sollte nicht klassisch von Links nach Rechts und von Farbe 1 nach Farbe 2 der Farbverlauf generiert werden, sondern es sollten in einem Bild verschiedenfarbige Verläufe generiert werden können. Mit den Grafikbibliotheken von PHP habe ich im Vorfeld quasi nix gearbeitet – Farbverläufe kann man bekanntlich schneller und einfacher mittels CSS bzw. SCSS/LESS erstellen. Obwohl ich den Auftrag nicht bekommen habe, fand ich das persönlich eine recht schöne Übungsaufgabe. In dem Sinne habe ich mich einige Stunden hingesetzt und versucht ein kleines Script zu programmieren, bei dem ich solche Farbverläufe generieren kann und das da möglichst flexibel ist. Das ist mir ganz gut gelungen, ich habe zusätzlich noch die Funktion integriert den Anfang und den Beginn des Bildes mit einem absoluten Wert zu belegen und auf der Basis innerhalb des Bildes einen „Messwert“ markieren zu können.

Ergebnis – Beispiel 1:

Der Klassiker – von links nach recht – von grün nach rot!

php-farbverlauf-einfach

Ergebnis Beispiel 2:

So etwas ist mit meiner Bibliothek ebenfalls möglich – grün und rot wechseln sich jede 20% der angegebenen Länge ab.

php-farbverlauf-komplexer

Ergebnis Beispiel 3:

Hier sieht man, dass im ersten Teil alles grün bleibt, ab einer gewissen Prozentangabe wird es dann schnell rot und geht dann wieder recht langsam in Richtung grün zurück. So etwas kann man für erlaubte Intervalle innerhalb der chemischen Industrie zur Kennzeichnung von Normbereichen verwenden.

php-farbverlauf-2-farben-verschieden

Ergebnis Beispiel 4:

Hier wird es komplexer, man kann mit der Bibliothek so viele Farben verwenden wie man will. Es gibt mehrere gute – also grüne – Bereiche. Einen großen schlechte – rot gekennzeichnet und außerdem einige Bereiche, in denen es kritisch wird – gelb oder die suboptimal sind. Ob das so wissenschaftlich Sinn macht, sei mal dahingestellt, es soll nur zeigen, was mit dem PHP-Script möglich ist.

php-farbverlauf-3-farben-verschiedenkomplex

Ergebnis Beispiel 5:

Hier sieht man das ganze mit einem konkreten Messpunkt. Im Code schaut das so aus:

    $labtool = new DamianSchwyrz\GradientImageTool\GradientImageTool(400, 25);

    $labtool->add_position(0)->add_color('00862d');
    $labtool->add_position(25)->add_color('f8e800');
    $labtool->add_position(50)->add_color('f80a19');
    $labtool->add_position(75)->add_color('f8e800');
    $labtool->add_position(100)->add_color('00862d');

    $labtool->calculate_rel_to_abs();

    $labtool->set_min_value(200);
    $labtool->set_max_value(500);
    $labtool->set_value(305);

    $labtool->create_image();

    $labtool->fill_with_gradient();
    $labtool->draw_value();


    $labtool->draw();

Es wird ein Bild mit 400 x 25 Pixeln angefordert. Bei 0% der Breite wird die Farbe grün gesetzt. Das wird so bis 100% fortgesetzt, wo das ganze wieder mit grün enden soll. Zur Anzeige der Messwerte müssen 0% und 100% mit einem absoluten Messwert belegt werden. In dem Fall 200 bzw 500. Man könnte hier direkt mit den im Konstruktor übergebenen Angaben arbeiten, aber in Labor sind Minimal- und Maximal-Werte meist komplett anders angegeben, beginnen nicht bei 0, daher hab ich mich entschieden, dem Nutzer die freie Wahl bei der Zuweisung zu geben. Das ganze könnte man an der Stelle natürlich noch weiter ausbauen! Mit set_value(305) wird gesagt, dass bei ein Messergebnis bei 305 eingezeichnet werden soll. Danach wird das ganze von PHP gezeichnet und ausgegeben.

Und das sieht dann so aus:

farbverlauf-beispiel-5-mit-messpunkt

Wir können mit dem Tool also einfach relativ schnell hübsche Farbverläufe in verschiedenen Formen zeichnen lassen. Das ganze lässt sich so beliebig anpassen – bei mir wird das Bild direkt im Browser ausgegeben. Denkbar wäre aber auch, dass man das Tool zum Generieren solcher Verläufe verwendet und diese danach in Dateien abspeichert, um sie irgendwo weiter zu verwenden.

Wie sich unschwer am Titelbild erkennen lässt, kann man damit auch quadratische Bilder oder Rechtecke erzeugen.

Ihr findet den Quellcode auf github: https://github.com/Damian89/GradientImageToolEx

"Multiple Farbverläufe in einem Bild mit PHP" bewerten

Der Artikel ist schlecht!Der Artikel ist verbesserungswürdig!Der Artikel ist ganz gut.Der Artikel ist richtig gut!Der Artikel ist perfekt! Danke! (1 Bewertungen mit durchschnittlich 4,00 von 5 Sternen)
Loading...

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz
© 2016 » Die Seite rennt auf PHP 7 und HTTP 2.0 ♥