© 2013 All rights reserved.
0

GD #3: Výpis textu do obrázku

GD knihovna je open source sloužící k dynamickému vytváření obrázku.V tomto, třetím, článku se podíváme na možnosti vykreslování textu do obrázku.

GD knihovna umožňuje, samozřejmě kromě jiných funkcí, velmi důležité funkce pro výpis textu. Text jde pomocí knihovny vypisovat několika způsoby, z nichž první jsme si ukázali v minulém článku pro výpis Hello Word.

Podpora textu je v knihovně dost velká a poskytuje všechny základní nutné funkce pro jeho pohodlné vykreslování, od vykreslování znaku až po vykreslování řetězců, nebo použití vlastního písma.

ImageChar

První, a základní funkce pro výpis textu, je bezpochyby ImageChat, která vypisuje jeden znak do zdrojového obrázku:

Vstupních parametrů je v tomto případě šest a všechny jsou povinné. Parametry určují umístění znaku, jeho velikost a barvu:

  • Image – resource obrázku
  • Font – použité písmo pro vykreslení
  • X – levá horní souřadnice na ose x, kde bude začínat text
  • Y – levá horní souřadnice na ose y, kde bude začínat text
  • String – řetězec pro vypsání
  • Color – barva vypsaného textu

Jednoduchý příklad vypíše náhodně rozmístěných 20 znaků, umístěných v poli $chars:

ImageCharUp

Funkce ImageCharUp je obdobná funkci ImageChar, jenom s tím rozdílem že nevypisuje znak vodorovně, ale svisle:

Parametry funkce jsou samozřejmě taky stejné jako u předchozí funkce:

  • Image – resource obrázku
  • Font – použité písmo pro vykreslení
  • X – levá horní souřadnice na ose x, kde bude začínat text
  • Y – levá horní souřadnice na ose y, kde bude začínat text
  • String – řetězec pro vypsání
  • Color – barva vypsaného textu

Ukázkový kód použitý u funkce ImageChar bychom mohli přepsat:

ImageString

S funkcí ImageString jsme se setkali už v minulém článku.
Slouží pouze pro výpis textu, který je vypsán vodorovně:

Parametry funkce jsou, stejně jako u většiny funkcí pro výpis textu, opět podobné a stejně tak je podobný jejich význam:

  • Image – resource obrázku
  • Font – použité písmo pro vykreslení
  • X – levá horní souřadnice na ose x, kde bude začínat text
  • Y – levá horní souřadnice na ose y, kde bude začínat text
  • String – řetězec pro vypsání
  • Color – barva vypsaného textu

Ukázkový příklad opět můžeme přepsat pro použití této funkce:

Kód vykreslí prázdný obrázek, do kterého pětkrát vypíše text „GD library“.

ImageStringUp

Stejně jako k funkci ImageChar existuje ekvivalent ImageCharUp, existuje k funkci ImageString ekvivalent ImageStringUp, funkce, která umožní vypsat text svisle:

Parametry jsou téměř stejné, jako u funkce ImageString, jenom s rozdílem hodnoty X, která značí levou dolní souřadnici:

  • Image – resource obrázku
  • Font – použité písmo pro vykreslení
  • X – levá dolní souřadnice na ose x, kde bude začínat text
  • Y – levá horní souřadnice na ose y, kde bude začínat text
  • String – řetězec pro vypsání
  • Color – barva vypsaného textu

Ukázkový příklad je možné zase jednoduše přepsat:

ImageFontHeight, ImageFontWidth

Při používaní funkcí ImageChar a ImageString je používáno písmo, jehož jednotlivé znaky jsou rozměrově shodná, proto je možné zjistit jejich rozměry.

Pro zjištění velikosti písmen slouží dvě funkce:

Vstupní parametr je pouze jeden, a to použitý font.

Při zkoušení ukázkových příkladů jste si mohli všimnout nechtěného efektu, kdy při malém rozměru obrázku, vpisovaný text jednoduše přeteče za obrázek. Pomocí funkcí ImageFontWidht a ImageFontHeight je možné zjistit velikost jednotlivých písmen v textu a tak například tento problém eliminovat, jak je to vyřešeno na ukázkovém příkladu:

ImageLoadFont

Prozatím jsme byli při vypisování textu odkázáni pouze na fonty, které jsou implementovány přímo v GD knihovně. To samozřejmě nestačí a je nutnost si při výpisu přidat vlastní fonty, protože fonty implementované v knihovně jsou dosti omezené.

Gd knihovna tuto možnost nabízí pomocí funkce ImageLoadFont:

