Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09/fi: Difference between revisions

From KDE TechBase
(Created page with "Kehitys/Oppikurssit/Qt4 Ruby -oppikurssi/Kappale 09")
 
(Updating to match new version of source page)
 
(22 intermediate revisions by one other user not shown)
Line 1: Line 1:
<languages />
<languages />


{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09}}
 


{{TutorialBrowser|
{{TutorialBrowser|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby -oppikurssi]]|
name=With Cannon You Can|
name=Kanuunalla kykenet|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_08|Tutorial 8 - Preparing for Battle]]|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_08|Oppikurssi 8 - Taisteluun valmistautuminen]]|
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_10|Tutorial 10 - Smooth as Silk]]
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_10|Oppikurssi 10 - Sileää kuin silkki]]
}}
}}
== With Cannon You Can ==
== Kanuunalla kykenet ==
[[Image:Qt4_Ruby_Tutorial_Screenshot_9.png|center]]
[[Image:Qt4_Ruby_Tutorial_Screenshot_9.png|center]]
Files:
Tiedostot:
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/lcdrange.rb lcdrange.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/lcdrange.rb lcdrange.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/cannon.rb cannon.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/cannon.rb cannon.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/t9.rb t9.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/t9.rb t9.rb]


=== Overview ===
=== Yleistä ===


In this example we become graphic by drawing a cute little blue cannon. Only cannon.rb differs from the previous chapter.  
Tässä esimerkissä meistä tulee graafikko piirtämällä pienen soman kanuunan. Vain cannon.rb eroaa edellisestä kappaleesta.  


=== Line by Line Walkthrough ===
=== Läpikäynti rivi riviltä ===
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/cannon.rb cannon.rb]'''
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/cannon.rb cannon.rb]'''


Line 28: Line 28:
</syntaxhighlight>
</syntaxhighlight>


We'll now start to use [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter] in earnest. We create a painter that operates on this widget.
Aloitamme nyt käyttämällä [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter] tosissaan. Luomme taidemaalarin, joka toimii tällä käyttöliittymäkomponentilla.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 34: Line 34:
</syntaxhighlight>
</syntaxhighlight>


The edges of what [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter] draws are drawn using the pen. Here we set it to [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen], meaning that there will be no special edge when we draw something.
Reunat, jotka [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter] piirtää on piirretty käyttäen kynää. Tässä asetamme sen arvoon [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen] tarkoittaen, että ei ole mitään erityistä reunaa, kun piirrämme jotain.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 40: Line 40:
</syntaxhighlight>
</syntaxhighlight>


When [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter] fills a rectangle, a circle, or whatever, it fills the shape using its brush. Here we set it to use a solid blue brush. (We could also use a pattern.) The blue brush will go all the way to the edges of the things we draw.
Kun [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter] täyttää nelikulmion, ympyrän, tai mitä hyvänsä, se täyttää muodon käyttäen sivellintään. Tässä asetamme sen käyttämään kiinteää sinistä sivellintä. (Voisimme myös käyttää mallia.) Sininen sivellin menee koko matkan niiden asioiden reunoihin, jotka piirrämme.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 46: Line 46:
</syntaxhighlight>
</syntaxhighlight>


The [http://doc.qt.nokia.com/latest/qpainter.html#translate Qt::Painter::translate()] function translates the coordinate system of the [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter] (i.e., it moves it by an offset). Here we set the (0, 0) point to the bottom-left corner of the widget. The x and y directions remain unchanged, i.e., all the y coordinates inside the widget are now negative. (See [http://doc.qt.nokia.com/latest/coordsys.html The Coordinate System] for more information about Qt's coordinate system.)
Funktio [http://doc.qt.nokia.com/latest/qpainter.html#translate Qt::Painter::translate()] kääntää [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter]-koordinaattijärjestelmän (ts., se siirtää sen siirrososoitteella). Tässä asetamme koordinaatin (0, 0) osoittamaan käyttöliittymäkomponentin vasenta alakulmaa. Suunnat x ja y säilyvät muuttumattomina, ts., kaikki y-koordinaatit käyttöliittymäkomponentin sisällä ovat nyt negatiivisia. (Katso [http://doc.qt.nokia.com/latest/coordsys.html koordinaattijärjestelmästä] lisätietoja Qt:n koordinaattijärjestelmästä.)


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 52: Line 52:
</syntaxhighlight>
</syntaxhighlight>


The [http://doc.qt.nokia.com/latest/qpainter.html#drawPie Qt::Painter::drawPie()] function draws a pie shape inside the specified rectangle using a start angle and an arc length. The angles are specified in sixteenths of a degree. Zero degrees is at the 3 o'clock position. The drawing direction is counter-clockwise. Here we draw a quarter of a circle in the bottom-left corner of the widget. The pie is filled with blue and has no outline.
Funktio [http://doc.qt.nokia.com/latest/qpainter.html#drawPie Qt::Painter::drawPie()] piirtää piirakkamuodon määritellyn nelikulmion sisälle käyttäen aloituskulmaa ja kaaripituutta. Kulmat määritellään asteen 16-osina. Nolla astetta on kello kolmen sijainnissa. Piirtämisen suunta on vastapäivään. Tässä piirrämme ympyrän neljänneksen käyttöliittymäkomponentin vasempaan alakulmaan. Piirakka täytetään sinisellä ja sillä ei ole ääriviivoja.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 58: Line 58:
</syntaxhighlight>
</syntaxhighlight>


The [http://doc.qt.nokia.com/latest/qpainter.html#rotate Qt::Painter::rotate()] function rotates the coordinate system of the [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter] around the origin. The rotation argument is given in degrees (not given in sixteenths of a degree as above) and clockwise. Here we rotate the coordinate system '''<tt>@currentAngle</tt>''' degrees counter-clockwise.
Funktio [http://doc.qt.nokia.com/latest/qpainter.html#rotate Qt::Painter::rotate()] pyörittää [http://doc.qt.nokia.com/latest/qpainter.html Qt::Painter]-koordinaattijärjestelmää alkupisteen ympäri. Kiertoargumentti annetaan asteina (ei aseteen 16-osina, kuten yllä) ja vastapäivään. Tässä pyöritämme koordinaattijärjestelmää '''<tt>@currentAngle</tt>'''-astetta vastapäivään.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 64: Line 64:
</syntaxhighlight>
</syntaxhighlight>


The [http://doc.qt.nokia.com/latest/qpainter.html#drawRect Qt::Painter::drawRect()] function draws the specified rectangle. Here we draw the barrel of the cannon.
Funktio [http://doc.qt.nokia.com/latest/qpainter.html#drawRect Qt::Painter::drawRect()] piirtää määritellyn nelikulmion. Tässä piirrämme tykinputken.


It can often be difficult to envision the resulting drawing when the coordinate system has been transformed (translated, rotated, scaled, or sheared) as above.
Voi olla usein vaikeaa kuvitella mielessään valmis piirros, kun koordinaattijärjestelmää muutetaan (käännetään, pyöritetään, skaalataan ja leikataan) kuten yllä.


In this case the coordinate system is first translated and then rotated. If the rectangle [http://doc.qt.nokia.com/latest/qrect.html Qt::Rect].new(30, -5, 20, 10) had been drawn in the translated coordinate system, it would have looked like this:
Tässä tapauksessa koordinaattijärjestelmää ensin käännetään ja sitten pyöritetään. Jos nelikulmio [http://doc.qt.nokia.com/latest/qrect.html Qt::Rect].new(30, -5, 20, 10) olisi piirretty käännettyyn koordinaattijärjestelmään, se olisi näyttänyt tällaiselta:


[[Image:Qt4_Ruby_Tutorial_Screenshot_9-incorrect.png|center]]
[[Image:Qt4_Ruby_Tutorial_Screenshot_9-incorrect.png|center]]


Note that the rectangle is clipped by the border of the '''<tt>CannonField</tt>''' widget. When we rotate the coordinate system, for instance 60 degrees, the rectangle will be rotated around (0, 0), which is the bottom-left corner because we have translated the coordinate system. The result looks like this:
Huomaa, että nelikulmio on leikattu '''<tt>CannonField</tt>'''-käyttöliittymäkomponentin rajalla. Kun pyöritämme koordinaattijärjestelmää, esimerkiksi 60 astetta, nelikulmio pyörii koordinaatin (0, 0) ympäri, mikä on vasen alakulma, kosa miellä on käännetty koordinaattijärjestelmä. Tulos näyttää tällaiselta:


[[Image:Qt4_Ruby_Tutorial_Screenshot_9-correct.png|center]]
[[Image:Qt4_Ruby_Tutorial_Screenshot_9-correct.png|center]]


=== Running the Application ===
=== Sovelluksen suorittaminen ===


When the slider is operated the angle of the drawn cannon changes accordingly.
Kun liukukytkintä käytetään, tykin kulma muuttuu sen mukaan.


=== Exercises ===
=== Harjoitukset ===
Set a different pen instead of [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen]. Set a patterned brush.
Aseta eri kynä eikä [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen]. Aseta  kuvioitu sivellin.


[[Category:Ruby]]
[[Category:Ruby]]

Latest revision as of 14:24, 18 July 2012

Other languages:


Kanuunalla kykenet
Tutorial Series   Qt4 Ruby -oppikurssi
Previous   Oppikurssi 8 - Taisteluun valmistautuminen
What's Next   Oppikurssi 10 - Sileää kuin silkki
Further Reading   n/a

Kanuunalla kykenet

Tiedostot:

Yleistä

Tässä esimerkissä meistä tulee graafikko piirtämällä pienen soman kanuunan. Vain cannon.rb eroaa edellisestä kappaleesta.

Läpikäynti rivi riviltä

cannon.rb 

def paintEvent(event)
  painter = Qt::Painter.new(self)

Aloitamme nyt käyttämällä Qt::Painter tosissaan. Luomme taidemaalarin, joka toimii tällä käyttöliittymäkomponentilla. 

    painter.setPen(Qt::NoPen)

Reunat, jotka Qt::Painter piirtää on piirretty käyttäen kynää. Tässä asetamme sen arvoon Qt::NoPen tarkoittaen, että ei ole mitään erityistä reunaa, kun piirrämme jotain. 

    painter.setBrush(Qt::Brush.new(Qt::blue))

Kun Qt::Painter täyttää nelikulmion, ympyrän, tai mitä hyvänsä, se täyttää muodon käyttäen sivellintään. Tässä asetamme sen käyttämään kiinteää sinistä sivellintä. (Voisimme myös käyttää mallia.) Sininen sivellin menee koko matkan niiden asioiden reunoihin, jotka piirrämme. 

    painter.translate(0, rect().height())

Funktio Qt::Painter::translate() kääntää Qt::Painter-koordinaattijärjestelmän (ts., se siirtää sen siirrososoitteella). Tässä asetamme koordinaatin (0, 0) osoittamaan käyttöliittymäkomponentin vasenta alakulmaa. Suunnat x ja y säilyvät muuttumattomina, ts., kaikki y-koordinaatit käyttöliittymäkomponentin sisällä ovat nyt negatiivisia. (Katso koordinaattijärjestelmästä lisätietoja Qt:n koordinaattijärjestelmästä.) 

    painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)

Funktio Qt::Painter::drawPie() piirtää piirakkamuodon määritellyn nelikulmion sisälle käyttäen aloituskulmaa ja kaaripituutta. Kulmat määritellään asteen 16-osina. Nolla astetta on kello kolmen sijainnissa. Piirtämisen suunta on vastapäivään. Tässä piirrämme ympyrän neljänneksen käyttöliittymäkomponentin vasempaan alakulmaan. Piirakka täytetään sinisellä ja sillä ei ole ääriviivoja. 

    painter.rotate(-@currentAngle)

Funktio Qt::Painter::rotate() pyörittää Qt::Painter-koordinaattijärjestelmää alkupisteen ympäri. Kiertoargumentti annetaan asteina (ei aseteen 16-osina, kuten yllä) ja vastapäivään. Tässä pyöritämme koordinaattijärjestelmää @currentAngle-astetta vastapäivään. 

    painter.drawRect(Qt::Rect.new(30, -5, 20, 10))

Funktio Qt::Painter::drawRect() piirtää määritellyn nelikulmion. Tässä piirrämme tykinputken.

Voi olla usein vaikeaa kuvitella mielessään valmis piirros, kun koordinaattijärjestelmää muutetaan (käännetään, pyöritetään, skaalataan ja leikataan) kuten yllä.

Tässä tapauksessa koordinaattijärjestelmää ensin käännetään ja sitten pyöritetään. Jos nelikulmio Qt::Rect.new(30, -5, 20, 10) olisi piirretty käännettyyn koordinaattijärjestelmään, se olisi näyttänyt tällaiselta:

Huomaa, että nelikulmio on leikattu CannonField-käyttöliittymäkomponentin rajalla. Kun pyöritämme koordinaattijärjestelmää, esimerkiksi 60 astetta, nelikulmio pyörii koordinaatin (0, 0) ympäri, mikä on vasen alakulma, kosa miellä on käännetty koordinaattijärjestelmä. Tulos näyttää tällaiselta:

Sovelluksen suorittaminen

Kun liukukytkintä käytetään, tykin kulma muuttuu sen mukaan.

Harjoitukset

Aseta eri kynä eikä Qt::NoPen. Aseta kuvioitu sivellin.

Retrieved from "https://techbase.kde.org/index.php?title=Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_09/fi&oldid=73678"