OPPITUNTI 14 Dynaamisten kuvien käsittely

14. Dynaamisten kuvien käsittely 249 OPPITUNTI 14 Dynaamisten kuvien käsittely Tässä luvussa käsiteltävät funktiot liittyvät avoimeen lähdekirjastoon nimeltä GD. GD-kirjasto on joukko työkaluja, joiden avulla ohjelmoijat voivat luoda ja käsitellä kuvia lennosta. Saat lisätietoa GD-kohteesta osoitteesta http://www.boutell.com/gd/. Jos järjestelmääsi on asennettu GD-kirjasto ja PHP on käännetty käyttämään sitä, voit käyttää PHP:n kuvafunktioita luodaksesi dynaamisia kuvia. Monissa järjestelmissä on edelleen käytössä vanhempi kirjastoversio, jonka avulla voidaan luodaan GIF-kuvia. Myöhemmät versiot eivät tue GIF-muotoa lisenssisyistä. Jos järjestelmäsi käyttää myöhempää kirjastoa, on mahdollista kääntää PHP niin, että kuvafunktiot tuottavat PNG-kuvia, joita useimmat selaimet tukevat. Jos käytössäsi on GD-kirjasto, voit käyttää PHP:n kuvafunktioita luodaksesi kehittynyttä grafiikkaa ajon aikana. Tämän tunnin aiheita ovat seuraavat: Kuinka luot ja tulostat kuvan Kuinka käsittelet värejä Kuinka piirrät kuvioita (esimerkiksi kaaria, suorakaiteita ja monikulmioita) Kuinka täytät alueita väreillä Kuinka käsittelet True Type fontteja

250 14. Dynaamisten kuvien käsittely Kuvien luominen ja tulostaminen Ennen kuin aloitat kuvien käsittelyn, sinun on saatava kuvan tunniste. Voit saada sen käyttämällä imagecreate()-funktiota. Se ottaa kaksi argumenttia, kuvan korkeuden ja leveyden. Se palauttaa kuvan tunnisteen, jota voit käyttää useimmissa tämän luvun funktioissa. Kun olet saanut kuvan tunnisteen, olet melkein valmis tulostamaan ensimmäisen kuvasi selaimelle. Se tehdään imagegif()-funktiolla, joka ottaa argumentikseen kuvan tunnisteen. Listaus 14.1 käyttää näitä funktioita luodakseen ja tulostaakseen kuvan. Listaus 14.1 Dynaamisesti luotu kuva 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: imagegif($image); 5:?> Huomaa, että lähetimme Content-type-otsikon selaimelle ennen muita toimintoja. Meidän on kerrottava selaimelle, millaista tietoa sen tulee odottaa; muutoin se käsittelee skriptin tulostamaa tietoa HTML-koodina. Tätä skriptiä voidaan nyt kutsua suoraan selaimen toimesta tai se voi olla osana IMG-elementtiä. <img src="eg14.1.php" alt="a PHP generated image"> Kuva 14.1 esittää listauksen 14.1 tulostuksen. KUVA 14.1 Dynaamisesti luotu kuva. Olemme luoneet neliön, mutta emme ole vielä puuttuneet sen väriin.

14. Dynaamisten kuvien käsittely 251 Värin toteuttaminen Värin käsittelyssä tarvitaan ensimmäiseksi värin tunniste. Se saadaan imagecolorallocate()-funktiolla, joka ottaa argumenteikseen kuvan tunnisteen sekä kolme kokonaislukua, jotka ovat väliltä 0 255 ja jotka kuvaavat punaisen, vihreän ja sinisen värikomponentin osuutta. Funktio palauttaa väritunnisteen, jolla voidaan määrittää kuvioiden, tekstin tai täytön väri. $red = imagecolorallocate($image, 255,0,0); Sattumalta imagecolorallocate()-funktio asettaa ensimmäisen kutsun yhteydessä generoidun värin kuvan oletusväriksi, joten jos lisäämme yllä olevan koodin listaukseen 14.1, saamme aikaan punaisen neliön. Viivojen piirtäminen Ennen kuin piirrät viivan kuvaan, sinun on määritettävä viivan alku- ja loppupisteet. Voit pitää kuvaa pikselilohkona, jossa pikselit alkavat indeksistä 0. Origo on kuvan vasemmassa yläkulmassa. Toisin sanoen esimerkiksi koordinaatit 5, 8 kuvaavat kuudennetta pikselia oikealle ja yhdeksännettä pikseliä alaspäin. Funktio imageline() piirtää viivan kahden pikselipaikan väliin. Se ottaa argumenteikseen kuvatunnisteen ja neljä kokonaislukua, jotka kuvaavat alku- ja loppupisteen koordinaatteja, sekä väritunnisteen. Listaus 14.2 lisää listauksen 14.1 kuvaan viivan, joka kulkee kulmasta kulmaan. Listaus 14.2 Viivan piirtäminen imageline()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: imageline( $image, 0, 0, 199, 199, $blue ); 7: imagegif($image); 8:?> Toteutamme nyt kaksi väritunnistetta, yhden punaiselle ja yhden siniselle värille. Sitten käytämme muuttujaan $blue tallennettua viivan väriä. Huomaa, että viiva päättyy koordinaatteihin 199, 199 eikä 200, 200. Muista, että indeksointi alkaa nollasta. Kuva 14.2 esittää listauksen 14.2 tulostuksen.

