Souřadnicový systém obrázků
Prakticky při každé editační akci se zadávají souřadnice uvnitř obrázku. Souřadnice jsou natočeny tak, že bod 0,0 je vlevo nahoře. Souřadnice x se počítá směrem doprava a souřadnice y se počítá směrem dolů. Ostatně podívejte se na obrázek.
Jak vyplnit obdélník barvou?
Jedním ze základních editačních příkazů je vyplnění obdélníku barvou. Začnu hned příkladem, kdy vyrobím banner o velikosti 468 x 60 pixelů, který vyplním dvěma barvami, červenou a modrou. Zkuste si spustit tento příklad, který po spuštění zanechá ve stejném adresáři, jako je PHP skript soubor banner1.png s obrázkem:
<html>
<head>
<title>Příklad 1. z 22. dílu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>
<?php
echo `Dvoubarevný banner`;
$obrazek = imagecreatetruecolor(468,60);
$modra = imagecolorallocate($obrazek,0,0,255);
$cervena = imagecolorallocate($obrazek,255,0,0);
imagefilledrectangle($obrazek,0,0,467,59,$cervena);
imagefilledrectangle($obrazek,117,15,351,45,$modra);
imagepng($obrazek,`banner1.png`);
imagedestroy($obrazek);
?>
</body>
</html>
V příkladu je krásně vidět práce s barvami. Každou barvu, kterou chcete na obrázek použít, musíte nejdříve naalokovat, tedy vytvořit. Tedy použít funkci imagecolorallocate, která jakoby vyrobí novou barvu a zapamatovat si její návratovou hodnotu. Návratovou hodnotu pak použijeme všude, kde se požaduje zadaná barva.
Funkce imagecolorallocate má následující parametry:
imagecolorallocate (obrázek, červená_složka, zelená_složka, modrá_složka)
První parametr obrázek je proměnná typu obrázek (obrázkový identifikátor), další parametry udávají hodnotu jednotlivých barevných složek. Každá složka může být číslo od nuly do 255.
Funkce imagecolorallocate nám tedy namíchá novou barvu, a když si zapamatujeme její návratovou hodnotu, můžeme do obrázku dosazovat namíchanou barvu všude, kde je nám libo.
Další funkce imagefilledrectange slouží k vyplnění obdélníku barvou. Samotná funkce má následující parametry:
imagefilledrectangle (obrázek, x1, y1, x2, y2, barva)
První parametr je proměnná typu obrázek (obrázkový identifikátor). Druhý a třetí parametr jsou x a y souřadnice levého horního rohu, který se má vyplnit. Čtvrtý a pátý parametr jsou x a y souřadnice pravého dolního rohu, který se má vyplnit. A konečně poslední parametr je barva, kterou se bude vyplňovat.
V příkladu jsou použity dvě volání funkce imagefilledrectangle, vyplňují se tedy dva obdélníky. Nejdříve se celý banner vyplní červenou barvou a pak uvnitř menší obdélník modrou barvou.
Jak vykreslit obrázek přímo?
Veškeré příklady do této chvíle vykreslovaly obrázek do souboru. Pro účely psaní webů ale potřebujeme dané obrázky zobrazit, a to je při ukládání do souborů trochu přes ruku. Ovšem existuje i taková možnost, jak obrázky zobrazit v prohlížeči přímo. Stačí k tomu poslat hlavičku s tzv. MIME typem, tedy typem obsahu. Stačí si zapamatovat, že JPEG soubor má MIME typ image/jpeg a PNG soubor má MIME typu image/png. O hlavičkách jsem mluvil ve 13. dílu seriálu, tady stačí zopakovat, že hlavička se musí poslat dříve, než jakýkoli výstup. Proto v následujícím příkladu zmizí i HTML okolí:
<?php
$obrazek = imagecreatetruecolor(468,60);
$modra = imagecolorallocate($obrazek,0,0,255);
$cervena = imagecolorallocate($obrazek,255,0,0);
imagefilledrectangle($obrazek,0,0,467,59,$cervena);
imagefilledrectangle($obrazek,117,15,351,45,$modra);
header(`Content-Type: image/png`);
imagepng($obrazek);
imagedestroy($obrazek);
?>
Pokud si vyzkoušíte tento příklad, zjistíte, že výsledkem je stejný banner, jako v předchozím příkladě, ale na rozdíl od něj vidíte banner přímo v prohlížeči. Mohou za to řádky:
header(`Content-Type: image/png`);
imagepng($obrazek);
Funkce header přidá hlavičky typu "Content-Type", za kterou následuje MIME typ obsahu, v našem příkladě je to image/png, tedy PNG obrázek. V dalším řádku je funkce imagepng, která ukládá obrázek v PNG formátu, ale na rozdíl od předchozího příkladu nám tu chybí jméno souboru. A pokud chybí jméno souboru, pošle se obrázek na standardní výstup, tedy přímo do prohlížeče.
Jak vykreslovat jednotlivé body?
Jednotlivé body lze vykreslit pomocí funkce imagesetpixel. Tato funkce nakreslí jeden jediný bod zadanou barvou:
imagesetpixel (obrázek, x, y, barva)
Prvním parametrem je proměnná typu obrázek, následuje x a y souřadnice bodu, který chceme nakreslit a posledním parametrem je barva bodu.
Jednoduchý příklad, který nakreslí červený banner, a do něj malinkou čárečku ze tří modrých bodů:
<?php
$obrazek = imagecreatetruecolor(468,60);
$modra = imagecolorallocate($obrazek,0,0,255);
$cervena = imagecolorallocate($obrazek,255,0,0);
imagefilledrectangle($obrazek,0,0,467,59,$cervena);
imagesetpixel($obrazek,117,15,$modra);
imagesetpixel($obrazek,117,16,$modra);
imagesetpixel($obrazek,117,17,$modra);
header(`Content-Type: image/png`);
imagepng($obrazek);
imagedestroy($obrazek);
?>
Jak kreslit čáry?
Pro kreslení čar existuje funkce imageline:
imageline (obrázek, x1, y1, x2, y2, barva)
Prvním parametrem je proměnná typu obrázek, následující 2 parametry jsou x a y začátku čáry, další 2 parametry jsou x a y konce čáry a posledním parametrem je barva.
Zde je jednoduchý příklad na kreslení čáry:
<?php
$obrazek = imagecreatetruecolor(468,60);
$zelena = imagecolorallocate($obrazek,0,255,0);
$cervena = imagecolorallocate($obrazek,255,0,0);
imagefilledrectangle($obrazek,0,0,467,59,$zelena);
imageline($obrazek,0,30,467,30,$cervena);
header(`Content-Type: image/png`);
imagepng($obrazek);
imagedestroy($obrazek);
?>
Pro práci s čárami existuje ještě funkce imagesetthickness, která nastavuje šířku čáry:
imagesetthickness (obrázek, šířka_čáry_v_pixelech)
Standardně je nastavena šířka čáry 1 pixel, ale můžeme snadno zvětšit tloušťku čáry třeba na 10 pixelů:
<?php
$obrazek = imagecreatetruecolor(468,60);
$zelena = imagecolorallocate($obrazek,0,255,0);
$cervena = imagecolorallocate($obrazek,255,0,0);
imagefilledrectangle($obrazek,0,0,467,59,$zelena);
imagesetthickness($obrazek,10);
imageline($obrazek,0,30,467,30,$cervena);
header(`Content-Type: image/png`);
imagepng($obrazek);
imagedestroy($obrazek);
?>
Jak psát do obrázků?
Do obrázků lze přímo psát i texty. A to jednoduše pomocí funkce imagestring:
imagestring (obrázek, číslo_fontu, x, y, text, barva)
Prvním parametrem je proměnná typu obrázek. Druhým parametrem je číslo fontu, následují dva parametry udávající souřadnice levého horního rohu, kam se začne psát. Předposledním parametrem je text, který se má vypsat a posledním parametrem je barva textu.
Pokud se jako číslo fontu použije číslo od jedné do pěti, znamená to vestavěné fonty. Číslo 1 představuje nejmenší font, číslo 5 je největší font.
Tady je jednoduchý příklad, který do banneru vypíše text "Ahoj!":
<?php
$obrazek = imagecreatetruecolor(468,60);
$zelena = imagecolorallocate($obrazek,0,255,0);
$cervena = imagecolorallocate($obrazek,255,0,0);
imagefilledrectangle($obrazek,0,0,467,59,$zelena);
imagestring($obrazek, 5, 0, 0, "Ahoj!", $cervena);
header(`Content-Type: image/png`);
imagepng($obrazek);
imagedestroy($obrazek);
?>