Gd Library Deel 2
Gd Library Deel 2 Door TibbeEnkele simpele grafische effecten.
1. Een lijn toevoegen
2. Een vierhoek tekenen
3. Hoe maak ik een button ?
(in deze tut leg ik enkel nieuwe stappen uit)
1. Een lijn toevoegen
Wens je een lijn toe te voegen in je pagina ?
Dit gaat met de functie
ImageLine( );
<?php
header("content-type: image/png");
$image = ImageCreate(300, 150);
$achtergrond = ImageColorAllocate($image, 255, 255, 255);
$grootte = 20;
$tekst = Sitemasters;
$kleur = ImageColorAllocate($image, 255, 0, 0);
$font = 'fonts/courbd.ttf';
ImageTTFText($image, $grootte, 3, 60, 75, $kleur, $font, $tekst);
//De uitleg van image line volgt hieronder
ImageLine($image, 0, 0, 300, 150, $kleur); //Deze gaat van linksboven naar rechtsonder
ImageLine($image, 300, 0, 0, 150, $kleur); //Deze gaat van rechtsboven naar linksonder
ImageLine($image, 150, 0, 150, 150, $kleur); //Deze gaat van het midden van het bovenste naar het middenste van het onderste
ImageLine($image, 0, 75, 300, 75, $kleur); //Deze gaat van het midden van de ene hoogt naar het midden van de andere hoogte
ImagePNG($image);
ImageDestroy($image);
?>
|
Je komt nu een mooi plaatje uit, 2 diagonalen en 2 middelloodlijnen.
Uitleg functie ImageLine( );
Lijkt ingewikkeld he ? maar Het valt echt goed mee.
ImageLine(Afbeelding, Start op X-as, Start op Y-As, Einde X-as, Einde Y-as, Kleur);
In ons geval was dit dus :
ImageLine($image, 0, 0, 300, 150, $kleur); //Deze gaat van linksboven naar rechtsonder
ImageLine($image, 300, 0, 0, 150, $kleur); //Deze gaat van rechtsboven naar linksonder
ImageLine($image, 150, 0, 150, 150, $kleur); //Deze gaat van het midden van het bovenste naar het middenste van het onderste
ImageLine($image, 0, 75, 300, 75, $kleur); //Deze gaat van het midden van de ene hoogt naar het midden van de andere hoogte
Onze grafische kant met GD begint al goed te worden he ?
Top
2. Een vierhoek tekenen
Dit is al iets ingewikkelder, Alhoewel, op 10 min had ik het door :P
We maken 2 vierhoeken, eentje met rechte hoeken en dan een gewone fictieve
waarbij de coördinaten gewoon om te spelen waren.
Dit werkt met de functie ImagePolygon( );
<?php
header("content-type: image/png");
$image = ImageCreate(300, 300);
$bg = ImageColorAllocate($image, 255, 255, 255);
$kleur = ImageColorAllocate($image, 255, 0, 0);
//Hier zal een uitleg over gegeven worden !!
ImagePolygon($image, array( 50, 50,
50, 250,
250, 250,
250,50,
), 4, $kleur);
ImagePolygon($image, array( 15, 50,
15, 275,
260, 280,
270,15,
), 4, $kleur);
ImagePNG($image);
ImageDestroy($image);
?>
|
Dit is ons resultaat:
Uitleg functie ImagePolygon( );
ImagePolygon(afbeelding, coördinaten , aantal punten, kleur);
In ons geval was dit :
ImagePolygon($image, array( 15, 50,
15, 275,
260, 280,
270,15,
), 4, $kleur);
De coördinaten heb ik gedaan met de functie array(
); en verloopt array(x1, y1, x2, y3,.......);
Dit is ook mogelijk met deze functie om het iets makkelijker te maken :
$punt[0] = x0;
$punt[1] = y0;
$punt[2] = x1;
$punt[3] = y1;
$punt[4] = x2;
$punt[5] = y2;
$punt[6] = x3;
$punt[7] = y3;
...
Dan word je
ImagePolygon( );
zoals dit :
ImagePolygon($image, $punt, 4, $kleur);
Hopelijk versta je het ?
Top
3. Hoe maak ik een button ?
Juist hetzelfde principe als de vierhoek, denk je niet ?
Het geheim zit hem bij enkele kleine effectjes.(pixel randje)
We beginnen nu met een mooie button met de tekst Sitemasters erop.
<?php
header("content-type: image/png");
$image = ImageCreate(150, 35);
$bg = ImageColorAllocate($image, 197, 197, 197); //Een zeer licht grijs
$zwart = ImageColorAllocate($image, 51, 51, 51); //51, 51, 51 is zwart (textkleur)
$grijs = ImageColorAllocate($image, 102, 102, 102); // 102, 102, 102 is gelijk aan #666666 (grijs)
$font = 'fonts/courbd.ttf';
$tekst = 'Sitemasters';
//De 2 randen creëren
ImagePolygon($image, array( 1, 1,
149, 1,
149, 34,
1, 34,
), 4, $zwart);
ImagePolygon($image, array( 3, 3,
147, 3,
147, 32,
3, 32,
), 4, $grijs);
//De tekst aanmaken
ImageTTFText($image, 15, 0, 10, 23, $zwart, $font, $tekst);
ImagePNG($image);
ImageDestroy($image);
?>
|
Voorbeeld :
Dit was het 2e deel over GD library, zelf heb ik ook een deel bijgeleerd hoor.
Ik hoop dat jullie er iets aan hebben !
~Tibbe
Top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