252 14. Dynaamisten kuvien käsittely KUVA 14.2 Viivan piirtäminen imageline()- funktiolla. Värillä täyttäminen Voit täyttää alueen värillä PHP:n avulla aivan samalla lailla kuin grafiikkasovelluksellasi. Funktio imagefill() ottaa argumentikseen kuvatunnisteen, täytön alkukoordinaatit ja väritunnisteen. Sitten funktio muuttaa kaikki pikselit annetun värin mukaisiksi. Listaus 14.3 lisää edelliseen listaukseen imagefill()- kutsun; nyt kuvasta tulee jännittävämpi. Listaus 14.3 Värillä täyttäminen imagefill()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: imageline( $image, 0, 0, 199, 199, $blue ); 7: imagefill( $image, 0, 199, $blue ); 8: imagegif($image); 9:?> Kuva 14.3 esittää listauksen 14.3 tulostuksen.

14. Dynaamisten kuvien käsittely 253 KUVA 14.3 Funktion imagefill() käyttö. Kaaren piirtäminen Voit lisätä osittaisen tai kokonaisen kaaren kuviisi imagearc()-funktiolla. Se ottaa argumenteikseen kuvatunnisteen, keskipisteen koordinaatit, leveyden ja korkeuden (kokonaislukuina), alku- ja loppupisteet (asteina) ja väritunnisteen. Kaaret piirretään myötäpäivään alkaen kello kolmesta. Seuraava koodi piirtää neljännesympyrän: imagearc( $image, 99, 99, 200, 200, 0, 90, $blue ); Kyseessä on osittainen kaari, jonka keskipiste on 99, 99. Korkeus ja leveys ovat 200 pikseliä. Piirtäminen alkaa kohdasta kello 3 ja jatkuu siitä myötäpäivään 90 astetta (kello 6:een). Listaus 14.4 piirtää kokonaisen ympyrän ja täyttää sen sinisellä värillä. Listaus 14.4 Ympyrän piirtäminen imagearc()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: imagearc( $image, 99, 99, 180, 180, 0, 360, $blue ); 7: imagefill( $image, 99, 99, $blue ); 8: imagegif($image); 9:?> Kuva 14.4 esittää listauksen 14.4 tulostuksen.

254 14. Dynaamisten kuvien käsittely KUVA 14.4 Ympyrän piirtäminen imagearc()-funktiolla. Suorakaiteen piirtäminen Voit piirtää suorakaiteen PHP:llä käyttäen imagerectangle()-funktiota. Se ottaa argumenteikseen kuvatunnisteen, suorakaiteen vasemman ylänurkan koordinaatit, oikean alanurkan koordinaatit sekä väritunnisteen. Seuraava koodi piirtää suorakaiteen, jonka vasemman ylänurkan koordinaatit ovat 19, 19 ja oikean alanurkan koordinaatit 179, 179: imagerectangle( $image, 19, 19, 179, 179, $blue ); Sitten alue voidaan täyttää imagefill()-funktion avulla. Koska kyseessä on yleinen toimenpide, PHP tarjoaa käyttöön funktion imagefilledrectangle(), joka ottaa täsmälleen samat argumentit kuin imagerectangle()-funktio, mutta tuottaa suorakaiteen, joka on täytetty halutulla värillä. Listaus 14.5 luo täytetyn suorakaiteen ja tulostaa kuvan selaimelle. Listaus 14.5 Täytetyn suorakaiteen piirtäminen imagefilledrectangle()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: imagefilledrectangle( $image, 19, 19, 179, 179, $blue ); 7: imagegif( $image ); 8:?> Kuva 14.5 esittää listauksen 14.5 tulostuksen.