Jako vstupní parametr funkce je řetězec, který representuje cestu k fontu, který bude použit. Funkce vrací číselný identifikátor písma, který je větší než hodnota 5, což je maximální hodnota výchozích nastavených písem.

gdf font

Bohužel knihovna umožňuje načítat pouze bitmapové fonty ve formátu GDF, čímž vzniká opět určité omezení, ale i tak je možné na internetu sehnat spousty pěkných písem.

Na ukázkovém příkladu je vidět, jak je možné vlastní písmo načíst a jednoduše jej používat:

U načteného fontu je možné opět používat funkce ImageFontWidth a ImageFontHeight. Práce s fontem je stejná jako práce s výchozím písmem.

ImageTtfText

Prozatím jediným popsaným řešením, pro použití vlastních fontů, byla funkce ImageFontLoad, která dokáže načíst font a poté s ním pracovat. Ovšem tato funkce je dosti omezená, co do typu fontu, protože umožňuje používat pouze fonty typu gdf, které nejsou běžně moc používané.

Opět existuje samozřejmě funkce, která dokáže pracovat s klasickými TTF fonty, a touto funkcí je ImageTtfText.

Funkce kromě použití vlastních fontů disponuje i dalšími možnostmi, oproti obdobě ImageString a to hlavně natáčením textu pod určitým úhlem, což je patrné z platných parametrů:

gdf font

  • Image – resource obrázku
  • Size – velikost písma v pixelech
  • Angle – úhel sklonu písma
  • X – x-ová souřadnice začátku textu, levá dolní
  • Y – y-ová souřadnice začátku textu, levá dolní
  • Color – alokovaná barva textu
  • FontFile – soubor s písmem
  • Text – řetězec textu pro vypsání

Na uvedeném příkladu je vidět, jak funkce pracuje. Pro vykreslení obrázku jsou použity dva různé fonty, pomocí nichž jsou vykresleny do obrázku dva různé řetězce:

ImageTtfbbox

Poslední funkcí, kterou v souvislosti s výpisem textu pomocí GD knihovny uvedu, je ImageTtfBbox.

Pokud jste si všimli, v minulém příkladu, při použití funkce ImageTtfText, není používaný font načten před voláním funkce žádnou jinou funkcí. PHP a GD knihovna jej tedy až do použití vůbec nezná, čímž vzniká problém, že není možné použít klasické funkce pro zjištění rozměrů (rozměry nejdou zjistit i z důvodu, že TTF fonty a jejich jednotlivá písmena nemusí být vždy stejně vysoká a široká).

Pro zjištění rozměrů, potřebných pro vykreslení řetězce pomocí TTF fontu existuje funkce ImageTTFBbox:

Funkce na základě vstupních parametrů vrací souřadnice prostoru, potřebného pro vykreslení řetězce při použitém fontu a velikosti:

  • Size – velikost písma v pixelech
  • Angle – úhel, pod kterým je text vypisován
  • FontFile – soubor s používaným písmem
  • Text – textový řetězec pro vykreslení

Jak je vidět, všechny parametry, které do funkce vstupují, jsou shodné s parametry funkce ImageTTfText, která text vypisuje.

Funkce vrací pole čtyř souřadnic, které representují celkové rozměry, potřebné pro vykreslení textu v zadaných podmínkách:

Index pole význam hodnoty
0 Levý dolní roh na ose x
1 Levý dolní roh na ose y
2 Pravý dolní roh na ose x
3 Pravý dolní roh na ose y
4 Pravý horní roh na ose x
5 Pravý horní roh na ose y
6 Levý horní roh na ose x
7 Levý horní roh na ose y

Pomocí těchto rozměrů můžeme například velmi jednoduše zjistit potřebnou plochu pro vykreslení zadaného textu:

V proměnných Width a Height máme nyní Integer hodnoty, představující rozměry, které na plátně zabere text „Hello World“, vypisovaný písmem font.ttf, o velikosti 20 pixelů, pod úhlem 0 stupňů.

Pokud bychom vykreslili obrázek o těchto rozměrech a vepsali do něj náš text, zabral by text celou jeho velikost:

Závěrem:

To je z vykreslování textu pomocí GD knihovny všechno. Jak je vidět, knihovna nabízí pro vykreslování do obrázků opravdu velké množství funkcí a velkou podporu ze strany uživatele.
Na výběr je jak vykreslování řetězců, tak vykreslování znaků, výběr velikosti písma, nebo typu písma, ať už načtením pomocí ImageLoadFont, nebo použitím TTF písma pomocí ImageTTFText.

Comments are closed for this page

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836