Zeichnen mit PHP: ein Raster zeichnen

Um für unsere zukünftigen “zeichnen mit PHP" Tutorials eine gute Grundsubstanz zu haben, wollen wir heute ein Raster zeichnen. Damit lassen sich Balken- und Liniendiagramme besser ansehen, da das Auge einen besseren Bezugspunkt findet.

1. Grundlagen

Um Bilder darzustellen, gibt es mehrere Möglichkeiten.
Wir wollen uns die Beste davon zu nutze machen.
Dies funktioniert durch 2 Dateien.

Eine ist für die Seite, worauf das Bild angezeigt, die andere Datei, wo das Bild erstellt wird.

Erstellen wir folgende Dateien:

• index.php (diese wird später aufgerufen)
• bild.php (darin wird unsere Grafik erstellt)

2. Bild erstellen

Um überhaupt etwas machen zu können, müssen wir ein Bild erstellen. Um es am Ende ausgeben zu können, benötigen wir die richtige Header-Information für die Datei.

Code für bild.php

<?php
header("Content-type: image/png");
$imgWidth = '200';
$imgHeight = '100';
$theImage = imagecreate($imgWidth, $imgHeight);
$colorWhite = imagecolorallocate($theImage, 255, 255, 255); #Hintergrund
$colorGrey = imagecolorallocate($theImage, 210, 210, 210);

Durch die header-Information weiß PHP, dass es an den Browser ein Bild senden soll. Width steht für die Breite in Pixel, Height für die Höhe in Pixel. Wir setzen imagecreate() ein, um ein Bild zu erstellen.
Das sind ersteinmal die richtigsten Grundbausteine, um dann in dem Bild zeichnen zu können.
Unser Bild liegt nun in der Variable $theImage und wird, wie die anderen Variablen, durchweg benötigt werden.
Dadurch das wir die Bildgröße in Variablen geschrieben und nicht direkt in die imagecreate()-Funktion notiert haben, bleibt die Bildgröße variabel und muss nachfolgend nicht mehr auf Veränderungen angepasst werden.
$colorGrey beinhaltet unsere RGB (R=Rot, G=Gelb, B=Blau) Farbe “grau", die wir für Rahmen und Raster nutzen möchten.

Als nächstes erstellen wir einen Rahmen um unser Bild.

Code für bild.php

imageline($theImage, 0, 0, $imgWidth, 0, $colorGrey); #oben
imageline($theImage, $imgWidth-1, 0, $imgWidth-1, $imgHeight-1, $colorGrey); #rechts
imageline($theImage, 0, $imgHeight-1, $imgWidth, $imgHeight-1, $colorGrey); #unten
imageline($theImage, 0, 0, 0, $imgHeight, $colorGrey); #links

Mit der Raute # gekennzeichneten Kommentare sind schöner einsehbar, welche der 4 Linien gerade erstellt werden. Mit imageline() erstellen wir Linien. Schön zu sehen ist, das wir $theImage enthalten haben, welches unser erstelltes Bild enthält. Auch die Höhe und Breite des Bildes wird nicht hardgecodet notiert, sondern als Variable. Am Ende folgt noch unsere Farbdefinition.
Die Reihenfolge spielt keine Rolle, hingegen richte ich mich meist nach CSS, da dies oben beginnend im Uhrzeigersinn läuft.

Wir haben jetzt schon unser Rahmen um dem Bild. Als nächstes benötigen wir das Raster.
Ich möchte das Raster gern auch so variabel wie die Bildgröße gestallten. Darum verwende ich wieder Variablen und eine for-i Schleife, welche nach und nach beim durchlaufen die einzelnen vertikalen und horizontalen Linien erstellt.

Code für bild.php

$pxRaster = '20'; #Größe des Rasters
$pxWidth = round($imgWidth / $pxRaster, 0);
for($i=1; $i<$pxWidth; $i++){
imageline($theImage, $i*$pxRaster, 0, $i*$pxRaster, $imgHeight, $colorGrey); #vertikal
imageline($theImage, 0, $i*$pxRaster, $imgWidth, $i*$pxRaster, $colorGrey); #horizontal
}
//Ausgabe
imagepng($theImage); #ausgeben des Bildes als PNG
imagedestroy($theImage); #freigeben und zerstören des Bildes
?>

Die Funktion erstellt nun unsere einzelnen Linien. Jede Linie ist 20 Pixel von der anderen entfernt.
Auch hier nutzen wir wieder unsere graue Farbe, die Bildhöhe und Bildbreite. Die PHP Funktion imageline() erzeugt dabei wieder die Linien auf den festgelegten Koordinaten.

Das war das Ende des Scripts und wird mit ?> geschlossen. Diese Datei ist also für uns ersteinmal fertig.
Das Bild wird mittels imagepng() als PNG erstellt und ausgegeben. Am Ende bereinigen wir unseren Speicher wieder mittels imagedestroy().

3. Bild ausgeben und anzeigen

Jetzt fehlt die letzte Datei. index.php wird dazu dienen, die bild.php Datei azutakten bzw. das Bild was generiert wurde, abzuholen. Dies ist recht einfach und unkompliziert mit der HTML img (Image) Funktion möglich. Ja auch PHP Dateien können damit ausgegeben werden. Vorraussetzung hierbei ist allerdings, dass die Datei vorher mit der header-Information image/png ausgestattet wurde. Das hatten wir bereits getan.

Code für index.php

<?php
echo 'Unser Raster-Bild<br />
<img src="bild.php" alt="Fehler beim anzeigen" />';
?>

Das war es schon! alt steht für Alternative Anzeige. Das heißt wenn unser Bild nicht korrekt erstellt wurde, wird der Fehlertext angezeigt. Diesen kann man beliebig abändern.

Zeichnen mit PHP: Raster erstellen

Zu sehen ist, dass wir die HTML <img> Auszeichnung benutzen, um das PHP-Bild abzuholen. Achte dabei bitte auf den korrekten Pfad.
Als nächstes kannst du über deinen Localhost oder auch über deinen Server die index.php ansteuern und gucken, ob deine Grafik wie im Beispiel ausgegeben wird.
Viel Erfolg und Spaß damit!