14. Dynaamisten kuvien käsittely 255 KUVA 14.5 Täytetyn suorakaiteen piirtäminen imagefilledrectangle()- funktiolla. Monikulmion piirtäminen Voit piirtää kehittyneempiä kuvioita imagepolygon()-funktiolla. Se ottaa argumenteikseen kuvatunnisteen, taulukon, joka sisältää pisteiden koordinaatit, pisteiden lukumäärän sekä väritunnisteen. Taulukon tulee olla numeerisesti indeksoitu. Ensimmäiset kaksi elementtiä antavat ensimmäisen pisteen koordinaatit, seuraavat kaksi toisen pisteen koordinaatit jne. Funktio piirtää viivan pisteiden väliin ja yhdistää lopuksi viimeisen ja ensimmäisen pisteen. Voit luoda täytetyn monikulmion imagefilledrectangle()-funktiolla. Listaus 14.6 piirtää täytetyn monikulmion ja esittää sen selainikkunassa. Listaus 14.6 Monikulmion piirtäminen imagefilledpolygon()-funktiolla 2: header("content-type: image/gif"); 3: $image = imagecreate( 200, 200 ); 4: $red = imagecolorallocate($image, 255,0,0); 5: $blue = imagecolorallocate($image, 0,0,255 ); 6: $points = array ( 10, 10, 7: 190, 190, 8: 190, 10, 9: 10, 190 10: ); 11: imagefilledpolygon( $image, $points, count( $points )/2, $blue ); 12: imagegif($image); 13:?>

256 14. Dynaamisten kuvien käsittely Huomaa, että voidaksemme kertoa imagefilledpolygon()-funktiolle, kuinka monta pistettä haluamme yhdistää, laskimme alkioiden määrän $points-taulukosta ja jaoimme tuloksen kahdella. Kuva 14.6 esittää listauksen 14.6 tuloksen. KUVA 14.6 Monikulmion piirtäminen imagefilledpolygon()- funktiolla. Värin tekeminen läpinäkyväksi PHP mahdollistaa valittujen värien tekemisen läpinäkyviksi funktiolla imagecolortransparent(). Funktio ottaa argumenteikseen kuvatunnisteen ja väritunnisteen. Kun tulostat kuvan selaimelle, funktiolle viety väri näkyy läpi. Listaus 14.7 muuttaa monikulmiokoodiamme niin, että kuvio "kelluu" selaimelle sen sijaan, että se "makaisi" taustavärin päällä. Listaus 14.7 Värien tekeminen läpinäkyviksi imagecolortransparent()-funktiolla 2: header("content-type: image/gif"); 3: 4: $image = imagecreate( 200, 200 ); 5: $red = imagecolorallocate($image, 255,0,0); 6: $blue = imagecolorallocate($image, 0,0,255 ); 7: 8: $points = array ( 10, 10, 9: 190, 190, 10: 190, 10, 11: 10, 190 12: ); 13: 14: imagefilledpolygon( $image, $points, count( $points )/2, $blue );

14. Dynaamisten kuvien käsittely 257 15: imagecolortransparent( $image, $red ); 16: imagegif($image); 17:?> Kuva 14.7 esittää listauksen 14.7 tulostuksen. KUVA 14.7 Värien tekeminen läpinäkyviksi imagecolortransparent( ) -funktiolla. Tekstin käsittely Jos järjestelmässäsi on käytettävissä TrueType-fontteja, voit käyttää niitä kirjoittaessasi tekstiä kuviisi. GDkirjaston lisäksi sinulla tulee olla käytössäsi FreeType-kirjasto. Jos molemmat resurssit ovat käytössäsi, voit luoda kuvapohjaisia kaavioita tai navigointielementtejä. PHP tarjoaa lisäksi käyttöösi työkalun, jolla voit tarkistaa, että kohdeteksti mahtuu annettuun tilaan. Merkkijonon kirjoittaminen imagettftext()-funktiolla Voit kirjoittaa tekstiä kuviisi imagettftext()-funktiolla. Se ottaa kahdeksan argumenttia: kuvatunnisteen, kirjoitettavien merkkien korkeuden, kulman, alkukoordinaatit (x ja y), väritunnisteen, polun TrueTypefonttitiedostoon ja kirjoitettavan tekstin. Alkupiste määrää, mikä on merkkijonon ensimmäisen merkin perustaso. Listaus 14.8 kirjoittaa merkkijonon kuvaan ja tulostaa tuloksen selaimelle. Listaus 14.8 Merkkijonon kirjoittaminen imagettftext()-funktiolla 2: header("content-type: image/gif"); 3: 4: $image = imagecreate( 400, 200 ); 5: $red = imagecolorallocate($image, 255,0,0);

