W tej krótkiej części przyjrzymy się najczęściej używanym, podstawowym funkcjom służącym do rysowania na obrazku standardowych kształtów. W poprzedniej części, w podstawach narysowaliśmy prosty prostokąt, tym razem na początek narysujmy sobie elipsę. Wróćmy jednak jeszcze na moment do rysowania wypełnionego prostokąta z poprzedniej części. Użyliśmy tam funkcji:
- imagefilledrectangle()
Z wypełnieniem i bez - filled...
Warto wiedzieć, że funkcja ta (jak i jej podobne) posiada także swój odpowiednik rysujący taki sam prostokąt, ale bez wypełniania go kolorem. Funkcje rysujące bez wypełniania kolorem nie zawierają w nazwie filled, czyli z ang. wypełnienie.I tak, za pomocą funkcji:
- imagerectangle()
narysujemy sam obrys prostokąta, popatrzmy:
- <?php
- $width = 400;
- $height = 300;
- $image = imagecreatetruecolor($width, $height);
- // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
- $black = imagecolorallocate($image, 0, 0, 0);
- // zdefiniowaliśmy kolor czarny dla tła
- $red = imagecolorallocate($image, 255, 0, 0);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
- imagefill($image, 0, 0, $black);
- // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
- imagerectangle($image, 20, 20, 100, 120, $red);
- // wypełniliśmy obszar od 20-100px w poziomie i 20-120px w pionie
- header("Content-type: image/png");
- // definiujemy nagłówek z mimetype
- imagepng($image);
- // generujemy obrazek PNG
- imagedestroy($image);
- // zwalniamy uchwyt do obrazka
- ?>
Wynikiem jest niewypełniony prostokąt, w tym przypadku wartość koloru została wykorzystana do określenia koloru obrysu.
Analogicznie będzie z wszystkimi pozostałymi funkcjami jakie tutaj poznamy - wszystkie one posiadają wersję wypełniające tło i niewypełniające go.
Rysujemy elipsę - imagefilledellipse()
Narysujmy teraz elipsę, albo nawet dwie, lub trzy. Służy do tego funkcja:
- imagefilledellipse($image, $cx, $cy, $width, $height, $color);
gdzie:
- $image - uchwyt naszego obrazka
- $cx = punkt środkowy elipsy w osi X
- $cy = punkt środkowy elipsy w osi Y
- $width - szerokość elipsy
- $height - wysokość elipsy
- $color - kolor wypełnienia
Przygotujmy dodatkowe kolory, tym razem zielony i biały i narysujmy trzy elipsy, z czego elipsa zielona będzie o kształcie koła (taka sama szerokość i wysokość), a biała nie będzie posiadac wypełnienia:
- <?php
- $width = 400;
- $height = 300;
- $image = imagecreatetruecolor($width, $height);
- // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
- $black = imagecolorallocate($image, 0, 0, 0);
- // zdefiniowaliśmy kolor czarny dla tła
- $red = imagecolorallocate($image, 255, 0, 0);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
- $white = imagecolorallocate($image, 255, 255, 255);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
- $green = imagecolorallocate($image, 0, 255, 0);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $green
- imagefill($image, 0, 0, $black);
- // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
- imagefilledellipse($image, 200, 200, 100, 120, $red);
- // #1 rysujemy pierwszą elipsę (czerwoną), o środku w punkcie 200x200 i szerokości 100x120px
- imagefilledellipse($image, 300, 80, 100, 100, $green);
- // #2 rysujemy drugą elipsę (zieloną), o środku w punkcie 300x80 i szerokości 100x100px
- imageellipse($image, 50, 50, 40, 40, $white);
- // #3 rysujemy trzecią elipsę (białą), bez wypełnienia o środku w punkcie 50x50 i szerokości 40x40px
- header("Content-type: image/png");
- // definiujemy nagłówek z mimetype
- imagepng($image);
- // generujemy obrazek PNG
- imagedestroy($image);
- // zwalniamy uchwyt do obrazka
- ?>
Wynik:
Jak widać rysowanie elipsy jest zbliżone do rysowania prostokąta, z tym, że tutaj podajemy punkty środkowe i szerokość/wysokość zamiast współrzędnych początkowych i końcowych.
Rysujemy linie - imageline()
Poprowadzimy teraz linię, którą rysuje się za pomocą następującej funkcji:
- imageline($image, $x1, $y1, $x2, $y2, $color);
gdzie:
- $image - uchwyt do obrazka
- $x1 - punkt początkowy na osi X
- $y1- punkt początkowy na osi Y
- $x2 - punkt końcowy na osi X
- $y2- punkt końcowy na osi Y
- $color - kolor linii
Jak widać skadnia identyczna jak podczas rysowania prostokąta.
Naszą linię poprowadźmy od środka czerwonej elipsy do środka elipsy zielonej, a więc podawając jako x1 i y1 współrzędne środka czerwonej elipsy, a jako x2 i y2 współrzędne środka elipsy zielonej.
Nasza linia będzie niebieska, a więc utworzymy kolejny kolor, tym razem niebieski.
- <?php
- $width = 400;
- $height = 300;
- $image = imagecreatetruecolor($width, $height);
- // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
- $black = imagecolorallocate($image, 0, 0, 0);
- // zdefiniowaliśmy kolor czarny dla tła
- $red = imagecolorallocate($image, 255, 0, 0);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
- $white = imagecolorallocate($image, 255, 255, 255);
- // zdefiniowaliśmy kolor biały i zapisaliśmy go do zmiennej $white
- $green = imagecolorallocate($image, 0, 255, 0);
- // zdefiniowaliśmy kolor zielony i zapisaliśmy go do zmiennej $green
- $blue = imagecolorallocate($image, 0, 0, 255);
- // zdefiniowaliśmy kolor niebieski zapisaliśmy go do zmiennej $blue
- imagefill($image, 0, 0, $black);
- // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
- imagefilledellipse($image, 200, 200, 100, 120, $red);
- // #1 rysujemy pierwszą elipsę (czerwoną), o środku w punkcie 200x200 i szerokości 100x120px
- imagefilledellipse($image, 300, 80, 100, 100, $green);
- // #2 rysujemy drugą elipsę (zieloną), o środku w punkcie 300x80 i szerokości 100x100px
- imageellipse($image, 50, 50, 40, 40, $white);
- // #3 rysujemy trzecią elipsę (białą), bez wypełnienia o środku w punkcie 50x50 i szerokości 40x40px
- imageline($image, 200, 200, 300, 80, $blue);
- // #4 rysujemy linię ze środka elipsy czerwonej (200, 200) do środka elipsy zielonej (300, 80)
- header("Content-type: image/png");
- // definiujemy nagłówek z mimetype
- imagepng($image);
- // generujemy obrazek PNG
- imagedestroy($image);
- // zwalniamy uchwyt do obrazka
- ?>
Wynik:
Prawda, że proste?
Rysujemy poligony - imagefilledpolygon()
Narysujmy teraz poligon. Tutaj jest ciekawa sprawa, ponieważ w tym przypadku możemy podać dowolną ilość punktów, a robimy to za pomocą tablicy. Popatrzmy jak wygląda składnia funkcji rysującej poligon złożony z dowolnej ilości punktów:
- imagefilledpolygon($image, $tablica_współrzędnych_punktów, $ilość_punktów, $kolor)
gdzie:
$image - uchwyt do obrazka
$tablica_współrzędnych_punktów - tablica ze wszystkimi współrzędnymi,np.
- array(
- 10, 10, //punkt pierwszy x, y
- 10,30, //punkt drugi x, y
- 30,80 //punkt trzeci x, y
- )
$ilość_punktów - musi odpowiadać ilości punktów podanych w tablicy
$kolor - kolor wypełnienia
Zrezygnujmy z naszej linii i narysujmy tym razem poligon składający się z trzech punktów, które będą środkami naszych wszystkich trzech okręgów.
Żeby tym razem się nie powtarzać z wartościami, współrzędne dla okręgów (i naszego poligonu) określimy sobie w zmiennych $cx1, $cx2...itd
- <?php
- $width = 400;
- $height = 300;
- $image = imagecreatetruecolor($width, $height);
- // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
- // współrzędne środków okręgów:
- $cx1 = 200; // czerwony X
- $cy1 = 200; // czerwony Y
- $cx2 = 300; // zielony X
- $cy2 = 80; // zielony Y
- $cx3 = 50; // biały X
- $cy3 = 50; // biały Y
- // punkty dla poligonu:
- $polygon_points = array(
- $cx1, $cy1,
- $cx2, $cy2,
- $cx3, $cy3
- );
- $black = imagecolorallocate($image, 0, 0, 0);
- // zdefiniowaliśmy kolor czarny dla tła
- $red = imagecolorallocate($image, 255, 0, 0);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
- $white = imagecolorallocate($image, 255, 255, 255);
- // zdefiniowaliśmy kolor biały i zapisaliśmy go do zmiennej $white
- $green = imagecolorallocate($image, 0, 255, 0);
- // zdefiniowaliśmy kolor zielony i zapisaliśmy go do zmiennej $green
- $blue = imagecolorallocate($image, 0, 0, 255);
- // zdefiniowaliśmy kolor niebieski zapisaliśmy go do zmiennej $blue
- imagefill($image, 0, 0, $black);
- // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
- imagefilledellipse($image, $cx1, $cy1, 100, 120, $red);
- // #1 rysujemy pierwszą elipsę (czerwoną), o środku w punkcie 200x200 i szerokości 100x120px
- imagefilledellipse($image, $cx2, $cy2, 100, 100, $green);
- // #2 rysujemy drugą elipsę (zieloną), o środku w punkcie 300x80 i szerokości 100x100px
- imageellipse($image, $cx3, $cy3, 40, 40, $white);
- // #3 rysujemy trzecią elipsę (białą), bez wypełnienia o środku w punkcie 50x50 i szerokości 40x40px
- imagefilledpolygon($image, $polygon_points, 3, $blue);
- // rysujemy polygon z tzrech punktów
- header("Content-type: image/png");
- // definiujemy nagłówek z mimetype
- imagepng($image);
- // generujemy obrazek PNG
- imagedestroy($image);
- // zwalniamy uchwyt do obrazka
- ?>
Oto wynik naszego działania:
Prawda, że proste?
Rysujemy wypełnienie kołowe - imagefilledarc()
Narysujmy teraz coś bardziej skomplikowanego - wypełnienie kątowe.Stworzy nam to cząstkę okręgu opartą na zadanych kącie, co jest przydatne w generowaniu wykresów kołowych. Funkcja do tego służąca to:
- imagefilledarc($image, $cx, $cy, $width, $height, $start_angle, $end_angle, $color, $styl);
gdzie:
- $image - uchwyt naszego obrazka
- $cx = punkt środkowy elipsy w osi X
- $cy = punkt środkowy elipsy w osi Y
- $width - szerokość elipsy
- $height - wysokość elipsy
- $start_angle - kąt początkowy (w stopniach)
- $end_angle - kąt końcowy (w stopniach)
- $color - kolor wypełnienia
- $styl - określa sposób łączenia punktu początkowego z końcowym, możliwe parametry:
IMG_ARC_PIE - łączenie kołowe
IMG_ARC_CHORD - łączenie linią prostą
IMG_ARC_NOFILL - bez wypełnienia
IMG_ARC_EDGED - daje jedynie obrys całości.
Zrezygnujemy teraz z naszych elips i w ich miejsce narysujemy sobie kilka "arców"
- <?php
- $width = 400;
- $height = 300;
- $image = imagecreatetruecolor($width, $height);
- // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
- // współrzędne środków okręgów:
- $cx1 = 200; // czerwony X
- $cy1 = 200; // czerwony Y
- $cx2 = 300; // zielony X
- $cy2 = 80; // zielony Y
- $cx3 = 50; // biały X
- $cy3 = 50; // biały Y
- $black = imagecolorallocate($image, 0, 0, 0);
- // zdefiniowaliśmy kolor czarny dla tła
- $red = imagecolorallocate($image, 255, 0, 0);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
- $white = imagecolorallocate($image, 255, 255, 255);
- // zdefiniowaliśmy kolor biały i zapisaliśmy go do zmiennej $white
- $green = imagecolorallocate($image, 0, 255, 0);
- // zdefiniowaliśmy kolor zielony i zapisaliśmy go do zmiennej $green
- $blue = imagecolorallocate($image, 0, 0, 255);
- // zdefiniowaliśmy kolor niebieski zapisaliśmy go do zmiennej $blue
- imagefill($image, 0, 0, $black);
- // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
- imagefilledarc($image, $cx1, $cy1, 100, 120, 0, 180, $red, IMG_ARC_PIE);
- // #1 rysujemy wypełnienie koła (czerwone), o środku w punkcie 200x200 i szerokości 100x120px, zaczynając od kąta 0, do kąta 180
- imagefilledarc($image, $cx2, $cy2, 100, 100, 0, 90, $green, IMG_ARC_CHORD);
- // #2 rysujemy wypełnienie koła (zielone), o środku w punkcie 300x80 i szerokości 100x100px, zaczynając od kąta 0, do kąta 90
- imagearc($image, $cx3, $cy3, 40, 40, 45, 70, $white);
- // #3 rysujemy koło (białe), bez wypełnienia, o środku w punkcie 50x50 i szerokości 40x40px, zaczynając od kąta 45, do kąta 70
- header("Content-type: image/png");
- // definiujemy nagłówek z mimetype
- imagepng($image);
- // generujemy obrazek PNG
- imagedestroy($image);
- // zwalniamy uchwyt do obrazka
- ?>
Wynik:
Dołączamy pojedyńczy znak - imagechar()
Ostatnią rzeczą jaką omówimy w tym artykule jest rysowanie tekstu. Narazie wykonamy to prostą metodą, a w następnych artykułach nauczymy się wykorzystywac do tego zewnętrzne czcionki TrueType.Pojedyńczy znak na obrazku generujemy za pomocą funkcji:
- imagechar($image, $font_size, $x, $y, $char, $color);
gdzie:
- $image - uchwyt do obrazka
- $font_size - rozmiar czcionki od 1 do 5
- $x - współrzędna na osi X
- $y - współrzędna na osi Y
- $char - znak do napisania na obrazku
- $color - kolor czcionki
Za pomocą funkcji:
- imagecharup($image, $font_size, $x, $y, $char, $color);
dokonamy tego samego, tyle że w pionie.
Przetestujmy jak to działa:
- <?php
- $width = 400;
- $height = 300;
- $image = imagecreatetruecolor($width, $height);
- // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
- $black = imagecolorallocate($image, 0, 0, 0);
- // zdefiniowaliśmy kolor czarny dla tła
- $red = imagecolorallocate($image, 255, 0, 0);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
- $white = imagecolorallocate($image, 255, 255, 255);
- // zdefiniowaliśmy kolor biały i zapisaliśmy go do zmiennej $white
- $green = imagecolorallocate($image, 0, 255, 0);
- // zdefiniowaliśmy kolor zielony i zapisaliśmy go do zmiennej $green
- $blue = imagecolorallocate($image, 0, 0, 255);
- // zdefiniowaliśmy kolor niebieski zapisaliśmy go do zmiennej $blue
- imagefill($image, 0, 0, $black);
- // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
- imagechar($image, 5, 10, 10, "P", $red);
- imagechar($image, 5, 50, 50, "H", $green);
- imagechar($image, 5, 100, 100, "P", $blue);
- header("Content-type: image/png");
- // definiujemy nagłówek z mimetype
- imagepng($image);
- // generujemy obrazek PNG
- imagedestroy($image);
- // zwalniamy uchwyt do obrazka
- ?>
Wynik:
Dołączamy ciąg tekstowy - imagestring()
A teraz to samo, ale nie z pojedyńczym znakiem, ale z całym stringiem, służy do tego funkcja:
- imagestring($image, $font_size, $x, $y, $string, $color);
gdzie:
- $image - uchwyt do obrazka
- $font_size - rozmiar czcionki od 1 do 5
- $x - współrzędna na osi X
- $y - współrzędna na osi Y
- $string - ciąg znaków do napisania na obrazku
- $color - kolor czcionki
Sprawdżmy w praktyce:
- <?php
- $width = 400;
- $height = 300;
- $image = imagecreatetruecolor($width, $height);
- // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
- $black = imagecolorallocate($image, 0, 0, 0);
- // zdefiniowaliśmy kolor czarny dla tła
- $red = imagecolorallocate($image, 255, 0, 0);
- // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
- $white = imagecolorallocate($image, 255, 255, 255);
- // zdefiniowaliśmy kolor biały i zapisaliśmy go do zmiennej $white
- $green = imagecolorallocate($image, 0, 255, 0);
- // zdefiniowaliśmy kolor zielony i zapisaliśmy go do zmiennej $green
- $blue = imagecolorallocate($image, 0, 0, 255);
- // zdefiniowaliśmy kolor niebieski zapisaliśmy go do zmiennej $blue
- imagefill($image, 0, 0, $black);
- // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
- imagestring($image, 2, 10, 10, "PHP", $red);
- imagestring($image, 3, 50, 50, "EVERYWHERE", $green);
- imagestring($image, 5, 100, 100, "BLOG", $blue);
- header("Content-type: image/png");
- // definiujemy nagłówek z mimetype
- imagepng($image);
- // generujemy obrazek PNG
- imagedestroy($image);
- // zwalniamy uchwyt do obrazka
- ?>
Wynik:
Jak widać korzystanie z wszystkich tych funkcji jest bardzo proste i ogranicza się do poznania ich składni. Funkcji tych jest bardzo dużo, polecam zajrzeć do manuala, który znajduje się tutaj:
http://php.net/manual/en/ref.image.php
W następnych artykułach nauczymy się operacji na obrazkach - wczytywania obrazka z pliku, obracania go, skalowania, aplikowania filtrów i zapisywania na dysk, a także wielu innych rzeczy.
Brak komentarzy:
Prześlij komentarz
Masz sugestię? Znalazłeś błąd? Napisz komentarz! :)