Kurs PHP by Ostry

Dynamiczna grafika

Jak to działa?

Dzięki użyciu obecnej domyślnie w PHP biblioteki GD, istnieje mozliwość dynamicznego tworzenia plików graficznych. Grafika taka jest tworzona przez parser PHP a następnia 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ć gify z sieci.

Zaczynamy - kompletna teoria

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żniejszą rzeczą jest ustawienie Content-type w nagłówku, aby przeglądarka mogła odpowiednio zinterpretować plik.

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

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

  $img=imagecreate(200,200);

Można też utworzyć nowy obrazek na podstawie wzroca funkcją imagecreatefrompng(). Jest to bardzo dobra metoda do tworzenia buttonów. Wystarczy utworzyć 1 obrazek z tłem i potem stworzyć tylko skrypt wstawiający tekst z parametru GET na gotowe tło. I button gotowy!

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

Po zakończeniu tworzenia obrazka, trzeba go wysłać do przeglądarki. Służą to tego funkcje imagepng(), imagejpeg(), imagegif(), imagewbmp(). Pobierają 2 argumenty. Jako pierwszy nalezy podać wskaźnik do obrazka, a drugi opcjonalny to nazwa pliku, jeśli chce się, aby obrazek został zapisany na serwerze. Aby dowiedzieć się czym różnią się te cztery funkcje, czytaj opis w następnym paragrafie.


W nazwach kilku fukcji obsługi grafiki występuje na koncu format pliku. Np:
  • imagecreatefrompng
  • 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- do obsługi jpeg-ów
  • imagegif- do obługi gif-ów
Należy o tym pamiętać i podczas tworzenia obrazka trzymać się jednego zawsze formatu. Najlepiej tworząc cały serwis, tworzyć pliki graficzne w jednym dowolnym formacie, chociaż najbardziej przyszłościowym wydaje się wybijający się PNG.

Pierwsze rysunki - deklaracja kolorów

Jeśli gotowy jest już plik, warto teraz cos w nim narysować. Najpierw jednak nalezy zadeklarować kolory, które będa użyte przy malowaniu. Do deklarowania koloru służy funkcja imagecolorallocate(), które pobiera cztery argumenty. Jako argumenty nalezy podać kolejno zmienną-obiekt z obrazkiem oraz wartości składowe: czeroną, zieloną i niebieską wybranego koloru (od 0 do 225). Funkcja zwraca zmienną-identyfikator koloru.

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

Wypełnianie

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

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

Linie

Aby narysować linię, należy użyć funkcji imageline(). Argumenty jakie nalezy podać toimageline(obrazek, x_poczatkowe, y_poczatkowe, x_koncowe, y_koncowe, kolor). Na rysunku obok widać narysowaną linię, i opisane wsółrzędne.

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

Kwadraty

Do rysowania kwadratu należy użyć funkcji imagerectangle(). Argumenty jakie nalezy podać toimagerectangle(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), rusująca wypełniony kwadrat.

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

Elipsy

Do rysowania kwadratu należy użyć funkcji imageellipse(). Argumenty jakie nalezy podać toimageellipse(obrazek, x_srodka, y_srodka, x_szerokosc, y_wysokosc, kolor). Istnieje też funkcja imagefilledellipse() (te same argumenty), rysująca wypełnioną elipsę.

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

Kształty bliżej nieokreślone

Jeśli jest do narysowania nieregualrny kształt należy się posłużyć funkcją imagepolygon(). Argumenty jakie nalezy podać toimagepolygon(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)
  );
?>

Należy pamiętać, aby liczba_wierzchołkow ustawić dokładnie tyle samo, ile zadeklarowane jest w tablicy. Inaczej nastąpi błąd. Oczywiście, tak jak w innych przypadkach istnieje też funkcja tworzącą wypełniony wielobok - imagefilledpolygon(). Efekt taki jak na obrazku po lewej (biały wielobok z pomarańczowym obrysem) uzyskałem wywołując dwa razy tworzenie wieloboku o tych samych wierzchołkach. Raz białego z wypełnieniem a drugi raz pomarańczowego. ( $wartości to tablica zadeklarowana kawałek wcześniej)

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

Łuki

Schemat działania imagearc()


i kontynuacja 'malowanki':