258 14. Dynaamisten kuvien käsittely 6: $blue = imagecolorallocate($image, 0,0,255 ); 7: $font = "/usr/local/jdk121_pre-v1/jre/lib/fonts/lucidasansregular.ttf"; 8: 9: imagettftext( $image, 50, 0, 20, 100, $blue, $font, "Welcome!" ); 10: 11: imagegif($image); 12:?> Luomme kanvaasin, jonka leveys on 400 pikseliä ja korkeus 200 pikseliä. Määrittelemme kaksi väriä ja tallennamme polun TrueType-fonttiin muuttujaan nimeltä $font. Huomaa, että fonttitiedostot tallennetaan todennäköisesti palvelimesi eri kansioon. Jos et ole varma, missä.ttf-tiedostot ovat, koeta hakutoimintoa. Ohjelma kirjoittaa sitten tekstin Welcome! kuvaan. Funktion imagettftext() kutsussa määrittelemme argumenteiksi koon 50, kulman 0, alkupisteen 20, 100 sekä väritunnisteen, joka on muuttujassa $blue, fonttipolun, joka on muuttujassa $font sekä tietenkin kirjoitettavan tekstin. Tulos näkyy kuvassa 14.8. KUVA 14.8 Tekstin kirjoittaminen imagettftext()- funktiolla. Meidän on tietenkin arvattava, mihin teksti laitetaan kyseisellä hetkellä. Funktion kokoargumentti ei anna tarkkaa kuvaa tekstin korkeudesta ja leveydestä. Itse asiassa funktio palauttaa kokotiedot, mutta vasta tulostuksen jälkeen. Onneksi PHP:ssä on funktio, joka mahdollistaa koon määrittämisen. Tekstikoon testaaminen imagettfbox()-funktiolla Tekstin koko saadaan selville imagettfbox()-funktiolla. Sen nimi kuvaa sitä, että funktio palauttaa tekstiä rajaavan suorakaiteen. Funktio ottaa argumenteikseen fonttikoon, kulman, polun fonttitiedostoon ja kirjoitettavan tekstin. Kyseessä on yksi niistä harvoista kuvafunktioista, jotka eivät ota argumentikseen kuvatunnistetta. Funktio palauttaa 8-alkioisen taulukon, jonka arvot on selitetty taulukossa 14.1.

14. Dynaamisten kuvien käsittely 259 Taulukko 14.1 Funktion imagettfbox() palauttama taulukko Indeksi Alkion tarkoitus 0 Vasen alanurkka, x-koordinaatti 1 Vasen alanurkka, y-koordinaatti 2 Oikea alanurkka, x-koordinaatti 3 Oikea alanurkka, y-koordinaatti 4 Oikea ylänurkka, x-koordinaatti 5 Oikea ylänurkka, y-koordinaatti 6 Vasen ylänurkka, x-koordinaatti 7 Vasen ylänurkka, y-koordinaatti Kaikki kuviot pystysuoralla akselilla ovat suhteessa tekstin peruslinjaan, joka on 0. Peruslinjan yläpuolella olevien kuvioiden y-koordinaattiarvot ovat siten negatiivisia, ja alapuolella olevien kuvioiden koordinaattiarvot kertovat etäisyyden pikseleissä suhteessa peruslinjaan positiivisina arvoina. Jos testaat imagettfbbox()-funktiolla merkkijonoa, joka sisältää esimerkiksi merkin y, palautettava taulukossa saattaa olla arvo 3 elementissä 1, koska merkin y häntä valuu 3 pikseliä peruslinjan alapuolelle. Taulukossa saattaa olla arvo 10 elementissä 7, koska teksti nousee 10 pikseliä peruslinjan yläpuolelle. Tehdäksemme asiat vielä vaikeammiksi, näyttää siltä, että funktion palauttaman peruslinjan ja näkyvän peruslinjan (kun teksti kirjoitetaan) välissä on kahden pikselin rako. Sinun on nyt tehtävä mielessäsi sovittelua ajattelemalla, että peruslinjan korkeus on kaksi pikseliä suurempi kuin funktion palauttaman peruslinjan korkeus. Vaakasuoralla akselilla funktio ottaa huomioon ennen alkupistettä alkavan tekstin niin, että elementeissä 6 ja 0 on siirtymä negatiivisena arvona. Kyseessä on yleensä pieni arvo, jonka huomioon ottaminen riippuu työsi tarkkuudesta. Voit käyttää funktion palauttamaan informaatiota tekstin asetteluun kuvassa. Listaus 14.9 luo skriptin, joka tulostaa dynaamisesti tekstin ja keskittää sen kuvaan sekä vaakasuunnassa että pystysuunnassa. Listaus 14.9 Tekstin asetteleminen kiinteään tilaan imagettfbbox()-funktiolla 2: header("content-type: image/gif"); 3: $height = 100; 4: $width = 200; 5: $fontsize = 50; 6: if (! isset ( $text ) ) 7: $text = "Change me!"; 8: $image = imagecreate( $width, $height ); 9: $red = imagecolorallocate($image, 255,0,0); 10: $blue = imagecolorallocate($image, 0,0,255 ); 11: $font = "/usr/local/jdk121_pre-v1/jre/lib/fonts/lucidasansregular.ttf"; 12: $textwidth = $width; 13: $textheight;

