Anzeige
Tutorialbeschreibung

PHP - Teil 32 - Grafikgenerierung: Texte hinzufügen

PHP - Teil 32 - Grafikgenerierung: Texte hinzufügen

Im ersten Teil dieser Grafik-Tutorialreihe ging es darum, wie sich Grafikformen generieren lassen. Nun sollen in diese Grafiken zusätzlich Texte eingefügt werden. Auch das ist mit der GD-Bibliothek problemlos möglich. Sinnvoll kann das beispielsweise sein, um einer Grafik Copyright-Hinweise hinzuzufügen. Ihr lernt zunächst die allgemeinen Funktionen kennen, über die sich Texte in Grafiken aufnehmen lassen. Wem die Standardschriftarten nicht gefallen, kann dann übrigens auch TrueType-Schriften verwenden. Auch das wird in diesem Tutorial beschrieben. Außerdem erfahrt ihr, wie sich Texte innerhalb der Grafik automatisch zentrieren lassen.

... übrigens findest du die komplette Serie hier: PHP-Workshop-DVD - Basics & Tricks - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


In vorhandene oder selbst generierte Grafiken können mittels PHP Texte eingefügt werden. Zunächst ein einführendes Beispiel dazu, wie sich so etwas umsetzen lässt.

<?php
$x = 300;
$y = 200;
$text = 'Hallo, Welt!';
$bild = imageCreateTrueColor($x, $y);    
$farbe = imageColorAllocate($bild, 120, 130, 180);
$textfarbe = imageColorAllocate($bild, 0, 0, 0);
imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
imageString($bild, 4, 15, 40, $text, $textfarbe); 
imagePng($bild);
imageDestroy($bild);
?>


Ihr seht an dieser Syntax zunächst einmal, dass hier weitestgehend altbekannte Elemente eingesetzt werden. Wirklich neu ist eigentlich nur die Funktion imageString(), über die letztendlich der Text in die Grafik eingefügt wird. Als ersten Parameter übergibt man dieser Funktion die Grafikressource. Über den zweiten Parameter wird die Schriftgröße bestimmt. Als Schriftgrößen können Werte zwischen 1 (sehr klein) und 5 (sehr groß) angegeben werden. Alternativ dazu sind auch Schlüsselwörter möglich.

tiny
small
medium
bold
large
giant

 
Als dritten und vierten Parameter werden die x- und y-Koordinaten des ersten Buchstaben des Textes angegeben, wobei hier von der oberen linken Ecke ausgegangen wird. Der fünfte Parameter enthält den eigentlichen Text. Über den letzten Parameter wird die Textfarbe bestimmt.

<img src="text.php" width="300" height="200" />


Das Ergebnis sieht folgendermaßen aus:

Bilder



 

TrueType-Schriften verwenden

Kommt die Sprache auf das Einfügen von Texten, stellt sich zunächst natürlich die Frage, welche Schriftarten hier denn eigentlich verwendet werden können? Die GD-Bibliothek bringt einige eingebaute Schriftarten mit. Damit hat man allerdings nicht sehr viel Gestaltungsspielraum. Es gibt jedoch auch die Möglichkeit, TrueType-Fonts einzubinden. Damit das funktioniert, muss die GD-Bibliothek mit der Option --enable-gd-native-ttf kompiliert worden sein. Außerdem müssen die gewünschten Schriftarten auf dem System vorhanden sein und man muss die exakten Pfade zu denen kennen.

Unter Windows findet ihr die installierten Schriftarten z.B. im Fonts-Verzeichnis des Windows-Verzeichnisses.

Bilder



 
Interessant sind dort die ttf-Dateien. Diese müsst ihr in euren PHP-Skripten einbinden, wenn ihr diese Dateien nutzen wollt. Wenn euch die Auswahl nicht genügen sollte, werdet ihr beispielsweise auf der Seite http://www.myfont.de/ fündig. Von dort könnt ihr zahlreiche Schriftarten herunterladen. Achtet vor dem Einsatz von TrueType-Schriftarten aber unbedingt auf die Copyright-Hinweise der einzelnen Anbieter. Denn nur dann, wenn eine Schriftart wirklich als frei gekennzeichnet ist, könnt ihr diese auch kostenlos verwenden. Anderenfalls werden Lizenzgebühren fällig.

Im folgenden Beispiel wird davon ausgegangen, dass die Schriftartendatei im selben Verzeichnis wie die PHP-Datei liegt.

<?php
header('Content-Type: image/png');
$x = 300;
$y = 200;
$text = 'Hallo, Welt!';
$font = "verdana.ttf";
$bild = imageCreateTrueColor($x, $y);    
$farbe = imageColorAllocate($bild, 120, 130, 180);
$textfarbe = imageColorAllocate($bild, 0, 0, 0);
imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
imageTtfText($bild, 19, 0, 40, 100, $textfarbe, $font, $text); 
imagePng($bild);
imageDestroy($bild);
?>


