Datum: 20.11.2007, 13:23 - Autor: Manko10

So, hier nun der 2. Teil des Tutorials.

4. Formen

In diesem Teil geht es um die Erstellung geometrischer Formen mittels GD-Library. Zuerst erstellen wir auf unserem Bild aus Teil 1 ein rotes Rechteck, besser ein Quadrat. Dafür benötigen wir den Befehl imagerectangle(). Hiermit wird ein Rechteck in einer zuvor definierten Farbe erzeugt. Da ein Quadrat bekannterweise ein Rechteck ist, eignet sich dieser Befehl also hervorragend für unser Vorhaben. Also erstellen wir auf unserem Bild mit den folgenden Befehlen einen quadratischen Rahmen in roter Farbe:

PHP-Code:
1: 2: 3: 4: <?php $red = imagecolorallocate($img, 255, 0, 0);      // Farbe referenzieren imagerectangle($img, 10, 10, 290, 290, $red);    // Rechteck zeichnen ?>

Die Funktion imagecolorallocate() ist bereits bekannt, imagerectangle() ist hingegen neu. Der erste Parameter gibt wieder die Bildfläche an. Der zweite und dritte geben die X- und Y-Koordinaten der oberen linken Ecke, der dritte und vierte die X- und Y-Koordinaten der unteren rechten Ecke an. Der letzte Parameter ist die Farb-Id. So, unser Rahmen ist jetzt fertig. Wenn du die Date speicherst und mit der HTML-Datei aufrufst, wirst du einen roten Rahmen um unsere bisheriges Bild sehen.

Nun wollen wir unserem Rahmen noch ein wenig 3D-Aussehen verpassen, weshalb wir noch Linien von den Bildecken zu den entsprechenden Rahmenecken ziehen. Dies lässt sich mit imageline() tun:

PHP-Code:
1: 2: 3: 4: 5: 6: <?php imageline($img, 0, 0, 10, 10, $red); imageline($img, 300, 0, 290, 10, $red); imageline($img, 0, 300, 10, 290, $red); imageline($img, 300, 300, 290, 290, $red); ?>

Die Paare zweiter und dritte sowie vierter und fünfter Parameter geben jeweils die X- und Y-Koordinaten der Endpunkte an. Somit ist jetzt ein 3-dimensional wirkender Rahmen entstanden, dem jetzt noch ein wenig Schatten fehlt. Zu diesem Zweck zeichnen wir an die entsprechenden Stellen ein gefülltes Polygon, also ein Vieleck beliebiger Form (weiter unten stelle ich noch eine geeignetere Methode vor, wir begnügen uns hier aber erstmal mit einem Polygon).
Die Funktion imagefilledpolygon() erwartet 4 Parameter. Zunächst die Bildfläche, dann ein Array aus den Koordinaten, die Anzahl der Punkte sowie die Farbe. Alles ein wenig verwirrend? Nun, so sieht es aus:

PHP-Code:
1: 2: 3: 4: <?php imagefilledpolygon($img, array(0, 0, 300, 0, 290, 10, 10, 10), 4, $red); imagefilledpolygon($img, array(300, 0, 300, 300, 290, 290, 290, 10), 4, $red); ?>

Hiermit werden zwei gefüllte Polygone erstellt. Im Array geben jeweils der erste und der zweite, der dritte und der vierte, der fünfte und der sechste ... Index einen Punkt an, die 4 bedeutet, dass das Polygon schließlich 4 Ecken haben soll.
Somit hat unser Bild nun einen 3-dimensionalen Rahmen.

Damit in dem Rahmen noch etwas mehr ist, als ein bloßes "Hallo Welt", zeichnen wir noch mit der Funktion imageellipse() eine gelbe Ellipse um den Text.

PHP-Code:
1: 2: 3: 4: <?php $yellow  = imagecolorallocate($img, 255, 255, 0); imageellipse($img, 150, 150, 130, 50, $yellow); ?>

Ich glaube, auf die Erstellung der Farbe muss ich nun nicht mehr eingehen. Kümmern wir uns als um die zweite Funktion. Zunächst auch hier wieder die Angabe der X- und Y-Koordinaten wie bei den anderen Funktionen auch. Unterschied: Es wird nicht obere linke Ecke, die hier ja nicht existiert, sondern die Mitte angegeben. Der dritte und vierte Parameter bestimmen dann die Breite und Höhe der Ellipse.