260 14. Dynaamisten kuvien käsittely 14: while ( 1 ) 15: { 16: $box = imagettfbbox( $fontsize, 0, $font, $text ); 17: $textwidth = abs( $box[2] ); 18: $textbodyheight = ( abs($box[7]) )-2; 19: if ( $textwidth < $width - 20 ) 20: break; 21: $fontsize--; 22: } 23: $gifxcenter = (int) ( $width/2 ); 24: $gifycenter = (int) ( $height/2 ); 25: imagettftext( $image, $fontsize, 0, 26: (int) ($gifxcenter-($textwidth/2)), 27: (int) ($gifycenter+(($textbodyheight)/2) ), 28: $blue, $font, $text ); 29: imagegif($image); 30:?> Tallennamme kuvan korkeuden ja leveyden muuttujiin $height ja $width ja asetamme fontin oletuskooksi 50. Testaamme muuttujien $text olemassaolon asettaen oletusarvon, jos muuttuja ei ole läsnä. Tällä tavoin kuva voi ottaa vastaan tietoa Web-sivulta joko kuvan URL:n tai lomakkeen lähettämiseen liittyvästä kyselymerkkijonosta. Käytämme imagecreate()-funktiota kuvatunnisteen hankkimiseen. Väritunnisteet saamme tavallisella tavalla ja tallennamme polun TrueType-tiedostoon muuttujaan $font. Haluamme sovittaa $text-muuttujaan tallennetun merkkijonon käytettävissä olevaan tilaan, mutta emme vielä tiedä, onnistuuko se. Koodin while-silmukassa viemme fonttipolun ja merkkijonon imagettfbbox()- funktiolle ja tallennamme palautetun taulukon $box-muuttujaan. Elementti $box[2] sisältää oikean alakulman x-koordinaatin. Käytämme arvoa merkkijonon leveytenä ja tallennamme sen muuttujaan $textwidth. Haluamme keskittää tekstin pystysuunnassa, mutta ottaen huomioon vain tekstin peruslinjan yläpuolella olevan alueen. Voimme käyttää elementin $box[7] absoluuttista arvoa hakemaan peruslinjan yläpuolella olevan tekstin korkeuden, vaikkakin meidän on säädettävä sitä kahdella pikselillä. Tallennamme arvon muuttujaan $textbodyheight. Kun olemme nyt saaneet selville tekstin leveyden, voimme verrata sitä kuvan leveyteen (josta vähennetään kehyksen osuus, 10 pikseliä). Jos teksti on pienempi kuin käyttämämme kanvaasin leveys, lopetamme silmukan. Muutoin pienennämme fontin kokoa ja yritämme uudelleen. Jakamalla muuttujien $height ja $width arvot kahdella, voimme löytää kuvan keskipisteen. Kirjoitamme tekstin kuvaan käyttämällä aiemmin laskemaamme kuvan keskipistettä tekstin korkeuden yhteydessä ja kuvan leveyttä siirtymän yhteydessä. Lopuksi piirrämme kuvan selaimelle. Kuva 14.9 esittää listauksen 14.9 tulostuksen. Tätä koodia voidaan nyt kutsua toiselta sivulta IMG-elementin yhteydessä. Seuraava koodi laittaisi käyttäjän oman merkkijonon kuvan keskelle:

