E-learning kursy i szkolenia Online |||S|G|||

15. Dynamiczna grafika

15.1. Jak to działa?

Dzięki użyciu obecnej domyślnie w PHP biblioteki GD istnieje możliwość dynamicznego tworzenia plików graficznych. Grafika taka jest tworzona przez parser PHP, a następnie wysyłana do przeglądarki tak jak zwykły plik graficzny. Dzięki GD można utworzyć grafikę w różnych formatach, m.in. JPG, GIF, WBMP i PNG, przy czym zalecane jest używanie właśnie PNG, który ostatnio zaczyna wypierać GIF-y z Sieci.

15.2. Podstawy

Dynamiczną grafikę wstawia się do dokumentu tradycyjnie, używając znacznika <img>. Jedyną różnicą jest to, że atrybut src wskazuje na plik z rozszerzeniem PHP. Możliwe jest nawet uruchamianie skryptu tworzącego grafikę z parametrami podanymi jako zmienne GET. Oto, jak należy wstawić przykładowy obrazek do dokumentu:

<? echo”<img src=\”licznik.php?wizyty=”.$licz.”\” />”; ?>

Najważniejsze jest ustawienie Content-type w nagłówku, tak aby przeglądarka mogła odpowiednio zinterpretować plik. Dla przykładu:

<? header(”Content-type: image/png”); ?>

W zależności od założonego typu pliku należy ustawić odpowiedni Content-type na image/png, image/gif lub image/jpeg. Następnie należy utworzyć nowy, pusty obrazek za pomocą funkcji imagecreate(). Zwraca ona uchwyt do obrazka, coś na wzór uchwytu do pliku funkcji fopen(). Jako parametry tej funkcji trzeba podać wysokość i szerokość obrazka. Dla przykładu:

$img=imagecreate(200,200);

Można też utworzyć nowy obrazek na podstawie wzorca za pomocą funkcji imagecreatefrompng(). Jest to bardzo dobra metoda do tworzenia np. przycisków na stronie. Wystarczy utworzyć jeden obrazek z tłem i później stworzyć tylko skrypt wstawiający tekst z parametru GET na gotowe tło. Dla przykładu:

$img=imagecreatefrompng(”buttony/podklad1.png”);

Po zakończeniu tworzenia obrazka trzeba go wysłać do przeglądarki. Służą do tego funkcje imagepng(), imagejpeg(), imagegif() i imagewbmp(). Pobierają one dwa argumenty. Jako pierwszy należy podać wskaźnik do obrazka, a drugi (opcjonalny) to nazwa pliku (używamy go w momencie, gdy chcemy zapisać obrazek na serwerze).

W nazwach kilku funkcji obsługi grafiki występuje również format pliku, np. imagecreatefrompng czy imagepng. Oznacza to, że funkcja ta służy do obsługi danego formatu pliku. Do obsługi innych formatów służą inne funkcje, z innymi nazwami, np. imagecreatefromjpeg czy imagegif. Należy o tym pamiętać i podczas tworzenia obrazka trzymać się zawsze jednego formatu. Tworząc cały serwis, najlepiej tworzyć pliki graficzne w jednym wybranym formacie, chociaż najbardziej przyszłościowym wydaje się właśnie PNG.

15.3. Pierwsze rysunki ? deklaracja kolorów

Jeśli mamy już gotowy plik, warto teraz coś w nim narysować. Najpierw jednak należy zadeklarować kolory, które będą użyte podczas malowania. Do deklarowania koloru służy funkcja imagecolorallocate(), która pobiera cztery argumenty. Należy podać kolejno zmienną-obiekt z obrazkiem oraz wartości składowe: czerwoną, zieloną i niebieską wybranego koloru (od 0 do 225). Funkcja zwraca zmienną-identyfikator koloru. Dla przykładu:

<? $orange=imagecolorallocate($img,220,210,60); $white=imagecolorallocate($img,225,225,225); $black=imagecolorallocate($img,0,0,0); ?>

15.4. Wypełnianie

Do wypełniania zwartych powierzchni służy funkcja imagefill(). Należy podać cztery argumenty, zmienną id obrazka, współrzędną początkową x (left), współrzędną początkową y (top) oraz id koloru. Dla przykładu:

<? imagefill($img,0,0,$black); ?>

15.5. Linie

Aby narysować linię, należy użyć funkcji imageline(). Argumenty, które należy podać, to imageline(obrazek, x_poczatkowe, y_poczatkowe, x_koncowe, y_koncowe, kolor). Na rysunku obok widać narysowaną linię i opisane współrzędne. Dla przykładu:

<? imageline($img,120,120,190,190,$white); ?>