Zwei Dinge sind an dieser Syntax besonders interessant. Da wäre zunächst die Definition der Variablen $font. Dieser Variablen werden Pfad und Name der Schriftartendaten übergeben.

$font = "verdana.ttf";


 
Außerdem wird die Funktion imageTtfText() verwendet. Diese Funktion zeichnet einen Text mit einer TrueType-Schriftart in die Grafik.

Bilder



Der Funktion können zahlreiche Parameter übergeben werden. Als erster Parameter wird die Bildressource angegeben. Über den zweiten Parameter bestimmt man die Schriftgröße. Interpretiert wird der übergebene numerische Wert dabei als Punkt.

 
Die Zeichenkette lässt sich drehen. Dazu gibt man als dritten Parameter einen Gradwert an. Je höher die Gradzahl, umso weiter wird der Schriftzug entgegen dem Uhrzeigersinn gedreht. 90 Grad entsprechen einer senkrechten Ausrichtung.

imageTtfText($bild, 19, 90, 140, 200, $textfarbe, $font, $text);


Das Ergebnis sähe in diesem Fall folgendermaßen aus:

Bilder



Über die Parameter vier und fünf werden die x- und y-Koordinaten definiert. Deren Ursprung liegt jeweils in der linken oberen Ecke und deren Bezugspunkt in der linken unteren Ecke des ersten Buchstabens der angegebenen Zeichenkette.

Die Schriftfarbe übergibt man über den sechsten Parameter. Die eigentliche Schriftart wird als siebter Parameter festgelegt. Schlussendlich muss dann noch der Text notiert werden, was über den achten Parameter geschieht.


 

Texte zentrieren

Eine Anwendung, die man immer wieder braucht, ist das Zentrieren von Texten innerhalb einer Grafik. Eine einfache Zentrierung, wie ihr das aus HTML oder CSS kennt, ist dabei leider nicht möglich. Hier muss vielmehr eine kleine Berechnung angestellt werden. Im folgenden Beispiel werden dafür die Höhe und die Breite der Grafik ins Verhältnis zu der Breite des Textes gesetzt. Dabei wird davon ausgegangen, dass der Text weniger Platz als die eigentliche Grafik beansprucht. (Ein automatischer Zeilenumbruch wird also nicht generiert).

Auch hier zunächst das eigentliche Beispiel in seiner Gesamtheit.

<?php
header('Content-Type: image/png');
$x = 300;
$y = 200;
$text = 'Hallo, Welt!';
$font = 3;
$bild = imageCreateTrueColor($x, $y);   
$farbe = imageColorAllocate($bild, 120, 130, 180);
$textfarbe = imageColorAllocate($bild, 0, 0, 0);
imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
$breite = imageFontWidth($font) * strlen($text);
$hoehe = imageFontHeight($font);
$x = ($x - $breite) / 2;
$y = ($y - $hoehe) / 2;
imageString($bild, $font, $x, $y, $text, $textfarbe); 
imagePng($bild);
imageDestroy($bild);
?>


Eingebunden wird die Datei dann wieder auf dem bekannten Weg:

<img src="zentrieren.php" width="300" height="200" />


 
Und jetzt ein Blick auf die wichtigsten Elemente des gezeigten Codes bzw. auf die, die für die Zentrierung verantwortlich sind.

Bilder



 
Zunächst muss die Breite der übergebenen Zeichenkette ermittelt werden. Dazu weist man der Funktion imageFontWidth() die Breite eines einzelnen Zeichens zu und multipliziert das Ganze mit der Anzahl der in der Zeichenkette vorhandenen Zeichen.

$breite = imageFontWidth($font) * strlen($text);


Einfacher funktioniert das bei der Berechnung der Höhe. Dort kann man nämlich einfach die Funktion imageFontHeight() verwenden.

$hoehe = imageFontHeight($font);


Im nächsten Schritt müssen die Koordinaten berechnet werden, anhand derer sich der Text letztendlich zentrieren lässt. Dazu wird die Breite der Zeichenkette von der Breite der Grafik abgezogen. Dieses Ergebnis wird dann noch einmal halbiert. Dieses Prozedere wird für die Höhe und die Breite gemacht.

$x = ($x - $breite) / 2;
$y = ($y - $hoehe) / 2;


Mit den erhaltenen Werten kann dann der Text zentriert in die Grafik eingetragen werden.

imageString($bild, $font, $x, $y, $text, $textfarbe);



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von dmtw2107
  • 16.11.2013 - 09:49

verständlich und toll erklärt danke für das tutorial

x
×
×