14. Dynaamisten kuvien käsittely 261 2: if (! isset( $text ) ) 3: $text = "Dynamic text!"; 4:?> 5: <form action="<? print $PHP_SELF?>" method="post"> 6: <input type="text" name="text"> 7: </form> 8: <p> 9: <img src="eg14.9.php?<? print "text=".urlencode($text)?>"> Kun kutsumme listauksen 14.9 skriptiä, lisäämme kyselymerkkijonon, joka sisältää kuvaan lisättävän tekstin. Saat lisätietoa tästä tekniikasta, jolla tietoa viedään skriptiltä toiselle, luvusta 19, Tilan tallentaminen evästeillä ja kyselymerkkijonoilla. KUVA 14.9 Tekstin asetteleminen kiinteään tilaan imagettfbbox()- funktiolla. Kaikki yhdessä Muodostakaamme nyt esimerkki, joka käyttää joitakin funktioita, joita olemme tutkineet tällä tunnilla. Olettakaamme, että meitä on pyydetty tekemään dynaaminen palkkikaavio, joka esittää otsikoituja numeroarvoja. Palkkikaavion tulee sisältää sopivat otsikot, jotka tulevat jokaisen palkin alapuolelle. Asiakkaamme tulee kyetä muuttamaan pylväiden arvoja, kuvan korkeutta ja leveyttä sekä kaavion kehysviivan paksuutta. Pylväskaaviolla kuvataan kuluttajien äänien jakautumista ja riittää, kun se anraa nopeasti yleiskuvan tilanteesta. Tarkempi tiedon esittäminen voidaan hoitaa sivun HTML-osassa. Helpoin keino tallentaa otsikoita ja arvoja on käyttää assosiatiivista taulukkoa. Kun taulukko on valmis, voimme laskea pylväiden määrän sekä suurimman arvon:

262 14. Dynaamisten kuvien käsittely $cells = array ( liked=>200, hated=>400, indifferent=>900 ); $max = max( $cells ); $total = count ( $cells ); Meidän tulee asettaa joitakin muuttujia, joiden avulla asiakkaat voivat tehdä muutoksia kuvaan: $totalwidth = 400; $totalheight = 200; $xgutter = 20; // vasen/oikea-reunus $ygutter = 20; // ylä/ala-reunus $internalgap = 5; // solujen välinen tila $bottomspace = 40; // tyhjä tila alhaalla $font = "/usr/local/jdk121_pre-v1/jre/lib/fonts/lucidasansregular.ttf"; Asiakas voi muuttaa muuttujia, jotka määrittelevät kuvan korkeuden ja leveyden. Muuttujat $xgutter ja $ygutter määrittävät kaavion vaakasuuntaisen ja pystysuuntaisen marginaalin. Muuttuja $internalgap määrittää pylväiden välisen tilan. Muuttuja $bottomspace määrittää pylvään otsikon ja näytön alareunan välisen tyhjän tilan. Kun arvot on nyt saatu, voimme tehdä joitakin hyödyllisiä laskentoja ja laittaa tulokset muuttujiin: $graphcanx = ( $totalwidth - $xgutter*2 ); $graphcany = ( $totalheight - $ygutter*2 - $bottomspace ); $posx = $xgutter; // aloitetaan piirto paikasta x $posy = $totalheight - $ygutter - $bottomspace; // aloitetaan piirto paikasta y $cellwidth = (int) (( $graphcanx - ( $internalgap * ( $total-1 ) )) / $total) ; $textsize = (int)($bottomspace); Laskemme graafin kanvaasin (tilan, johon pylväät piirretään). Vaaka-akselilla leveys on kokonaisleveys - kaksi kertaa marginaalien koko. Pystyakselilla meidän on otettava huomioon $bottomspace-muuttuja, jotta otsikoille jäisi tilaa. Muuttuja $posx tallentaa x-koordinaatin pisteelle, josta pylväiden piirtäminen aloitetaan, joten asetamme sen arvoksi $xgutter-muuttujan arvon. Muuttujassa on nimenomaan marginaalin arvo. Muuttuja $posy tallentaa pylväiden alapisteen; se on sama kuin kuvan kokonaiskorkeus, josta vähennetään marginaali ja otsikoille muuttujassa $bottomheight varattu tila. Muuttuja $cellwidth sisältää pylvään leveyden. Arvo saadaan laskemalla pylväiden välisen tilan kokonaismäärä, joka vähennetään sitten kaavion leveydestä ja tulos jaetaan pylväiden lukumäärällä.