15.6. Kwadraty

Aby narysować kwadrat, należy użyć funkcji imagerectangle(). Argumenty, które podajemy, to imagerectangle(obrazek, x_poczatkowe, y_poczatkowe, x_koncowe, y_koncowe, kolor), przy czym x_początkowe i y_poczatkowe to współrzędne lewego górnego wierzchołka kwadratu, a x_koncowe i y_koncowe to współrzedne prawego dolnego wierzchołka. Istnieje też funkcja imagefilledrectangle() (te same argumenty), rysująca wypełniony kwadrat. Dla przykładu:

<? imagerectangle($img,10,10,30,30,$orange); imagefilledrectangle($img,30,30,50,50,$orange); ?>

15.7. Elipsy

Do rysowania elipsy należy użyć funkcji imageellipse(). Argumenty, które podajemy, to imageellipse(obrazek, x_srodka, y_srodka, x_szerokosc, y_wysokosc, kolor). Istnieje też funkcja imagefilledellipse() (te same argumenty), rysująca wypełnioną elipsę. Dla przykładu:

<? imageellipse($img,180,20,20,20,$orange); imagefilledellipse($img,20,180,20,20,$orange); ?>

15.8. Kształty bliżej nieokreślone

Jeśli musimy narysować nieregularny kształt, należy się posłużyć funkcją imagepolygon(). Argumenty, które podajemy, to imagepolygon(obrazek, tablica_wierzcholkow, ilosc_wierzcholkow, kolor). Tablica wierzchołków to tablica przygotowana według poniższego wzorca:

<? $wartosci=array( 50,50,// punkt 1 (x, y) 90,60,// punkt 2 (x, y) 80,100,// punkt 3 (x, y) 40,60,// punkt 4 (x, y) ); ?>

Pamiętajmy, żeby zmienna liczba_wierzchołkow miała taką samą wartość jak liczba, którą zadeklarowaliśmy w tablicy. W przeciwnym wypadku wystąpi błąd. Oczywiście, tak jak w innych sytuacjach, istnieje też funkcja tworzącą wypełniony wielobok ? imagefilledpolygon(). Efekt taki jak na obrazku (biały wielobok z pomarańczowym obrysem) uzyskaliśmy, wywołując dwa razy tworzenie wieloboku o tych samych wierzchołkach: raz białego z wypełnieniem, a drugi raz pomarańczowego. Dla przykładu:

<? imagefilledpolygon($img,$wartosci,4,$white); imagepolygon($img,$wartosci,4,$orange); ?>

15.9. Łuki

Schemat działania imagearc()
i kontynuacja ‘malowanki’:
Aby narysować część okręgu, należy posłużyć się funkcją imagearc(). Argumenty, które podajemy, to imagearc(obrazek, x_srodka, y_srodka, szerokosc, wysokosc, kat_poczatka, kat_konca, kolor). Łuk jest zawsze rysowany od poziomu (jak na schemacie) zgodnie z ruchem wskazówek zegara. Dla przykładu:

<? imagearc($img,120,120,100,100,90,360,$orange); ?>

Łuki wypełnione
IMG_ARC_PIE IMG_ARC_CHORD IMG_ARC_NOFILL
IMG_ARC_EDGED IMG_ARC_EDGED+IMG_ARC_NOFILL
W poprzednich funkcjach, żeby otrzymać figurę wypełnioną, wystarczyło zmienić nazwę funkcji, dodając filled. Aby narysować wypełniony łuk, należy się również posłużyć funkcją imagefilledarc(). Oprócz parametrów opisanych przy imagearc() musimy również na końcu dodać jeszcze styl wypełnienia. Cztery dostępne style to:

• IMG_ARC_PIE ? tworzy wypełniony łuk, połączony ze środkiem okręgu,
• IMG_ARC_CHORD ? tworzy wypełniony trójkąt, początek i koniec łuku są połączone prostą,
• IMG_ARC_NOFILL ? tworzy sam łuk bez wypełnienia,
• IMG_ARC_EDGED ? użyty pojedynczo wygląda tak samo jak IMG_ARC_PIE.

Dla przykładu:

<? imagefilledarc($img,40,30,100,100,30,120,$orange,IMG_ARC_PIE); ?>

Style można łączyć operatorem + (tworząc w ten sposób nowe style). Najlepszym przykładem na to jest połączenie IMG_ARC_NOFILL oraz IMG_ARC_EDGED, dzięki któremu otrzymujemy sam łuk i linie łączące jego końce ze środkiem (bez wypełnienia). Warto też samemu eksperymentować z różnymi kombinacjami stylów, które dają czasem dosyć ciekawe efekty.

15.10. Napisy

Do dodawania do obrazka napisów służy kilka funkcji. Pierwsza z nich to imagechar(). Dodaje ona do obrazka tylko jeden znak. Jej argumenty to imagechar(obrazek, wielkosc, x_poczatkowe, y_poczatkowe, znak, kolor). Wielkość to cyfra od 1 do 5 ? 1 to najmniejsza, 5 to największa. Dla przykładu:

<? imagechar($img,3,80,80,’P',$orange); ?>

Istnieje też druga funkcja dodająca po jednym znaku do obrazka. To imagecharup(). Pobiera ona te same parametry, a różni się od poprzedniej tylko tym, że rysuje znak pionowo.

15.11. Ciąg znaków

Aby dodać jakiś tekst do obrazka, nie trzeba bawić się w dodawanie po kolei każdego znaku. Wystarczy uzyć funkcji imagestring(). Parametry, które podajemy, są takie same jak w wypadku imagechar(), tylko zamiast pojedynczego znaku podaje się cały ciąg. Dla przykładu:

<? imagestring($img,5,80,80,’PHP jest OK’,$orange); ?>

Aby dodać tekst pionowo, wystarczy (podobnie jak w wypadku jednego znaku) użyć funkcji imagestringup().

15.11. Styl ciągu znaków

Domyślna czcionka w imagestring() nie jest zbyt ciekawa. Czasem zachodzi potrzeba wypisania czegoś bardziej ciekawym fontem. Z pomocą przychodzi wtedy funkcja imagettftext(), dzięki której możemy tworzyć napisy pisane dowolną czcionką True Type. Oto argumenty, które trzeba podać do funkcji:

imagettftext(obrazek, wielkosc, kat, x_poczatkowe, y_poczatkowe, kolor, plik_z_czcionka, tekst)

Wielkość to tym razem nie liczba od 1 do 5, a liczba od 5 do 150 reprezentująca wielkość w pikselach, taką jaką znamy z np. Worda. Kąt to kąt nachylenia tekstu. Wyrażenie 0 stopni to tekst pisany normalnie ? poziomo. Tym razem jednak tekst jest obracany o dany kąt przeciwnie do ruchu wskazówek zegara. Zmienne x_poczatkowe i y_poczatkowe to współrzędne lewego (dolnego) wierzchołka tekstu (a nie lewego górnego, tak jak w imagestring()!). W parametrze plik_z_czcionka należy zaś podać adres do pliku .TTF z czcionką True Type. Czcionki True Type to czcionki używane w systemie ? wystarczy skopiować taki plik z folderu C:\WINDOWS\FONTS i wgrać go na własne konto ze stroną. Dla przykładu:

<? imagettftext($img,10,315,30, 30,$orange,”folder/acmesa.ttf”,”czcionka A.C.M.E – test”); imagettftext($img,10,20,30, 140,$white,”folder/bluehigb.ttf”,”czcionki True Type”); ?>

15.12. Licznik wyświetlający grafikę

Pokażemy teraz, jak utworzyć plik licznik.php pobierający liczbę odwiedzin z parametru wizyty i wyświetlający graficznie liczbę odwiedzin. Najpierw należy ustawić odpowiednią wartość Content-type. Później kopiujemy zawartość zmiennej wizyty z tablicy _GET do zmiennej $wizyty, a w zmiennej $dl zapisujemy długość ciągu zmiennej $wizyty. Kolejno tworzymy obrazek o odpowiedniej szerokości (liczba cyfr*20) i definiujemy kolory. Pokrywamy tło na czarno i w pętli for wyświetlamy po kolei każdą cyferkę, używając funkcji imagettftext(). Na koniec wysyłamy gotowy obrazek, używając imagepng(). Dla przykładu:

<?php header(”Content-type: image/png”); $wizyty=$_GET['wizyty']; $dl=strlen($wizyty); $img=imagecreate(($dl*20),40);//szerokość zależna od liczby cyfr $orange=imagecolorallocate($img,220,210,60);//deklaracja kolorów $black=imagecolorallocate($img,0,0,0); imagefill($img,0,0,$black);//wypełnienie tła for($i=0;$i$dl;$i++) { imagettftext($img,15,0,$i*20+5,27,$orange,”gd/bluehigb.ttf”, substr($wizyty,$i,1)); } imagepng($img);//wysłanie obrazka do przeglądarki ?>

Aby teraz wstawić to do dokumentu, należy użyć znacznika <img>. Dla przykładu:

<img src=”licznik.php?wizyty=12345″ />

a tam, gdzie jest wpisane 12345, wpisać nazwę zmiennej z liczbą do wyświetlenia.