So, dass wäre alle Funktionen zum Erstellen von geometrischen Formen. Es gibt jede Form in zwei Varianten: gefüllt und ungefüllt.

Ungefüllte Formen:
imagerectangle()
imageellipse()
imagepolygon()
[imageline()]

Gefüllte Formen:
imagefilledrectangle()
imagefilledellipse()
imagefilledpolygon()

imageline() habe ich mal in eckige Klammern gesetzt, da man es nicht direkt als Form bezeichnen kann. Außerdem existiert davon natürlich keine gefüllt Variante .

5. Farbe

Nun zu den Farben. An sich gibt es hier nicht viel zu schreiben. Den Befehl zum Referenzieren einer Farbe haben wir ja bereits kennengelernt. Es gibt jedoch noch eine Handvoll anderer Befehle, die ich jetzt einfach nur aufliste, da ihre Verwendung selbst klärend sein sollte.

imagecolorallocate() - referenziert eine Farbe
imagecolorallocatealpha() - macht dasselbe, nur dass mit einem 5. Parameter noch eine Transparenzstufe von 0 (undurchsichtig) bis 127 (transparent) angegeben werden kann
imagecolordeallocate() - löscht eine referenzierte Farbe wieder
imagecolortransparent() - Macht eine zuvor definierte Farbe transparent (1. Parameter: Bildfläche, 2. Parameter: Farbe)

Das sind Befehle, um eine Farbe zu definieren. Jetzt stelle ich noch zum Schluss dieses Teils eine Methode vor, mit der man bestimmte Flächen ganz einfach mit einer auf diese Weise definierte Farbe füllen kann. Dazu benötigen wir die Funktion imagefill(). Diese Funktion erwartet 4 Parameter: Die Bildfläche, Die Anfangs-X-Koordinaten, die Anfangs-Y-Koordinate und die Farb-Id.
imagefill() füllt das Bild nun ab dem angegebenen Punkt mit einer Farbe. Dabei darf man sich das nicht so vorstellen, dass das ganze Bild an dem Punkt eine Kante hat und darunter alles farbig ist, nein. Die Funktion sucht an der angegeben Stelle nach Formen, die dort gemalt wurden und füllt sie aus. Sind dort keine Formen, so wird das ganze Bild ausgefüllt. Also ähnlich wie das Füllwerkzeug in einem Handelsüblichen Grafikprogramm.

Mit diesem Wissen können wir nun den 3-D-Effekt des Rahmens etwas besser gestalten. Entferne dazu zunächst einmal die Polygone sowie die Linie der oberen rechten Ecke aus dem Bild, wir brauchen sie jetzt nicht mehr. Dann definierst du eine Farbe $blue und gibst anschließend nach dem Zeichnen des Rahmens und der Linien folgende Anweisung ein:

PHP-Code:
1: 2: 3: <?php imagefill($img, 295, 15, $red); ?>

Dies sucht an der angegeben Stelle nach einer Form und findet dort den Rand. Somit ist er nun eingefärbt ohne dass wir dafür weitere Formen brauchen.

Hier nochmal der komplette Quelltext, wie er jetzt aussehen sollte:

PHP-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: <?php header("Content-type: image/png"); $img = imagecreatetruecolor(300, 300);    // Bildfläche erstellen // Farben referenzieren $white   = imagecolorallocate($img, 255, 255, 255); $yellow  = imagecolorallocate($img, 255, 255, 0); $red     = imagecolorallocate($img, 255, 0, 0); // Formen zeichnen imagerectangle($img, 10, 10, 290, 290, $red); imagestring($img, 5, 103, 140, "Hallo Welt!", $white); imageellipse($img, 150, 150, 130, 50, $yellow); imageline($img, 0, 0, 10, 10, $red); imageline($img, 0, 300, 10, 290, $red); imageline($img, 300, 300, 290, 290, $red); // Rahmen einfärben imagefill($img, 295, 15, $red); // Bild ausgeben imagepng($img); ?>

Und die Ausgabe:


Noch nicht sonderlich spektakulär, im nächsten Teil wird es aber spannender.

Kommentar schreiben:

Ihre Blog-Website wird nicht gefordert. Bitte füllen Sie das Feld nicht aus:

Titel (optional):

Name (optional):

Kommentar: