Kynien ja siveltimien käyttö

Transkriptio

1 OSA IV 359 LUKU LUKU Eri tyylisten viivojen ja muotojen piirtäminen kynillä Kuvioiden täyttäminen eri värein ja pintakuvioin siveltimellä Piirtofunktioiden hyödyntäminen mutkikkaiden muotojen piirtämiseen helposti

2 360 Kynät ja täytetyt muodot Kynillä piirretään viivoja ja kaaria. Täytettyjä muotoja piirrettäessä kyniä käytetään kappaleen reunan piirtämiseen ja sisäpuoli maalataan siveltimellä (brush). Kappaleen sisäpuolen värittäminen ei ole välttämätöntä, jolloin se voidaan esittää pelkällä reunaviivalla. Tämä onnistuu käyttämällä siveltimen värinä läpinäkyvää. Tästä tekniikasta kerrotaan lisää myöhemmin tässä luvussa. Grafiikan piirtäminen Kynien luominen Kynät kuuluvat GDI:n perusobjekteihin. Ne on toteutettu aivan Windowsin ytimeen ja ne ovat kuuluneet Windowsin alkuperäiseen varustukseen alusta alkaen. Ennen kuin voit piirtää mitään, joudut luomaan tai valitsemaan oman tehtävään sopivan kynän. CPen-luokan käyttö Onneksi MFC:n tarjoama kynän toiminnot paketoiva luokka CPen tekee piirtämisestä yksinkertaista. Tässä luokassa on toiminnan toteuttava GDI-objekti; luokka huolehtii sen varaamisesta ja vapauttamisesta. Kynän luomiseksi joudut määrittelemään sen muutamin parametrein. Seuraava koodirivi tekee esimerkiksi punaisen, tavallista yhtenäistä viivaa piirtävän kynän: CPen penred(ps_solid, 3, RGB(255, 0, 0)); Kynätyypin valitseminen Ensimmäinen parametri on kynätyyppi. Voit valita siinä useista eri viivatyypeistä (taulukko 16.1), millaista kynäsi haluaisit piirtävän. TAULUKKO 16.1 Kynätyypit Kynätyyppi PS_SOLID PS_DASH PS_DOT PS_DASHDOT Piirretty viivatyyppi Tavallinen yhtenäinen viiva Pisteviiva Katkoviiva Katkopisteviiva Piste- ja katkotyylien rajoitukset Huomaa, että piste- (dash) ja katkotyylit (dot) toimivat ainoastaan 1 kuvapistettä leveällä kynällä - muut koot tekevät kiinteää viivaa. Kuvassa 16.1 on esitetty eri viivatyyppejä käytössä. Kynän leveyden muuttaminen Voit asettaa kynän leveyden toisena parametrinä. Arvo 1 vastaa ohuinta mahdollista, yhden kuvapisteen levyistä viivaa. Arvo 30 näyttää puolestaan ylileveän tussin jäljeltä.

3 OSA IV LUKU KUVA 16.1 Kynätyylit ja leveydet Kynän värin muuttaminen Kynää muodostettaessa annettava kolmas parametri on kynän värin määrittämistä varten. Annettu arvo on COLORREF-muodossa, mikä paljaana lukuna vastaa 32-bittistä numeroa, johon on paketoitu tieto värin punaisen, vihreän ja sinisen komponentin arvosta. COLORREFarvon määrittäminen suoraa on mutkikasta, käytettäviä arvoja on kaikkiaan Onneksi käytössä on RGB-niminen makro helpottamassa värin määrittämistä. Tässä on esimerkki RGB-makron käyttämisestä koodissa: COLORREF rgbpurple = RGB(255,0,255); CPen rgbpurple(ps_dashdot, 1, rgbpurple); RGB-makrolle annetaan kolme parametriä: värin punaisen, vihreän ja sinisen komponentin arvo. Kukin näistä voi olla välillä 0 255, jossa 0 tarkoittaa, ettei värissä ole tätä komponenttia ja 255 komponentin täyttä arvoa. Näin voidaan määrittää 16,7 miljoonaa väriä ja sävyä kunhan näyttökorttisi vain tukee niitä. Listauksessa 16.1 on esimerkkejä värikynistä ja RGB-arvojen käytöstä. Laitteiston värirajoitukset Vaikka 24-bittisellä värillä voidaan määrittää 16,7 miljoonaa sävyä, näytettyjen värien määrä riippuu näytönohjaimesta ja näytöstä. Jos käytetty näyttötila tukee vähempää värimäärää (esimerkiksi 16, 256 tai ), Windows yrittää valita värivalikoimaan parhaiten sopivat värit. Joskus se sekoittaa kahta väriä vuorottain, jolloin saadaan vaikutelma lähes halutusta väristä.

4 362 1 Kiinteä vihreä kynä, jonka paksuus on 1, luodaan. 2 Kiinteä keltainen kynä, jonka paksuus on 30, luodaan. 3 Luodaan punainen katkoviivakynä, jonka paksuus on 1. 4 Luodaan sininen pisteviivakynä, jonka paksuus on 1. Grafiikan piirtäminen LISTAUS 16.1 LST16_1.CPP Lisää värejä ja kynätyyppejä 1 // Solid Dark Green Pen 2 CPen pensoliddullgreen(ps_solid,1,rgb(0,128,0)); // Thick Yellow Pen 5 CPen pensolidyellow30(ps_solid,30,rgb(255,255,0)); // Dashed Red Pen 8 CPen pendashred(ps_dot,1,rgb(255,0,0)); // Dotted Blue Pen 11 CPen pendotblue(ps_dash,1,rgb(0,0,255)); 4 NULL-kynän käyttö NULL_PEN-tyyli saattaa aluksi oudoksuttaa, koska se ei piirrä näkyviä viivoja eikä kaaria ja jättää taustan koskemattomaksi. NULL-kynää tarvitaan kuitenkin täytettyjen muotojen (ellipsien, suorakulmioiden) piirtämiseen ilman reunoja. Varastokynien käyttö Kynää ei aina tarvitse määrittää yksityiskohtaisesti, koska Windowsissa on muutamia käyttövalmiita kyniä, varastokyniä (stock pen). Nämä on valmiiksi määritelty ja niitä käytetäänkin yleisesti työpöydän ja kontrollien piirtämiseen. Varastokynän käyttämistä varten määrität CPen-olion ilman parametrejä, jonka jälkeen joudut kutsumaan CreateStockObject()-funktiota, joka asettaa määritellyn kynän asetukset annetun varasto-objektin mukaisiksi. Seuraavilla riveillä luodaan musta varastokynä CreateStockObject()-funktiolla: CPen stockblackpen; StockBlackPen.CreateStockObject(BLACK_PEN); Taulukossa 16.2 on esitetty erilaisia varastokyniä. TAULUKKO 16.2 Varastokynätyypit Kynän nimi BLACK_PEN WHITE_PEN NULL_PEN Piirtää Mustaa viivaa Valkoista viivaa Taustan väristä viivaa Kynien valitseminen piirtopinnalle Ennen kuin luodulla kynällä voi piirtää, se tulee valita piirtopinnalle. Luvussa 15 esitetyn mukaisesti tämä voidaan tehdä näkymäluokan OnDraw()-funktion avulla.