14. Dynaamisten kuvien käsittely 263 Alustavasti asetamme tekstin kooksi saman kuin otsikkoteksteille tuleva korkeus (joka on tallennettuna $bottomspace-muuttujassa). Ennen kuin luomme kuvan ja aloitamme sen käsittelyn, meidän tulee määritää tekstin koko. Ongelmamme on se, että emme tiedä, kuinka pitkiä otsikot ovat ja haluamme varmistaa, että kukin otsikko sopii siihen tilaan, jonka pylvään leveys määrittää. Käymme silmukassa läpi $cells-taulukon laskeaksemme käyttämämme tekstin maksimileveyden: while ( list( $key, $val ) = each ( $cells ) ) { while ( 1 ) { $box = ImageTTFbBox( $textsize, 0, $font, $key ); $textwidth = $box[2]; if ( $textwidth < $cellwidth ) break; $textsize--; } } Kunkin elementin kohdalla aloitamme silmukan ja sieppaamme otsikon mittatiedot käyttämällä imagettfbbox()-funktiota. Sijoitamme tekstin leveyden $box[2]-elementtiin ja vertaamme sitä $cellwidthmuuttujaan, joka sisältää yksittäisen pylvään leveyden. Katkaisemme sitten silmukan, jos teksti on pienempi kuin pylvään leveys; muutoin pienennämme $textsize-muuttujan arvoa ja yritämme uudelleen. Muuttuja $textsize kutistuu, kunnes jokainen otsikko mahtuu pylvään leveyden määrittämälle alueelle. Lopulta voimme luoda kuvatunnisteen ja aloittaa kuvan käsittelyn: $image = imagecreate( $totalwidth, $totalheight ); $red = ImageColorAllocate($image, 255, 0, 0); $blue = ImageColorAllocate($image, 0, 0, 255 ); $black = ImageColorAllocate($image, 0, 0, 0 ); reset ($cells); while ( list( $key, $val ) = each ( $cells ) ) { $cellheight = (int) (($val/$max) * $graphcany); $center = (int)($posx+($cellwidth/2)); imagefilledrectangle( $image, $posx, ($posy-$cellheight), $posx+$cellwidth), $posy, $blue );

264 14. Dynaamisten kuvien käsittely $box = ImageTTFbBox( $textsize, 0, $font, $key ); $tw = $box[2]; ImageTTFText( $image, $textsize, 0, ($center-($tw/2)), ($totalheight-$ygutter), $black, $font, $key ); $posx += ( $cellwidth + $internalgap); } imagegif( $image ); Aloitamme luomalla kuvatunnisteen imagecreate()-funktiolla ja allokoimme joitakin värejä. Jälleen kerran käymme silmukassa läpi $cells-taulukkomme. Laskemme pylvään korkeuden ja tallennamme tuloksen $cellheight-muuttujaan. Laskemme pylvään keskipisteen (x-akselilla), joka on $posx + puolet pylvään leveydestä. Piirrämme pylvään käyttäen imagefilledrectangle()-funktiota ja muuttujia $posx, $posy, $cellheight ja $cellwidth. Tekstin asetteluun tarvitsemme uudelleen imagettfbbox()-funktiota ja tallennamme sen palauttaman taulukon $box-muuttujaan. Käytämme $box[2]-elementtiä työleveytenä ja sijoitamme sen tilapäismuuttujaan $tw. Nyt meillä on tarpeeksi tietoa otsikon kirjoittamiseen. Johdamme x-sijaintimme vähentämällä muuttujasta $center puolet tekstin leveydestä ja y-sijaintimme vähentämällä kuvan korkeudesta marginaalin. Kasvatamme $posx-arvoa työskennelläksemme seuraavalla pylväällä. Lopuksi tulostamme kuvan. Koko koodi on listauksessa 14.10 ja näytetulostus kuvassa 14.10. Listaus 14.10 Dynaaminen pylväskaavio 2: header("content-type: image/gif"); 3: $cells = array ( liked=>200, hated=>400, indifferent=>900 ); 4: $max = max( $cells ); 5: $total = count ( $cells ); 6: $totalwidth = 300; 7: $totalheight = 200; 8: $xgutter = 20; // vasen/oikea-reunus 9: $ygutter = 20; // ylä/ala-reunus 10: $internalgap = 10; // solujen välinen tila 11: $bottomspace = 30; // alareunan tyhjä lisätila 12: $font = "/usr/local/jdk121_pre-v1/jre/lib/fonts/lucidasansregular.ttf"; 13: $graphcanx = ( $totalwidth - $xgutter*2 );

