login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > PHP

Gegevens:
Geschreven door:
 Tibbeh
Moeilijkheidsgraad:
 Moeilijk
Hits:
 18471
Punten:
Aantal punten:
  (3.3)
Aantal stemmen:
 10
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (15)
 


Tutorial:

Gd Library Deel 2

Gd Library Deel 2 Door Tibbe

Enkele 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



« Vorige tutorial : Gd Library Deel 1 Volgende tutorial : TemplateEngine: TemplatePower »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.023s