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:
[code]imagefilledrectangle()[/code]
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:
[code]imagerectangle()[/code]
narysujemy sam obrys prostokąta, popatrzmy:
[code]
<?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
?>
[/code]
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:[code]imagefilledellipse($image, $cx, $cy, $width, $height, $color);[/code]
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:
[code]
<?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
?>
[/code]
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:[code]imageline($image, $x1, $y1, $x2, $y2, $color);[/code]
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.
[code]
<?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
?>
[/code]
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:[code]imagefilledpolygon($image, $tablica_współrzędnych_punktów, $ilość_punktów, $kolor)[/code]
gdzie:
$image - uchwyt do obrazka
$tablica_współrzędnych_punktów - tablica ze wszystkimi współrzędnymi,np.
[code]
array(
10, 10, //punkt pierwszy x, y
10,30, //punkt drugi x, y
30,80 //punkt trzeci x, y
)
[/code]
$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
[code]
<?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
?>
[/code]
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:
[code]imagefilledarc($image, $cx, $cy, $width, $height, $start_angle, $end_angle, $color, $styl);[/code]
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"
[code]
<?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
?>
[/code]
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:
[code]imagechar($image, $font_size, $x, $y, $char, $color);[/code]
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:
[code]imagecharup($image, $font_size, $x, $y, $char, $color);[/code]
dokonamy tego samego, tyle że w pionie.
Przetestujmy jak to działa:
[code]
<?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
?>
[/code]
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:[code]imagestring($image, $font_size, $x, $y, $string, $color);[/code]
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:
[code]
<?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
?>
[/code]
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! :)