14. Dynaamisten kuvien käsittely 265 14: $graphcany = ( $totalheight - $ygutter*2 - $bottomspace );// aloitetaan piirto paikasta x 15: $posx = $xgutter; // aloitetaan piirto paikasta y 16: $posy = $totalheight - $ygutter - $bottomspace; 17: $cellwidth = (int) (( $graphcanx - ( $internalgap * ( $total-1 ) )) / $total) ; 18: $textsize = (int)($bottomspace); 19: // säädä fonttikoko 20: while ( list( $key, $val ) = each ( $cells ) ) 21: { 22: while ( 1 ) 23: { 24: $box = ImageTTFbBox( $textsize, 0, $font, $key ); 25: $textwidth = abs( $box[2] ); 26: if ( $textwidth < $cellwidth ) 27: break; 28: $textsize--; 29: } 30: } 31: $image = imagecreate( $totalwidth, $totalheight ); 32: $red = ImageColorAllocate($image, 255, 0, 0); 33: $blue = ImageColorAllocate($image, 0, 0, 255 ); 34: $black = ImageColorAllocate($image, 0, 0, 0 ); 35: $grey = ImageColorAllocate($image, 100, 100, 100 ); 36: reset ($cells); 37: while ( list( $key, $val ) = each ( $cells ) ) 38: { 39: $cellheight = (int) (($val/$max) * $graphcany); 40: $center = (int)($posx+($cellwidth/2)); 41: imagefilledrectangle( $image, $posx, ($posy-$cellheight), ($posx+$cell width), $posy, $blue ); 42: $box = ImageTTFbBox( $textsize, 0, $font, $key ); 43: $tw = $box[2];

266 14. Dynaamisten kuvien käsittely 44: ImageTTFText( $image, $textsize, 0, ($center-($tw/2)), 45: ($totalheight-$ygutter), $black, $font, $key ); 46: $posx += ( $cellwidth + $internalgap); 47: } 48: imagegif( $image ); 49:?> Kuva 14.10 Dynaaminen pylväskaavio. Yhteenveto PHP:n tuki GD-kirjastolle mahdollistaa dynaamisten kaavioiden ja navigointielementtien luomisen suhteellisen helposti. Tällä tunnilla opit käyttämään imagecreate()- ja imagegif()-funktioita luodaksesi ja tulostaaksesi kuvia. Opit myös värikoodien luomisen imagecolorallocate()-funktiolla ja värillä täyttämisen imagefill()- funktiolla. Opit käyttämään viiva- ja kuviofunktioita kehysten ja täytettyjen kuvioiden luomiseen. Sait myös tietoa siitä, kuinka PHP:n avulla voidaan ottaa käyttöön FreeType-kirjasto, jolla voidaan käsitellä TrueTypefontteja. Teimme aiheesta esimerkin, jossa teksti kirjoitettiin kuvaan. Luvun lopussa sait työskennellä pylväskaavioesimerkin kanssa; siinä käytettiin useita aiemmin esille tuotuja tekniikoita. K&V K Miten dynaamisten kuvien käyttäminen vaikuttaa suorituskykyyn? V Dynaamisesti luotu kuva latautuu selaimelle hitaammin kuin jo olemassa oleva kuva. Riippuen skriptisi tehokkuudesta ei vaikutusta yleensä juuri huomaa; dynaamisia kuvia kannattaa kuitenkin käyttää säästeliäästi.

14. Dynaamisten kuvien käsittely 267 Työpaja Työpaja tarjoaa pikakysymyksiä, joiden avulla voit kerrata läpikäytyä materiaalia. Yritä ymmärtää vastaukset ennen kuin jatkat seuraavaan lukuun. Vastaukset annetaan liitteessä A. Kysymyksiä 1. Mikä otsikko pitäisi lähettää selaimelle ennen GIF-kuvan kehittämistä ja tulostamista? 2. Mitä funktiota pitäisi käyttää kuvatunnisteen saamiseksi muita kuvafunktioita varten? 3. Mitä funktiota pitäisi käyttää GIF-kuvan tulostamiseen sen muodostamisen jälkeen? 4. Mitä funktiota pitäisi käyttää väritunnisteen saamiseen? 5. Mitä funktiota voidaan käyttää viivan piirtämiseen dynaamiseen kuvaan? 6. Mitä funktiota pitäisi käyttää dynaamisessa kuvassa olevan alueen täyttämiseen? 7. Mitä funktiota voidaan käyttää kaaren piirtämiseen? 8. Kuinka piirtäisit suorakaiteen? 9. Kuinka piirtäisit monikulmion? 10. Mitä funktiota käyttäisit kirjoittamaan merkkijonon dynaamiseen kuvaan (hyödyntämällä FreeTypekirjastoa)? Toiminta 1. Kirjoita skripti, joka luo edistymispalkkina (esimerkiksi kertoo rahaston sijoitusten tilanteen). 2. Kirjoita skripti, joka kirjoittaa otsikkokuvan, joka perustuu käyttäjän lomakkeella antamaan tietoon tai kyselymerkkijonoon. Salli käyttäjän antaa myös kanvaasin koko, tausta- ja edustavärit sekä varjostus.

268 14. Dynaamisten kuvien käsittely