5 Piirtopinnalla on käytettävissä kerrallaan vain yksi kynä. Aluksi kynänä on oletuskynä. Jos määrität piirtopinnalle uuden kynän, vanha putoaa pois. Voit valita piirtopinnalle uuden kynän SelectObject()- funktiolla. Näin tehdessäsi vanha putoaa pois ja joudut tallettamaan sen. Listauksessa 16.2 esitetään, kuinka kynän vaihto tehdään. LISTAUS 16.2 LST16_2.CPP Kynän valitseminen OSA IV LUKU void MyView::OnDraw(CDC* pdc) 2 { 3 CPen pensolid(ps_solid,5,rgb(0,200,0)); // Green pen 4 CPen *poldpen = NULL; 5 6 poldpen = pdc->selectobject(&pensolid); //... Draw with the green pen 9 10 pdc->selectobject(poldpen); 2 11 } 1 Rivillä 6 valitaan uusi vihreä kynä ja tallennetaan piirtopinnan alkuperäinen vanha kynä. 2 Rivillä 10 valitaan alkuperäinen kynä takaisin piirtopinnalle. SelectObject()-funktiolle annetaan osoitin uuteen kynään (huomaa listauksen 16.2 rivillä 6 käytetty &-merkki) ja funktio palauttaa osoittimen edelliseen kynään. Sen jälkeen voit piirtää, mitä tarvitset piirtopinnalle. Lopuksi joudut vaihtamaan vanhan kynän takaisin tai Windows piirtää jatkossa painikkeensakin sinun kynälläsi! Jos olet määritellyt käyttöösi kaksi kynää, voit vaihtaa niitä helposti SelectObject()-funktiolla, kuten listauksessa 16.3 esitetään. LISTAUS 16.3 LST16_3.CPP Kahden kynän valitseminen vuorotellen 1 void MyView::OnDraw(CDC* pdc) 2 { 3 CPen pengreen(ps_solid,5,rgb(0,255,0)); // Green pen 4 CPen penblue(ps_solid,3,rgb(0,0,255)); // Blue pen 5 CPen *poldpen = NULL; 6 7 poldpen = pdc->selectobject(&pengreen); // Swap pens 8 9 //... Draw with the green pen pdc->selectobject(&penblue); // Swap pens 1 12 // The green pen will be returned //... Draw with the blue pen 15 pdc->selectobject(poldpen); // Restore pen 16 } 1 Rivillä 11 vaihdetaan sininen kynä valittuna olevan vihreän paikalle (joka valittiin rivillä 7).

6 364 Grafiikan piirtäminen Kun tahdot piirtää eri kynällä listauksen 16.3 mukaan, joudut tallettamaan ainoastaan oletuskynän. Vaihtaessasi oman kynäsi toiseen ei osoittimen tallettaminen ole tarpeen, olethan itse luonut kynän ja voit viitata siihen aina &-merkinnällä. Lopuksi listauksessa vielä palautetaan oletuskynä, jottei sovelluksen kynä jäisi Windowsin käyttöön. Graafisten objektien kahvat Vaikka MFC piilottaakin graafiset objektit sopiviin luokkiin, kuten CPen, niiden tunnisteena käytetään kahvoja (handle, 32- bittinen kokonaisluku), jotka ovat vastaavan MFC-luokan jäsenmuuttujia. Kun kutsut piirtopintaolion SelectObject() tai DeleteObject()-funktiota, tulee joku noista graafisten objektien kahvoista valituksi tai tuhotuksi Win32-tasolla. 1 Rivillä 12 tuhotaan piilotettu GDI-objekti ja CPen-oliota voidaan käyttää uudelleen toisen kynän luomiseen, mikä näkyy rivillä 13. Kynien tuhoaminen Kun et enää tarvitse omia kyniä, joudut tuhoamaan ne. Näin saat vapautettua GDI-objektin ja arvokkaita järjestelmäresursseja. CPenluokka tekee tämän automaattisesti sitä tuhottaessa. Saatat haluta tehdä tämän käsin, mikäli aiot käyttää samaa CPen-oliota eri asetuksin (CreatePen()-funktiota kutsumalla). Vaihtoehtoisesti saatat märitellä monta kynää ja vapauttaa järjestelmäresursseja käytön jälkeen jo ennen kynän tuhoamista funktion lopussa. DeleteObject() on olion jäsenfunktio, joka poistaa olioon kätkeytyvän GDI-objektin. Listauksessa 16.4 esitetään saman kynäolion luominen, käyttö, poistaminen ja uudelleen luominen. LISTAUS 16.4 LST16_4.CPP DeleteObject()- ja CreatePen()- funktioiden käyttö 1 void MyView::OnDraw(CDC* pdc) 2 { 3 CPen penmaindraw(ps_dash,1,rgb(128,255,255)); 4 CPen *poldpen = NULL; 5 6 poldpen = pdc->selectobject(&penmaindraw); 7 8 // Draw with the dashed pen pdc->selectobject(poldpen); penmaindraw.deleteobject(); 1 13 penmaindraw.createpen(ps_solid,5,rgb(200,20,5)); poldpen = pdc->selectobject(&penmaindraw); // Draw with the solid pen pdc->selectobject(poldpen); 20 } 21 // Delete Object will be automatically called when 22 // penmaindraw is deleted as the function ends

7 OSA IV LUKU Listauksessa 16.4 luodaan penmaindraw-kynä OnDraw()-funktion alussa (rivi 3), se valitaan ja sillä piirretään tavallisesti. DeleteObject()-funktiota ei saa koskaan käyttää vielä piirtopinnalle valittuna olevalle kynälle. Tässä listauksessa valitaan vanha kynä takaisin, jotta penmaindraw-katkoviivakynän DeleteObject()- funktiota voitaisiin kutsua. Tuhoamisensa jälkeen oliossa ollut GDI-objekti on vapautettu ja voit käyttää CPen-luokkaa uuden kynän luomiseen. CreatePen()- jäsenfunktiolla tehdään tässä uusi yhtenäistä (solid) viiva piirtävä kynä. CreatePen()-funktion parametrit ovat samat kuin olion muodostinfunktion: kynän tyyppi (npenstyle), viivan leveys (nwidth) ja värinumero (crcolor). Ole tarkkana DeleteObject()-funktion kanssa Jos kutsut piirtopinnalla valittuna olevalle kynälle DeleteObject()- funktiota, alla oleva GDI-objekti tuhotaan ja seuraavat piirtokomennot kynllä saattavat kaataa sovelluksen tai antaa odottamattomia tuloksia. Viivojen ja muotojen piirtäminen kynillä Piirsitpä kynällä (tai muulla GDI-objektilla) mitä tahansa, tarvitset aina piirtopinnan. Kuten luvusta 15 muistat, piirtopinta on piirron kohde, joka on samanlainen kaikilla eri fyysisillä laitteilla ja piirtopinnalle piirretty kuvio on samanlainen lopullisesta piirtolaitteesta riippumatta. Piirtopinnan luominen piirtämistä varten SDI-sovelluksen näkymä (view) on ihanteellinen alusta taiteellista työtäsi varten. Seuraavat ohjeet opastavat yksinkertaista piirtokeskeistä näkymää käyttävän SDI-sovelluksen luomiseen. Piirtopinnan luominen SDI-sovellukseen 1. Valitse File-valikosta New. 2. Valitse New-ikkunassa Projects-välilehti ja saat esiin luettelon erilaisista projekteista. Valitse luettelosta MFC AppWizard (exe). 3. Anna projektin nimi Project Name ruutuun, listauksessamme on käytetty nimeä MyDraw. 4. Napauta OK ja saat esiin AppWizardin vaiheen Valitse sovelluksen tyypiksi Single Document ja napauta Finish-painiketta. Tämä tekee sovelluksellesi funktiorungon, joka käyttää yksinkertaista CView-näkymäluokkaa sovelluksesi Piirtopinnan valitseminen Piirtofunktioilla voidaan piirtää kaikille päteville piirtopinnoille. Voit siis tarttua kiinni toisen sovelluksen ikkunaan, selvittää sen piirtopinnan GetDC()- funktiolla ja alkaa piirtää. Vaihtoehtoisesti voit tarttua kiinni koko Windowsin työpöydän piirtopintaan ja piirtää siihen. Useimmat hyvin käyttäytyvät sovellukset kuitenkin avaavat oman ikkunansa ja piirtävät siihen. Windows huolehtii piirron rajaamisesta siten, ettei se pääse ikkunan ulkopuolisiin osiin.

8 366 Grafiikan piirtäminen päänäkymäluokan kantaluokkana. 6. Napauta OK New Project Information ikkunassa ja AppWizard luo projektin ja lähdekooditiedostot. Nyt pääsemme todella piirtämään. Piirtopaikan selvittäminen Saat selville piirto-osoittimen paikan piirtopinnan GetCurrentPosition()-funktiolla, joka palauttaa paikan CPointoliona. Kynän siirtäminen Piirtopinta tietää kynän senhetkisen paikan koordinaatit. Viivaa piirrettäessä aloitetaan aina nykyisestä paikasta ja siitä piirretään annettuun paikkaan. Tämän jälkeen päätepisteestä tulee uusi kynän nykyinen paikka. Piirtopinnan MoveTo()-funktiolla voidaan tätä paikkaa vaihtaa. MoveTo()-funktion parametrit ovat uuden paikan X- ja Y-koordinaatit. Valitse nyt projektin työtilaikkunassa ClassView-sivu. Sivulla pitäisi olla CMyDrawView-niminen luokka. Napauta luokan nimen viereistä plusmerkkiä ja näet luokan jäsenet. Voit sijoittaa piirtokoodisi luokan OnDraw()-funktioon. Kaksoisnapauta OnDraw()-funktiota ja näet listauksessa 16.5 esitetyn funktion oletustoteutuksen. LISTAUS 16.5 LST16_5.CPP OnDraw()-funktion oletustoteutus 1 // CMyDrawView drawing 2 3 void CMyDrawView::OnDraw(CDC* pdc) 4 { 5 CMyDrawDoc* pdoc = GetDocument(); 6 ASSERT_VALID(pDoc); 7 8 // TODO: add draw code for native data here B } Kuten näet, tämä OnDraw()-funktio saa piirtopintaosoittimen, joka vastaa SDI:n päänäkymän työaluetta. Tämän jälkeen funktiossa haetaan osoitin dokumenttiluokkaan (rivillä 5), koska useissa sovelluksessa piirretään dokumentissa olevien tietojen perusteella. Funktiorunko ei itse asiassa piirrä vielä mitään. Voit kokeilla tätä valitsemalla Build-valikosta Execute MyDraw.exe, jolloin projekti käännetään ja sovellusta ajettaessa näytetään tyhjä näkymä. Voit aloittaa piirtokoodisi piirto-osoittimen siirtämisellä. Lisää tätä varten listauksen 16.6 MoveTo()-rivi //TODO: add draw code kommentin jälkeen (kuten rivillä 8 on tehty).

9 LISTAUS 16.6 LST16_6.CPP MoveTo()-funktion käyttö OSA IV LUKU void CMyDrawView::OnDraw(CDC* pdc) 2 { 3 CMyDrawDoc* pdoc = GetDocument(); 4 ASSERT_VALID(pDoc); 5 6 // TODO: add draw code for native data here 7 8 pdc->moveto(50,100); // ** New MoveTo Line ** 1 9 } 1 Rivillä 8 muutetaan piirtopinnan piirto-osoittimen paikkaa MoveTo()-funktiolla. Vaikkei mitään piirretä, piirtopinnan oletuspiirto-osoitin on nyt 50 pistettä sivussa ja 100 pistettä aiempaa alempana uuden rivin 8 MoveTo()-kutsun ansiosta. Viivan piirtäminen Piirtopinnalla on MoveTo()-funktion kaltainen LineTo()-funktio, joka käyttää vielä samoja parametrejäkin. Viiva piirretään osoittimen paikasta annettuun paikkaan. Jos lisäät sovellukseesi listauksen 16.7 rivit OnDraw()-funktioosi, ne piirtävät pisteviivalla kolmion LineTo()-funktiota käyttäen. LISTAUS 16.7 LST16_7.CPP Viivojen piirtäminen 1 void CMyDrawView::OnDraw(CDC* pdc) 2 { 3 CMyDrawDoc* pdoc = GetDocument(); 4 ASSERT_VALID(pDoc); 5 6 // TODO: add draw code for native data here 7 8 // Create a Pen 9 CPen penred(ps_dot,1,rgb(255,0,0)); 10 // Declare a pointer to hold the Old Pen 11 CPen *poldpen = NULL; // Select the Red Pen 14 poldpen = pdc->selectobject(&penred); pdc->moveto(50,100); // Draw 'base' line 19 pdc->lineto(100,100); 1 20 // Draw first 'side' line 21 pdc->lineto(75,50); 1 Riveillä piirretään kolme kolmion muodostavaa viivaa LineTo()-funktiolla.

10 368 Grafiikan piirtäminen 22 // Draw second 'side' line 23 pdc->lineto(50,100); // Reselect the old pen 26 pdc->selectobject(poldpen); 27 } Kuten aiemminkin, joudut luomaan kynän (punainen, pisteviivaa tekevä) ja valitsemaan sen piirtopinnalle. Sen jälkeen voit muuttaa piirtokoordinaatteja (50,100) rivin 16 MoveTo()-funktiolla. Seuraava LineTo()-funktio rivillä 19 piirtää viivan paikasta (50,100) paikkaan (100,100). Tämä on vaakaviiva x-koordinaatista 50 paikkaan 100 pystykoordinaatin pysyessä arvossa 100. Seuraavat LineTo()-funktiot (riveillä 21 ja 23) piirtävät viivan ensin paikasta (100,100) paikkaan (75,59) ja siitä paikkaan (50,100). Saat käännettyä ja ajettua sovelluksesi nämä muutokset tehtyäsi valitsemalla Build-valikosta Execute ja napauttamalla sitten Yes ikkunassa, jossa kysytään Files Out of Date Would You Like to Build Them? Mikäli et ole tehnyt kirjoitusvirheitä, pitäisi ruudulla näkyä pisteviivalla piirretty pieni kolmio, kuvan 16.2 mukaisesti. KUVA 16.2 LineTo()-funktiolla piirretty kolmio.

11 OSA IV LUKU Piirtäminen pistekoordinaatein Jo luvussa 8 käytimme pisteluokkaa siirtämään koordinaatteja pareittain. CPoint sopiikin paikkoihin, jossa tarvitaan sekä x- että y-koordinaattia yhdessä. Piirtopinnan MoveTo()- ja LineTo()-funktiot ymmärtävät parametrinä saamaansa CPoint-oliota, joten voit piirtää niillä myös käyttämättä erikseen x- ja y-koordinaattiarvoja. Myös funktio GetCurrentPosition() on hyödyllinen - se palauttaa piirtokursorin paikan CPoint-tyyppisenä arvona (siis paikan, johon MoveTo()- tai LineTo()-funktioilla on päädytty). Käytössäsi on myös CRect-luokka, joka sisältää kahden pisteen koordinaatit, joista toiset osoittavat suorakulmion vasemman yläkulman ja toiset oikean alakulman. Saat esimerkiksi näkymäikkunan työalueen koordinaatit suorakulmioluokkana (CRect) funktiolla GetClientRect(). CRectillä on lisäksi muutamia hyödyllisiä jäsenfunktioita, joilla suorakulmion tietoja voidaan muokata. Eräs näistä on CenterPoint(), joka palauttaa suorakulmion keskipisteen CPointoliona. Ikkunan työalueen tapauksessa funktiolla saadaan ikkunan keskipiste. CRect-luokasta saadaan selville myös suorakulmion leveys Width()- ja korkeus Height()-funktiolla. Voit nyt poistaa esimerkkiohjelmasta kolmion piirtokoodin ja lisätä listauksessa 16.8 esitetyt uudet rivit, jolloin ikkunaan tullaan piirtämään kuvan 16.3 mukainen viivakuvio. LISTAUS 16.8 LST16_8.CPP Piirtäminen CPoint- ja CRectluokkien avulla Koko ikkunasuorakulmion selvittäminen Jos haluat löytää koko ikkunan koordinaatit, voit käyttää GetWindowRect()-funktiota, jolle syötetään CRect-olion osoitin. Tämän jälkeen ikkunan koordinaatit tallennetaan tuohon CRect-olioon. Jos kuitenkin piirrät OnDraw()-funktiolle välitetyn piirtopinnan kautta, rajataan piirtotoiminnot ikkunan työalueelle. 1 void CMyDrawView::OnDraw(CDC* pdc) 2 { 3 CMyDrawDoc* pdoc = GetDocument(); 4 ASSERT_VALID(pDoc); 5 6 // TODO: add draw code for native data here 7 8 // Create a Pen 9 CPen penred(ps_dot,1,rgb(255,0,0)); 10 CPen *poldpen = NULL; poldpen = pdc->selectobject(&penred); // Find the drawing area co-ordinates 15 CRect rcclient; 16 GetClientRect(&rcClient); 17

12 370 1 Riveillä käydään läpi ikkunan koko leveydeltä ja korkeudelta joka viidennessä pisteessä hyppien. Jokaiseen pisteeseen piirretään viiva ikkunan keskustasta. Grafiikan piirtäminen 18 for(int x=0; x < rcclient.width(); x+=5) 1 19 for(int y=0; y < rcclient.height(); y+=5) 20 { 21 CPoint ptnew(x,y); 22 pdc->moveto(rcclient.centerpoint()); 23 pdc->lineto(ptnew); 24 } pdc->selectobject(poldpen); 27 } Huomaa, kuinka näkymää pyydetään alustamaan rcclient-muuttuja riveillä 15 ja 16 GetClientRect()-funktiolta saaduilla ikkunan työalueen koordinaateilla. Näin tämän suorakulmion pisteiden läpikäyminen onnistuu kahdella for-silmukalla toisella rivit, toisella sarakkeet. Aluksi x-koordinaattia käydään läpi viiden pisteen välein ja samoin tehdään sisemmässä silmukassa y-koordinaatille jokaisen x- koordinaatin kanssa. Näin ikkunaan muodostuu ristikko; viivat piirretään ruudun keskipisteestä (joka saadaan rivillä 22 CenterPoint()-funktiolla) muuttuvaan ruudun nurkkapisteeseen ptnew, joka luodaan rivillä 21 ja syötetään LineTo()-funktiolle rivillä 23. Käännä ja aja sovelluksesi. Vain näin vähillä riveillä saat aikaan kuvan 16.3 esittämän upean viivapiirroksen. KUVA 16.3 Viivapiirros pisteiden ja suorakulmioiden avulla

13 Ympyröiden ja ellipsien piirtäminen Ympyrä on tarkkaan ottaen vain ellipsi, jonka leveys on sama kuin korkeus, joten näiden piirtämiseen riittää hyvin yksi piirtopinnan funktio. Ellipse()-funktiota voidaan käyttää kahdella tavalla. Ensimmäisessä funktiolle annetaan yksi CRect-parametrinä ellipsin ympäröivän suorakulmion koordinaatit. Toinen tapa on syöttää nämä neljä koordinaattiarvoa erikseen (ensin vasemman yläkulman x-, sitten y-, seuraavaksi oikean alakulman x- ja y-koordinaatit). Muokkaa nyt OnDraw()-funktiosi koodi listauksen 16.9 mukaiseksi. Saat aikaan ympyröiden sisälle piirrettyjä toisia ympyröitä (kuva 16.4). LISTAUS 16.9 LST16_9.CPP Ympyröiden piirtäminen Ellipse()-funktiolla. OSA IV LUKU void CMyDrawView::OnDraw(CDC* pdc) 2 { 3 CMyDrawDoc* pdoc = GetDocument(); 4 ASSERT_VALID(pDoc); 5 6 // TODO: add draw code for native data here 7 8 // Create a Pen 9 CPen penred(ps_dot,1,rgb(255,0,0)); 10 CPen *poldpen = NULL; poldpen = pdc->selectobject(&penred); // Don't fill the ellipse 15 pdc->selectstockobject(null_brush); CRect rcclient; 18 GetClientRect(&rcClient); // Declare a center-positioned rectangle object 21 CRect rcellipse(rcclient.centerpoint(), 22 rcclient.centerpoint()); // Keep going until the ellipse fills the client area 26 while(rcellipse.width() < rcclient.width() 1 27 && rcellipse.height() < rcclient.height()) 28 { 29 // Increase the ellipse size by 10 pixels 30 rcellipse.inflaterect(10,10); 31 pdc->ellipse(rcellipse); 32 } pdc->selectobject(poldpen); 35 } 1 Rivin 26 while-silmukka tekee riveillä yhä suuremman ympyrän, kunnes ympyrän halkaisija on ikkunan työalueen korkuinen tai levyinen.

14 372 Grafiikan piirtäminen Ensimmäisen huomattava muutos on pdc-> SelectStockObject(NULL_BRUSH) rivillä 15 tämä tarvitaan, koska oletuksena Ellipse()-funktio (rivillä 30) täyttää piirrettävän alueen valittuna olevaa sivellintä (brush) käyttäen. Huomaa, että tällä funktiolla piirtopinta saadaan piirtämään vain ellipsin ääriviivat ilman sen täyttämistä värillä tai kuviolla. Tämän jälkeen luodaan suorakulmio (rcellipse), jota käytetään ellipsin piirtämiseen. Aluksi suorakulmion vasen yläkulma ja oikea alakulma alustetaan ikkunan keskipisteeseen. Koordinaatteja kasvatetaan sitten while-silmukassa (rivit 25,26 ja 27-31), kunnes suorakulmio tulee ikkunan kokoiseksi tai suuremmaksi. Tässä silmukassa kutsutaan rivillä 30 CRect-luokan uutta jäsenfunktiota InflateRect() kasvattamaan suorakulmion leveyttä ja korkeutta 10 kuvapisteellä. Tämä laajentaa suorakulmion keskipisteestä kohti ikkunan reunoja. Ellipsi piirretään sitten tähän suurempaan suorakulmioon ja näin saadaan aikaan kuvio, jossa on ympyrän sisällä ympyröitä, joissa on ympyröitä. Näet kuvan 16.4 mukaisen piirroksen kasvavan kääntäessäsi ja ajaessasi sovelluksesi näiden muutosten tekemisen jälkeen. KUVA 16.4 Ympyröiden piirtäminen Ellipse()-funktiolla

15 OSA IV LUKU Kaarien piirtäminen PolyBezier()-funktio on nimetty matemaatikko Bézierin mukaan hän keksi yksinkertaistaa kaaret kuutiollisiksi spline-käyriksi. Spline on kaareva viiva ja kuutiollinen (cubic) tarkoittaa, että kaari määritellään alku- ja loppupisteen sekä kahden ohjauspisteen avulla. Nämä ohjauspisteet vetävät kaarta puoleensa alku- ja loppupisteiden välillä. Viivan pisteet interpoloidaan siis näiden pisteiden mukaan. Poly tarkoittaa, että tällaisia kaaria voi olla peräkkäin useita. Funktiolle syötetään CPoint-oliovektori (vähintään neljä pistettä) sekä vektorin sisältämien pisteiden määrä. Muuta siis OnDraw()-funktiosi listauksen mukaiseksi GetClientRect()- ja SelectObject()-funktioiden väliltä. Ohjelma piirtää kuvan 16.5 mukaiset Bézier-kaaret. Kaarien piirtäminen on hitaampaa Koska kaarevien viivojen laskeminen on tavallisia suoria viivoja mutkikkaampaa, myös niiden piirtäminen kestää kauemmin. Tätä nopeuseroa ei välttämättä huomaa vielä muutamalla lyhyellä kaarella, mutta se saattaa olla merkittävä niitä enemmän piirrettäessä. LISTAUS LST16_10.CPP Kaarien piirtäminen PolyBezier()-funktiolla 1 GetClientRect(&rcClient); 2 3 // Create an array to hold the points 4 CPoint ptbezierar[4]; 5 CPen penblue(ps_solid,3,rgb(0,0,255)); 6 7 pdc->selectobject(&penblue); 1 8 for(int i=0; i < 4 ;i++) 9 { 10 // Setup an array of random points 11 ptbezierar[i] = 12 CPoint(rand()%rcClient.Width(), 13 rand()%rcclient.height()); // Draw a label 16 CString strpointlabel; 2 17 strpointlabel.format("%d.",i+1); 18 pdc->textout(ptbezierar[i].x, 19 ptbezierar[i].y, 20 strpointlabel); // Draw the co-ordinates as blue dots 23 CRect rcdot(ptbezierar[i],ptbezierar[i]); 24 rcdot.inflaterect(2,2); 25 pdc->ellipse(rcdot); 26 } // Draw a red Bezier curve 29 pdc->selectobject(&penred); 30 pdc->polybezier(ptbezierar,4); pdc->selectobject(poldpen); 1 Rivillä 7 valitaan pisteiden piirtämiseen (rivillä 25) sininen kynä. 2 Riveillä luodaan CString-olio, joka muotoillaan pisteen numeroksi. Tämä merkkijono piirretään sitten pisteen paikkaan nimilapuksi rivin 18 TextOut()-funktiolla. 3 Rivillä 30 piirretään Bézierkaari PolyBezier()-funktiolla käyttäen rivillä 29 valittua punaista kynää.

16 374 Grafiikan piirtäminen Listauksessa määritellään CPoint-vektori ptbezierar rivillä 4 ja kaikki neljä pistettä valitaan satunnaisesti ikkunan työalueen sisältä (rivit 12 ja 13). Tämän jälkeen rivillä 18 piirretään piirtopinnan TextOut()-funktiolla merkkejä annettuun pisteeseen (tästä lisää luvussa 17). Rivin 25 Ellipse()-funktio sopii hyvin pistettä esittävän sinisen ympyrän piirtämiseen (uudella kynällä). Lopuksi valitaan uudelleen punaista pisteviivaa piirtävä kynä ja kutsutaan (rivillä 30) PolyBezier()-funktiota. Funktio saa parametreinä pistevektorin sekä tiedon siitä, että pisteitä on neljä. PolyBezier() piirtää kaaren pisteestä 1 pisteeseen 4 siten, että kaarta ohjaavat pisteet 2 ja 3. Nähdäksesi PolyBezier()-funktion toiminnassa käännä ja aja sovelluksesi. Kuva 16.5 esittää kunkin pisteen vaikutuksen kaaren muotoon. Muuta ikkunan kokoa ja hämmästele, kuinka joka kerta piirretään uusi kaari. KUVA 16.5 Kaarien piirtäminen PolyBezier()-funktiolla.

17 Monikulmioiden piirtäminen Polyline()-funktio käyttää samanlaisia parametrejä kuin PolyBezier(): useasta CPoint-pisteestä koostuva vektori sekä pisteiden lukumäärä. Kaaren sijaan funktio yksinkertaisesti liittää pisteet yhteen suoralla. Pisteiden enimmäismäärää ei ole rajoitettu, mutta niitä pitää olla vähintään kaksi. Tämä tekee CPoint-vektoreihin talletettujen kuvioiden piirtämisen yksinkertaiseksi. Funktioista on myös valmista aloituspistettä käyttävät muodot PolylineTo() ja PolyBezierTo(), jotka käyttävät viimeksi piirretyn pisteen koordinaatteja oletusarvoina. Muutapa OnDraw()-funktiossa PolyBezier()-funktiokutsu Polyline():ksi ja käännä ja aja sovelluksesi. Nyt ikkunaan piirretään kauniin kaaren sijaan pisteestä toiseen kulkevat suorat (listaus 16.11). LISTAUS LST16_11.CPP Viivojen piirtäminen Polyline()-funktiolla 1 // Select the red pen 2 pdc->selectobject(&penred); 3 4 // Draw the Polyline with 4 points 5 pdc->polyline(ptbezierar,4); 6 7 // Reselect the old pen 8 9 pdc->selectobject(poldpen); OSA IV LUKU Jos haluat piirtää monikulmioita Polyline()-funktiolla (rivi 5), tulee vektorin viimeisen pisteen koordinaattien olla samat kuin ensimmäisen. Siveltimien luominen Kynillä (pen) on hyvä piirtää muotojen ääriviivoja, mutta kuvioiden värittämiseen tarvitaan sivellintä. Useimmat GDI:n piirtofunktioista käyttävät sekä kynää että sivellintä. Kynällä piirretään kuvion reunat ja siveltimellä väritetään itse kuvio. Kynä voi olla eri värinen kuin sivellin ja silti kuvio saadaan piirrettyä yhdellä funktiokutsulla. CBrush-luokan käyttö GDI-sivellin (brush) on paketoitu MFC:n luokkaan CBrush. Siveltimen väri voi olla kiinteä, sivellin voi käyttää maalaamiseen kuvioitua

18 376 Grafiikan piirtäminen väritystä tai jopa bittikarttaa. Sivellinluokalla on tästä syystä useita eri tyyppisiä syötteitä hyväksyviä muodostinfunktioita; voit toki myös määritellä aluksi pelkän alustamattoman siveltimen ja luoda sen sopivalla funktiolla jälkeenpäin. Väritettyjen ja kuvioitujen siveltimien luominen Helpoin sivellin käyttää yhtä väriä. Tällainen luodaan määrittelemällä CBrush-olio ja syöttämällä sille ainoana parametrinä väritunnus. Näin saat siveltimen, joka maalaa alueita ainoastaan tuolla värillä, esimerkiksi: CBrush bryellow(rgb(192,192,0)); Viivoitettua jälkeä (hatch) maalaava sivellin puolestaan määritellään antamalla ensimmäisenä parametrinä viivoituslippu ja toisena väritunnus: CBrush bryellowhatch(hs_diagcross,rgb(192,192,0)); Käytettävät viivoitusliput on esitetty taulukossa TAULUKKO 16.3 Siveltimen viivoitusliput Lippu HS_CROSS HS_DIAGCROSS HS_HORIZONTAL HS_VERTICAL HS_BDIAGONAL HS_FDIAGONAL Vaikutus Pysty- ja vaakaviivoitus Vinoviivoitus ristiin Vaakaviivoitus Pystyviivoitus Vinoviivoitus vasemmalta ylhäältä oikealle alas Vinoviivoitus vasemmalta alhaalta oikealle ylös Ikkunan taustan värittäminen Voit muuttaa ikkunan taustavärin sivellintä käyttäen käsittelemällä ikkunan taustanpyyhintäsanoman (WM_ERASEBKGND). Ikkunan taustavärin muuttaminen lisäämällä ikkunan taustan pyyhkimisen käsittelijäfunktio 1. Napauta WizardBar-riviä (jossa on kolme yhdistelmäruutua) hiiren oikealla painikkeella. Ensimmäisessä yhdistelmäruudussa tulisi näkyä näkymäluokkasi nimi (esimerkiksi CMyDrawView) ja

19 toisessa pitäisi olla teksti (All class members). 2. Hiiren oikeaa painiketta napauttamalla esiin tulee pikavalikko, jossa on komento Add Windows Message Handler. Valitse tämä ja saat esiin kuvan 16.6 esittämän ikkunan. 3. Valitse vasemmanpuoleisesta luettelosta WM_ERASEBKGND ja napauta Add and Edit painiketta. Nyt käsittelijäfunktio OnEraseBkgnd() on lisätty. 4. Korvaamalla funktion oletustoteutuksen omalla koodillasi saat muokattua ikkunan taustaa. Listauksessa on esitetty koodiin tarvittavat muutokset keltaisen viivoituksen tekemiseksi ikkunan taustalle. OSA IV LUKU KUVA 16.6 Message and Event Handler ikkuna. LISTAUS LST16_12.CPP Ikkunan taustan muuttaminen OnEraseBkgnd()-funktiossa. 1 BOOL CMyDrawView::OnEraseBkgnd(CDC* pdc) 2 { 3 CBrush bryellowhatch(hs_diagcross,rgb(192,192,0)); 4 5 CRect rcclient; 6 GetClientRect(&rcClient); 7 pdc->fillrect(rcclient,&bryellowhatch); return TRUE; 10 } 1 Jos WM_ERASEBKGNDsanoma käsitellään, ollaan vastuussa taustan pyyhkimisestä rivin 7 FillRect()-funktiolla. Rivillä 9 palautetaan arvo TRUE, joka ilmoittaa, että käsittelijä on suorittanut tehtävän.

20 378 Grafiikan piirtäminen Käännettyäsi sovelluksen muutosten jälkeen ja käynnistettyäsi sen pitäisi ikkunan tausta tulla esitetyksi keltaisella viivoituksella. Korvaamassasi OnEraseBkgnd()-funktiossa luot aluksi keltaisen siveltimen (rivi 3), haet työalueen koordinaatit (rivi 5) ja täytät tuon suorakulmion FillRect()-funktiolla (rivi 7) valitun siveltimen värillä. Kun funktio palauttaa Windowsille TRUE (rivi 9), ei Windowsin tarvitse enää huolehtia ikkunan taustan päivityksestä. Siveltimien luominen kuvioista ja kuvista Kuvasiveltimet tarjoavat Windowsissa useita mukavia piirtomahdollisuuksia. Kuvasiveltimellä voit piirtää vierekkäin esitettyjä kuvia halutulle alueelle. Jotkut sovellukset hyödyntävät tätä jopa työkaluriveillään. Siveltimessä käytettävän kuvan luominen 1. Valitse työtilaikkunassa ResourceView-sivu. 2. Avaa projektin resurssit napauttamalla plusmerkkiä. Käännetyt bittikarttaresurssit Kun sovelluksesi käännetään, nämä bittikarttaresurssit liitetään suoritettavaan ohjelmaasi (.exetiedosto). Saat bittikartat esille ohjelmatiedostosta määrittämällä tiedostoa avattaessa Open As - tyypin arvoon resources. Jos haluat liittää sovellukseesi paljon suuria bittikarttoja, ne saattaa olla parempi ladata tiedostoista (tai resurssi-dll:istä), koska muutoin suoritettavan ohjelman koko kasvaa huomattavasti. 3. Napauta kansiota ikkunassa hiiren oikealla painikkeella ja valitse Insert-komento pikavalikosta. 4. Valitse Insert Resource ikkunassa Bitmap. 5. Nyt uuden IDB_BITMAP1-resurssin pitäisi tulla näkyviin. Napauta editori-ikkunassa kuvan päällä kerran ja näppäile Alt+Enter, jolloin saat esiin bittikartan asetukset Propertiesikkunaan (voit myös valita View-valikosta Properties). 6. Anna bittikartalle sopiva nimi (tässä IDB_INVADER) ja aseta kuvan leveydeksi (width) ja korkeudeksi (height) 8. Piirrä sitten varsinainen kuva editorissa (esimerkiksi kuvan 16.7 esittämä ufomies). Nyt joudut vielä toteuttamaan koodin, joka tekee siveltimen uudestabittikartastasi. Sulje tätä varten bittikarttaeditori ja muuta OnEraseBkgnd()-funktion koodi listauksen 16.13

21 OSA IV LUKU KUVA 16.7 Sivellinkuvan piirtäminen. s i a kum LISTAUS LST16_13.CPP Bittikarttasiveltimen käyttö 1 BOOL CMyDrawView::OnEraseBkgnd(CDC* pdc) 2 { 3 // Declare an invader bitmap 4 CBitmap bminvader; 5 6 // Load the bitmap resource 7 8 bminvader.loadbitmap(idb_invader); 1 9 // Create a brush from the bitmap CBrush brinvader(&bminvader); CRect rcclient; 14 GetClientRect(&rcClient); // Fill the rectangle from the bitmap brush 17 pdc->fillrect(rcclient,&brinvader); return TRUE; 20 } 1 Bittikartta ladataan IDB_INVADER-resurssista LoadBitmap()-funktiolla. 2 CBrush-olio voidaan muodostaa CBitmap-oliolla, jolloin voidaan maalata bittikarttakuviolla. 3 Bittikarttasivellintä voidaan käyttää tavalliseen tapaan FillRect()-funktiolla, joka pyyhkii ikkunan taustan.

22 380 Bittikarttasiveltimen rajoitukset Windows 95 osaa käyttää ainoastaan 8x8-kokoista bittikarttasivellintä, mutta Windows NT:ssä kokoa ei ole rajoitettu. Grafiikan piirtäminen Käännettyäsi ja ajettuasi ohjelmaa listauksen muutosten tekemisen jälkeen pitäisi ikkunan taustalla olla useita pieniä ufomiehen kuvia. Kuva sijaitsee luokan CBitmap-oliossa (rivi 4) ja se ladataan tekemästäsi bittikarttaresurssista LoadBitmap()-funktiolla rivillä 8. Kun CBrusholio on muodostettu kyseisellä bittikartalla (rivi 11), tällä voidaan piirtää tavalliseen tapaan, esimerkiksi FillRect()-funktiota (rivi 17) käyttäen. Varastosiveltimien käyttö Kynien tapaan myös useita siveltimiä on valmiiksi määritelty Windowsissa heti käytettäviksi. Taulukossa 16.4 on esitetty nämä varastosiveltimet. TAULUKKO 16.4 Varastosiveltimet Varastosivellin BLACK_BRUSH WHITE_BRUSH DKGRAY_BRUSH LTGRAY_BRUSH GRAY_BRUSH NULL_BRUSH Vaikutus Maalaa mustalla Maalaa valkealla Maalaa tummanharmaalla Maalaa vaaleanharmaalla Maalaa harmaalla Läpinäkyvä (ei täyttöä) Näitä voidaan ottaa käyttöön suoraan piirtopinnalle SelectStockObject()-funktiolla, kuten listauksessa 16.9 rivillä 15 tehtiin NULL_BRUSH:ille. Lisää järjestelmävärejä saadaan siveltimien käyttöön CreateSysColorBrush()-funktiolla. Voit valita värin ikkunan eri osille sopivalla lipulla, jotka on esitetty taulukossa CreateSysColorBrush()- funktion käyttö Käytä aina CreateSysColorBrush()-funktiota halutessasi matkia sovelluksessasi Windowsin työpöydän värejä. Jos käytät kiinteää COLORREF-väriarvoa, joka on sama kuin Windowsin työpöydälläsi, ei käyttäjän muuttama työpöydän väri vaikuta sovelluksesi väreihin. TAULUKKO 16.5 CreateSysColorBrush()-funktion käytettävissä olevat järjestelmäväriliput Järjestelmävärilippu Kuvaus COLOR_DESKTOP Työpöydän taustaväri COLOR_BTNTEXT Painikkeen tekstin väri COLOR_GRAYTEXT Käytöstä poistetun valinnan tekstin väri COLOR_HIGHLIGHT Valitun alkion taustaväri COLOR_HIGHLIGHTTEXT Valitun tekstin taustaväri Järjestelmävärilippu Kuvaus COLOR_ACTIVEBORDER Valitun ikkunan reunaväri

23 OSA IV LUKU COLOR_INACTIVEBORDER COLOR_INFOBK COLOR_INFOTEXT COLOR_WINDOW COLOR_WINDOWFRAME COLOR_WINDOWTEXT COLOR_3DDKSHADOW COLOR_3DFACE COLOR_3DHIGHLIGHT COLOR_3DLIGHT Valitsemattoman ikkunan reunaväri Työkaluvihjeiden taustaväri Työkaluvihjeiden tekstin väri Ikkunan taustaväri Ikkunan kehyksen väri Ikkunassa esitetyn tekstin väri Painikkeen varjon väri Painikkeen väri Painikkeen korostusväri Painikkeen vaalean reunan väri Kokeilepa tätä muuttamalla OnEraseBkgnd()-funktion sivellintä (listaus 16.14). LISTAUS LST16_14.CPP Järjestelmävärisiveltimen luominen 1 BOOL CMyDrawView::OnEraseBkgnd(CDC* pdc) 2 { 3 CBrush brdesktop; 4 5 brdesktop.createsyscolorbrush(color_desktop); CRect rcclient; 8 GetClientRect(&rcClient); 9 pdc->fillrect(rcclient,&brdesktop); return TRUE; 12 } Käännettyäsi muutosten jälkeen ohjelmasi tulisi työpöydän värin muuttua ikkunan taustan väriseksi ohjelmaa ajettaessa. 1 Voit luoda järjestelmän vakiovärin CreateSysColorBrush()- jäsenfunktiolla. Siveltimien valitseminen piirtopinnalle Voit valita uuden siveltimen piirtopinnalle SelectObject()- funktiolla. Valitseminen tehdään samoin kuin kynän valitseminen eli vanha sivellin tallettaen ja lopuksi palauttaen. Tätä on havainnollistettu listauksessa LISTAUS LST16_15.CPP Siveltimen valitseminen piirtopinnalle

24 382 1 Rivillä 11 piirretty ellipsi täytetään Windowsin työpöydän värillä. Grafiikan piirtäminen 1 BOOL CMyDrawView::OnEraseBkgnd(CDC* pdc) 2 { 3 CBrush brdesktop; 4 brdesktop.createsyscolorbrush(color_desktop); 5 6 CRect rcclient; 7 GetClientRect(&rcClient); 8 9 CBrush* poldbrush = pdc->selectobject(&brdesktop); pdc->ellipse(rcclient); pdc->selectobject(poldbrush); 14 return TRUE; 15 } Tässä esimerkissä tausta täytetään ellipsillä, joten ohjelmaa ajettaessa lopputulos on vähintäänkin outo. Sivellin valitaan ja ellipsin muotoinen alue asetetaan työpöydän väriseksi. Ellipsi ei kuitenkaan täytä koko ikkunaa, joten ikkunan nurkat jäävät läpinäkyviksi eli näet alla olevan työpöydän. Käännä ja aja siis ohjelmasi nämä nähdäksesi. Läpinäkyvyys saadaan aikaan myös, kun ikkunan tausta maalataan NULL_BRUSH-siveltimellä. Bittikartta- ja kuviosiveltimien tuhoaminen Kun bittikarttasivellin tuhotaan, tulee muistaa tuhota myös siihen liitetty bittikartta (mikä ei tuhoudu automaattisesti). Joudut myös varmistamaan, että bittikartta on tuhottu ennen siveltimen tuhoamista, jotta käytössä olevaa objektia ei tuhottaisi. Siveltimien tuhoaminen Kynien tapaan voit tuhota siveltimiä GDI-resurssien vapauttamiseksi ja luoda uuden tarvittaessa Create-funktiolla. Seuraavat Create-funktiot ovat käytettävissä: CreateSolidBrush(), CreateHatchBrush(), CreateBrushIndirect(), jolle syötetään LOGBRUSH-tietorakenne, CreatePatternBrush(), jolle syötetään bittikartta sekä CreateSysColorBrush(), jota juuri käsiteltiin. Kaikille näille Create-funktiolle kelpaavat samat parametrit kuin vastaaville muodostinfunktioille. Täytettyjen kuvioiden piirtäminen siveltimillä

25 Täytettyjen kuvioiden piirtämistä varten on monia piirtofunktioita. Voit piirtää erilaisia monikulmioita, suorakulmioita ja ympyrästä leikattuna osia. OSA IV LUKU Suorakulmioiden ja pyöristettyjen suorakulmioiden piirtäminen Suorakulmioiden piirtämiseen voidaan käyttää Rectangle() ja RoundRect()-funktioita (sekä jo tuttua FillRect()-funktiota). Rectangle() käyttää samoja parametrejä kuin Ellipse() eli yksi CRect-olio tai neljä koordinaattiarvoa vasemman yläkulman ja oikean alakulman x- ja y-koordinaatit. RoundRect()-funktiolle syötetään vielä lisää koordinaatteja, jotka voidaan antaa CPoint-oliona tai kokonaislukukoordinaatteina. Koordinaattipari määrittää kulmiin piirrettävän ellipsin leveyden. Jos muutat OnEraseBkgnd()-käsittelijän kutsumaan Rectangle()- funktiota Ellipse():n sijaan, asetetaan ikkunan tausta seuraavalla koodilla työpöydän väriseksi FillRect():in tapaan: pdc->rectangle(rcclient); Huomaa, että FillRect() käyttää osoitinta siveltimeen, mutta Rectangle() käyttää suoraan valittuna olevaa piirtopinnan sivellintä. Saat suorakulmioihin pyöristetyt kulmat käyttämällä Rectangle()- funktion tilalla RoundRect()-funktiota. Jos jälleen muutat OnDraw()- käsittelijää siten, että korvaat Polyline()-funktion listauksessa esitetyllä koodilla, saat suorakulmion sijaan sellaisen, jolla on pyöristetyt kulmat. LISTAUS LST16_16.CPP RoundRect()-funktiolla piirtäminen 1 void CMyDrawView::OnDraw(CDC* pdc) 2 { 3 CMyDrawDoc* pdoc = GetDocument(); 4 ASSERT_VALID(pDoc); 5 6 // TODO: add draw code for native data here 7 8 CPen penred(ps_solid,5,rgb(255,0,0)); 9 CPen *poldpen = NULL; poldpen = pdc->selectobject(&penred); CRect rcclient; 14 GetClientRect(&rcClient);

26 384 1 Rivillä 22 esitetään, kuinka RoundRect()-funktiota käytetään pyöristettyjen suorakulmioiden piirtämiseen, joiden kulman säde on 15 pistettä. Grafiikan piirtäminen CBrush brblue(rgb(0,0,255)); 17 CBrush *poldbrush = NULL; poldbrush = pdc->selectobject(&brblue); rcclient.deflaterect(50,50); 22 pdc->roundrect(rcclient,cpoint(15,15)); pdc->selectobject(poldbrush); 25 pdc->selectobject(poldpen); 26 } Huomaa, että olemme vaihtaneet punaista pisteviivaa piirtävän kynän paksuun yhtenäistä viivaa piirtävään punaiseen (rivi 8), jotta reunus näkyisi paremmin. Rivillä 16 määritellään sininen sivellin, joka valitaan piirtopinnalle rivillä 19. CRect-työalue pienennetään rivillä 21 pienemmän suorakulmion piirtämiseksi (rivi 22) 15 kuvapistettä leveää pyöristysellipsiä sen kulmissa käyttäen. Kääntäessäsi ja ajaessasi ohjelman muutosten jälkeen, tulisi näytölle piirtyä sininen kulmistaan pyöristetty suorakulmio, jonka reunat ovat siniset. Ikkunan tausta on työpöydän värinen. Näppärä tapa luoda ellipsejä pisteestä Usein halutaan luoda määrätyn kokoinen ellipsi tietystä keskipisteestä. Tämä käy kätevästi muodostamalla CRectolio samasta CPoint-oliosta sekä vasemman yläkulman että oikean alakulman koordinaateiksi, esimerkiksi CRect rcellipse(ptcenter, ptcenter); Tämän jälkeen ympyrän halkaisija voidaan syöttää InflateRect()- funktiolle ja saatu suurempi suorakulmio Ellipse()-funktiolle. Täytettyjen ellipsien ja ympyröiden piirtäminen Käytimme ellipsejä jo aiemmin listauksen ikkunan taustanpiirtotehtävissä. Kynien kanssa käytetty Ellipse()-funktio on sama kuin siveltimienkin kanssa käytetty NULL_BRUSH-sivellin sai aikaan kynämäisen ääriviivajäljen ilman kuvion täyttämistä. Lisää seuraavat rivit RoundRect()-kutsun jälkeen Ellipse()-funktiolla piirtämiseksi: // pienennä suorakulmiota lisää rcclient.deflaterect(25,25); // Piirrä suorakulmion sisään pienempi ellipsi pdc->ellipse(rcclient); Ohjelmaa ajettaessa pienen ellipsin pitäisi olla kulmista pyöristetyn suorakulmion sisällä. Reunaviiva on punainen valitusta kynästä johtuen. Puoliellipsien piirtäminen Puoliellipsit (chord) muodostetaan ellipsistä jakamalla se sen halkaisevalla suoralla kahtia. Juuri näin Chord()-funktiota käytetään. Se tarvitsee syötteeksi suorakulmion (CRect-olio) aivan ellipsin tapaan.

27 Lisäksi tarvitaan kaksi koordinaattiparia halkaisevan suoran määrittämistä varten. Piirrettävä osa riippuu siitä, kumpi pisteistä annetaan ensin. Tee OnDraw()-funktioon listauksessa esitetyt muutokset siveltimen valintojen väliin. LISTAUS LST16_17.CPP Puoliellipsien piirtäminen Chord()-funktiolla OSA IV LUKU poldbrush = pdc->selectobject(&brblue); 2 3 CRect rcchord = rcclient; 4 rcchord.deflaterect(50,50); 5 6 pdc->chord(rcchord, 7 rcclient.topleft(), 8 rcclient.bottomright()); pdc->selectobject(poldbrush); 1 Puoliellipsi tehdään leikkaamalla ellipsiä viivalla vasemmasta yläkulmasta oikeaan alakulmaan. Ensimmäinen huomattava muutos on rivillä 3 tehty rcchord-olion määrittely. Samalla olio alustetaan työalueen koordinaatteihin. Tämän jälkeen voit pienentää Deflate()-funktiolla suorakulmiota 50 pistettä (rivi 8) ja käyttää tätä puoliellipsin piirtämiseen riveillä 5-7. Puolitusviiva määritellään tällä kertaa ikkunan työalueen vasemmasta yläkulmasta oikeaan alakulmaan. Näin ellipsi saadaan halkaistua siististi kulmittain puoliksi. Ohjelman kääntämisen ja käynnistämisen jälkeen sen pitäisi näyttää kuvan 16.8 mukaiselta.

28 386 Grafiikan piirtäminen KUVA 16.8 Täytetty puoliellipsi. Mikä monikulmion täyttötapa on käytössä? Saat selville valitun monikulmion täyttötavan kutsumalla piirtopinnan GetPolyFillMode()- funktiota. Tämä palauttaa joko arvon ALTERNATE tai WINDING, riippuen piirtopinnalle valitusta täyttötavasta. Täytettyjen monikulmioiden piirtäminen Polygon()-funktiolle annetaan samat parametrit kuin Polyline()- ja PolyBezier()-funktioille: se tarvitsee joukon koordinaattipareja sekä koordinaattien määrän. Tämän jälkeen piirretään pisteet yhdistävä monikulmio. Toisin kuin Polyline()-funktiossa tätä varten ei tarvita samoja arvoja viimeisissä ja ensimmäisissä koordinaateissa, koska pisteiden yhdistäminen yhtenäiseksi kuvioksi tehdään automaattisesti. Ainoa piirtämistä mutkistava seikka on täyttötavan valinta. Funktiolla SetPolyFillMode() voidaan täyttötavaksi valita ALTERNATE tai WINDING. Viivat väritetään riveittäin vasemmalta oikealle ALTERNATE - valinnalla, WINDING saa aikaan suunnan vaihtamisen vuoroin vasemmalta oikealle ja vuoroin oikealta vasemmalle. Tee monikulmiosovellus muuttamalla OnDraw()-funktiosi listauksen mukaiseksi.

29 LISTAUS LST16_18.CPP Tähtien piirtäminen Polygon()-funktiolla OSA IV LUKU #include "math.h" 2 void CMyDrawView::OnDraw(CDC* pdc) 3 { 4 CMyDrawDoc* pdoc = GetDocument(); 5 ASSERT_VALID(pDoc); 6 CPen penred(ps_solid,5,rgb(255,0,0)); 7 CPen *poldpen = NULL; 8 poldpen = pdc->selectobject(&penred); 9 CRect rcclient; 10 GetClientRect(&rcClient); 11 CBrush brblue(rgb(0,0,255)); 12 CBrush *poldbrush = NULL; 13 poldbrush = pdc->selectobject(&brblue); 14 for(int w=0;w<2;w++) 15 { 16 const int npoints = 5; 17 double nangle = (720.0/57.295)/(double)nPoints; 18 int xoffset = (w? 1 : -1)*rcClient.Width()/4; 19 pdc->setpolyfillmode(w? ALTERNATE : WINDING);1 20 CPoint ptpolyar[npoints]; 21 for(int i=0;i<npoints;i++) 2 22 { 23 ptpolyar[i].x = xoffset + (long) 24 (sin((double)i * nangle) * 100.0); 25 ptpolyar[i].y = (long) 26 (cos((double)i * nangle) * 100.0); 27 ptpolyar[i] += rcclient.centerpoint(); 28 } 29 pdc->polygon(ptpolyar,npoints); 2 30 } 1 Ensimmäisellä toistokerralla w on nolla, joten käytetään täyttötapaa WINDING. Toisella kerralla täyttötapa on ALTERNATE. 2 Tähden pisteet lasketaan ja tallennetaan ptpolyarpistetaulukkoon. 3 Monikulmio voidaan piirtää pistetaulukon ja taulukon pisteiden määrän perusteella käytäen Polygon()-funktiota. 31 pdc->selectobject(poldbrush); 32 pdc->selectobject(poldpen); 33 } Joudut lisäämään tiedoston alkuun #include math.h rivin, jotta sin- ja cos-funktiot kääntyisivät. Rivillä 20 muodostetaan kaksi tähteä pistevektoreihin ja ne piirretään rivin 29 Polygon()-funktiolla. Ensimmäinen, vasemmanpuoleisin, käyttää WINDING-täyttötapaa, toinen ALTERNATE-tapaa.

30 388 Grafiikan piirtäminen Koska tähtikuviossa monikulmion reunaviivat risteävät, WINDING-versio täyttää koko kuvion, mutta ALTERNATE jättää keskiosan täyttämättä. Käännettynä ja ajettaessa monikulmiot näyttävät kuvan 16.9 mukaisilta. KUVA 16.9 Monikulmiot on piirretty WINDING- ja ALTERNATEtäyttötavalla.