Graafisen käyttöliittymän ohjelmointi Syksy 2013

Transkriptio

1 TIE Tietotekniikan vaihtuva-alainen kurssi Graafisen käyttöliittymän ohjelmointi Syksy 2013 Luento 5 Qt: Grafiikan piirto Juha-Matti Vanhatupa

2 Sisältö GDI Qt paint system Koordinaatisto-operaatioita

3 GDI Windows:ssa piirtämisestä huolehtii GDI (Graphical Device Interface). API sisältää joukon GDI-objekteja joiden avulla rajapintaa voidaan käyttää GDI+ (Windows XP)

4 Graphical Device Interface (GDI)

5 GDI-objekteja Pen Brush Font Color Bitmap

6 Device context (piirtopinta) GDI:n ylläpitämä windowsin sisäinen tietorakenne, joka sisältää piirtopintaan liittyviä attribuutteja, kuten väri ja fontti tekstin piirrossa Piirtopintoja Näyttö (Display) Tulostin (Printer) Muisti (Memory, Bitmap)

7 Device context (piirtopinta) Matalan tason toteutus Pyydetään käyttöjärjestelmältä piirtopinnan kahva Asetetaan piirtopintaan tarvittavat asetukset (esim kynä) Suoritetaan piirtotoiminnot GDI-funktioilla Vapautetaan piirtopinta, jonka jälkeen kahva ei ole enää käyttökelpoinen

8 Esimerkki (winapi) HDC hdc; PAINTSTRUCT ps; // Pyydetään kahva piirtopintaan hdc = BeginPaint(hWnd, &ps); // Asetetaan objekti piirtopintaan HBRUSH old = SelectObject(hdc, GetStockObject(GRAY_BRUSH)); // Piirretään suorakulmio GDI-rajapinnan funktiolla Rectangle(hdc,0,0,100,100); // Asetetaan vanha sivellin takaisin SelectObject(hdc,old); // Vapautetaan piirtopinta EndPaint(hWnd,&ps);

9 GDI:n virhetilanne GDI:ssä rajat paljonko objekteja voidaan käyttää yhtäaikaa. Esimerkissä otettu käyttöön liikaa objekteja. GDI:n virhe voi estää villiintyneen ohjelman lopettamisen (koska lopetusdialogia ei piirretä)

10 Qt Paint System Tarjoaa grafiikkarajapinnan ohjelmoijan käyttöön. Käyttää sisäisessä toteutuksessa kunkin alustan omaa grafiikkarajapintaa (esim. Windows -> GDI). Jakautuu pääasiassa kolmeen luokkaan, joista ohjelmoija käyttää QPainter-luokan tarjoamaa rajapintaa

11 Qt Paint System Mille tahansa QT:n widgetille voidaan ylimääritellä piirto-funktio (paint eventin käsittelijä), jossa voidaan piirtää grafiikkaa ja tekstiä ruudulle QPaintEvent lähetetään widgetille, jonka tulee piirtää itsensä uudelleen. Widgetin piirtofunktiota kutsutaan ennen lapsiwidgettien piirtofunktioita.

12 Qt Paint System class RenderArea : public QWidget { Q_OBJECT protected: void paintevent(qpaintevent *event); } RenderArea::paintEvent(QPaintEvent* event) { QPainter painter(this); painter.setpen(pen); QRect rect(10, 20, 80, 60); painter.drawellipse(rect); painter.restore(); }

13 QPainter Tarjoaa matalan tason piirtofunktio API:n ohjelmoijalle drawline, drawellipse, yms. Sisältää myös piirtoon vaikuttavia asetuksia setpen Koordinaatiston muokkaus, clipping jne

14 Reunaviivojen piirtäminen QPen pen(qt::blue, // Väri 3, // Viivan paksuus Qt::DashDotLine, // Tyyli Qt::RoundCap, // Viivan muoto Qt::RoundJoin); // Viivan muoto QPainter painter(this); painter.setpen(pen); QRect rect(10, 20, 80, 60); painter.drawrect(rect); painter.restore(); QPen

15 Objektin maalaaminen QPainter painter(this); QPen pen(qt::blue, 3, Qt::DashDotLine, Qt::RoundCap, Qt::RoundJoin); painter.setpen(pen); QBrush brush(qt::green, // Väri Qt::SolidPattern); // Tyyli painter.setbrush(brush); QBrush

16 Kuvion piirtäminen QPainter painter(this); QPainterPath path; QVector<QPoint> points; points << QPoint(0,0); points << QPoint(150,150); points << QPoint(200,150); points << QPoint(0,250); points << QPoint(0,0); QPolygonF polygon(points); path.addpolygon(polygon); painter.drawpath(path); QPainterPath

17 Ikkunan päivittämisen problematiikka Milloin päivitetään? Mitä päivitetään? Miten päivitetään?

18 Milloin päivitetään? Kun ohjelma itse haluaa päivitystä Ei kutsuta itse ikkunan päivitysfunktiota, vaan kutsutaan update() tai repaint() Repaint kutsu aiheuttaa widgetille välittömän paintevent kutsun. Repaint kutsu paintevent:n sisällä luo ikuisen silmukan! Käytä repaint:iä vain jos tarvitaan välitön paintevent, esim. animaatiossa.

19 Milloin päivitetään? Update luo paint eventin käsittelyä varten. Useat peräkkäiset update()-kutsut aiheuttavat vain yhden paintevent()-kutsun. Lähes kaikissa tilanteissa parempi kuin repaint, koska sallii Qt:n optimoida kutsuja ja minimoida widgetin välkyntää.

20 Milloin päivitetään? Kun käyttöjärjestelmä lähettää päivityspyynnön ikkunan koko muuttuu ikkuna peittyy toisen ikkunan alle ikkunaa vieritetään

21 Mitä päivitetään? Ikkunan päivittäminen on raskasta Kannattaa päivittää vain se alue, joka todella vaatii päivittämistä (Clipping) Hitaus korostuu erityisesti usein päivitettäessä Esim. Pitääkö ikkuna päivittää aina kun hiirtä liikutetaan ikkunan päällä? Repaint ja Update -funktioista ylikuormitetut funktiot, jotka päivittävät vain parametrina annetun alueen.

22 Miten päivitetään? Pidä varsinainen piirtometodi mahdollisimman tehokkaana Älä suorita piirtometodissa turhaa laskentaa tms. Tuplapuskurointi (Double buffering) Hyödyllinen monimutkaisten piirtooperaatioiden yhteydessä Ikkunan sisältö piirretään ensin muistiin ja vasta tämän jälkeen kerralla näytölle Qt 4.0:sta lähtien QWidget:ssä automaattisesti.

23 Värin määrittäminen QColor QColor () QColor ( int r, int g, int b, int a = 255 ) QColor ( QRgb color ) QColor ( const QString & name ) QColor ( const char * name ) QColor ( const QColor & color ) QColor ( Qt::GlobalColor color ) Qt::GlobalColor Qt::white, Qt::black,Qt::red Color name "#RRGGBB" Alpha Läpinäkyvyysarvo 0-255

24 Värin kysyminen käyttäjältä QColorDialog dlg; dlg.setcurrentcolor(qt::red); if(dlg.exec() == QDialog::Accepted) { QColor c = dlg.selectedcolor(); }

25 Kuvan näyttäminen QPainter painter(this); QString path; QPixmap pixmap(path); painter.drawpixmap(0,0,pix map); QPixmap

26 Tekstin piirtäminen QString text = "OHJ-7400 Graafisen käyttöliittymän ohjelmointi"; QFont font("arial",24); QPainter painter(this); painter.setfont(font); painter.drawtext(100,100,text); QFont

27 Rivitetty teksti QString text = "OHJ-7400 Graafisen käyttöliittymän ohjelmointi"; QFont font("arial",24); painter.setfont(font); QRect r(100,100,300,300); QPainter painter(this); painter.drawrect(r); painter.drawtext(r,text);

28 Tekstin leveyden laskeminen QString text = "OHJ-7400 Graafisen käyttöliittymän ohjelmointi"; QFont font("arial",24); QFontMetrics metrics(font); int widthinpixels = metrics.width(text); QFontMetrics

29 Fontin kysyminen käyttäjältä QFontDialog dlg; if(dlg.exec() == QDialog::Accepted) { QFont f = dlg.selectedfont(); }

30 Järjestelmäfontti (system font) Oletusfontti, jota käytetään mikäli fonttia ei erikseen valita Esim ikkunoiden otsikoissa Fontin koko riippuu esimerkiksi käyttöjärjestelmän asetuksista (large font asetus)

31 Antialiasing painter.setrenderhint(qpainter::antialiasing,false); painter.drawellipse(50,50,100,100); painter.setrenderhint(qpainter::antialiasing,true); painter.drawellipse(250,50,100,100);

32 Tuplapuskurointi + Vähentää ikkunan välkkymistä - Lisää muistinkulutusta Voidaan toteuttaa piirtämällä ruudun sisältö ensin kuvaan ja tämän jälkeen kuva yhdellä kertaa ruudulle.

33 Koordinaatisto Fyysiset koordinaatit fyysinen yksikkö yksi kuvapiste, pikseli pikseli = pienin laitteen erottama kuvan mitta Loogiset koordinaatit loogiset yksiköt esitetty mittayksikköinä

34 Translate Muuttaa origon paikkaa koordinaatistossa painter.drawellipse(50,50,50,50); painter.translate (100,100); painter.drawellipse(50,50,50,50);

35 Scale Asettaa skaalauskertoimen painter.drawellipse(50,50,50,50); painter.scale (2,2); painter.drawellipse(50,50,50,50);

36 Rotate Kääntää koordinaatistoa painter.drawrect(50,50,50,50); painter.translate (100,100); painter.rotate(45); painter.drawrect(50,50,50,50);

37 Clipping Keino rajata alue, jolle piirto halutaan tapahtuvan Alueen ulkopuolelle jäävä osa jätetään piirtämättä painter.setclipping(true); painter.setcliprect(qrect(10, 10, 50, 50)); painter.drawellipse(qrect(10, 10,100, 100));