Aby narysować część okręgu nalezy posłużyć się funkcją imagearc(). Argumenty jakie nalezy podać toimagearc(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.

<?
  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, aby otrzymać figurę wypełnioną wystarczyło zmienić nazwę funkcji, dodając filled. Aby narysować wypełniony łuk należy się faktycznie posłużyć funkcją imagefilledarc(). Oprócz tych parametrów opisanych przy imagearc() należy na końcu dodać jeszcze styl wypełnienia. 4 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- sam łuk bez wypełnienia
  • IMG_ARC_EDGED- użyty pojedynczo wygląda tak samo jakIMG_ARC_PIE
<?
  imagefilledarc($img,40,30,100,100,30,120,$orange,IMG_ARC_PIE);
?>

Style można łączyć operatorem+i tworzyć nowe style. Najlepszym przykładem na to jest połączenieIMG_ARC_NOFILLorazIMG_ARC_EDGED, dzięki któremu otrzymujemy sam łuk i linie łączące jego końce ze środkiem, bez wypełnienia. Warto też samemu poeksperymentować z różnymi kombinacjami stylów, które tworzą czasem dosyć ciekawe efekty.
Tutajznajduje się przykład użycia wypełnionych różnymi stylami łuków użytych do stworzenia trójwymiarowego 'tortu' (źródło php.net).

Napisy

Jeden znak




Do dodawania do obrazka napisów służy kilka funkcji. Pierwsza z nich to imagechar(). Dodaje do obrazka tylko 1 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.

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

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

Ciąg znaków




Aby dodać jakiś tekst do obrazka nie trzeba bawić się w dodawanie po kolei każdego znaku. Wystarczy uzyć funkcjiimagestring(). Parametry jakie nalezy podać są takie same jak w przypadkuimagechar(), tylko zamiast 1 znaku podaje się cały ciąg.

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

Aby dodać tekst pionowo, wystarczy podobnie jak z jednym znakiem użyć funkcji imagestringup().

Ciąg znaków własną czcionką

Domyślna czcionka wimagestring()nie jest zbyt ciekawa. Czasem zachodzi potrzeba wypisania czegoś jakąś bardziej ciekawą czcionką. Z pomocą przychodzi wtedy funkcjaimagettftext(), dzięki której możemy tworzyć napisy pisane dowolną czcionką True Type. Oto argumenty jakie trzeba podac do funkcji:
imagettftext(obrazek, wielkosc, kat, x_poczatkowe, y_poczatkowe, kolor, plik_z_czcionka, tekst)
I kilka objaśnień: wielkość to tym razem nie liczba od 1 do 5, a liczba o 5 do 150 reprezentująca wielkość w pixelach, taką jaką znamy z np. Worda. kat to kąt nachylenia tekstu. 0 stopni to tekst pisany normalnie - poziomo. Tym razem jednak tekst jest obracany o dany kąt przeciwnie do ruchu wskazówek zegara. x_poczatkowe i y_poczatkowe to współrzędnelewego-dolnegowierzchołka tekstu (a nie lewego-górnego tak jak wimagestring()!). A w parametrze plik_z_czcionka należy 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ą.

<?
  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");
?>

Tutajmożesz pobrać czcionki użyte w tym przykładzie.

Obie czcionki użyte w przykładzie są pobrane ze stron udostępniających darmowe czcionki i nie są chronione prawami autorskimi.

Licznik wyświetlający grafikę

Pokaże teraz jak utworzyć plik licznik.php pobierający ilośc odwiedzin z parametru wizyty i wyświetlający graficznie liczbę odwiedzin. Najpierw należy ustwaić odpowiedni Content-type. Potem kopiuje zawartośc zmiennej wizyty z tablicy _GET to zmiennej $wizyty a w zmiennej $dl zapisuje długość ciągu zmiennej $wizyty. Potem tworzę obrazek o opowiedniej szerokości (ilośc cyfr*20) i definiuje kolory. Pokrywam tło na czarno i w pętli for wyświetlam po kolei kazda cyferkę używającimagettftext(). Na koniec wysyłam gotowy obrazek używającimagepng().

<?php
  header("Content-type: image/png");
  $wizyty=$_GET['wizyty'];
  $dl=strlen($wizyty);
  $img=imagecreate(($dl*20),40);//szerokośc zalezna 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
?>

Tutajmożesz pobrać gotowy kod licznika. Aby teraz wstawić to do dokumentu, należy użyć znacznika img: <img src="licznik.php?wizyty=12345" /> a tam gdzie jest wpisane 12345 wpisać nazwę zmiennej z liczbą do wyświetlenia.



Do strony głównej Valid XHTML 1.1 ©Copyright byPiotr 'Ostry' Ostalecki