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

From KDE TechBase
(Created page with "Sileää kuin silkki")
(Updating to match new version of source page)
 
(25 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 10}}


{{TutorialBrowser|
{{TutorialBrowser|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby -oppikurssi]]|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby -oppikurssi]]|
name=Sileää kuin silkki|
name=Sileää kuin silkki|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_09|Tutorial 9 - With Cannon You Can]]|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_09|Oppikurssi 9 - Kanuunalla onnistuu]]|
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_11|Tutorial 11 - Giving It a Shot]]
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_11|Oppikurssi 11 - Annetaan sille laukaus]]
}}
}}
== Smooth as Silk ==
== Sileää kuin silkki ==
[[Image:Qt4_Ruby_Tutorial_Screenshot_10.png|center]]
[[Image:Qt4_Ruby_Tutorial_Screenshot_10.png|center]]
Files:
Tiedostot:
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/lcdrange.rb lcdrange.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/lcdrange.rb lcdrange.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]


=== Overview ===
=== Yleiskuva ===


In this example, we add a force control.  
Tässä esimerkissä lisäämme voimaa ohjaimeen.  


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


The '''<tt>CannonField</tt>''' now has a force value in addition to the angle.
Kentällä '''<tt>CannonField</tt>''' on nyt voima-arvo kulman lisäksi.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 30: Line 29:
</syntaxhighlight>
</syntaxhighlight>


The interface to the force follows the same practice as for the angle.
Voiman rajapinta noudattaa samaa käytäntöä kuin kulma.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 44: Line 43:
</syntaxhighlight>
</syntaxhighlight>


The force '''<tt>@currentForce</tt>''' is initialized to zero.
Voima '''<tt>@currentForce</tt>''' on alustettu nollaksi.


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


We have made a slight change in the '''<tt>setAngle()</tt>''' function. It repaints only the portion of the widget that contains the cannon.
Teimme pienen muutoksen '''<tt>setAngle()</tt>'''-funktioon. Se piirtää uudelleen käyttöliittymän osan, joka sisältää kanuunan.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 80: Line 79:
</syntaxhighlight>
</syntaxhighlight>


The implementation of '''<tt>setForce()</tt>''' is quite similar to that of '''<tt>setAngle()</tt>'''. The only difference is that because we don't show the force value, we don't need to repaint the widget.
'''<tt>setForce()</tt>'''-toteutus on aika samanlainen kuin '''<tt>setAngle()</tt>'''. Ainoa erilaisuus on, että koska emme näytä voima-arvoa, käyttöliittymäkomponenttia ei tarvitse piirtää uudelleen.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 97: Line 96:
</syntaxhighlight>
</syntaxhighlight>


We paint as in Chapter 9.
Piirrämme kuin kappaleessa 9.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 107: Line 106:
</syntaxhighlight>
</syntaxhighlight>


The '''<tt>cannonRect()</tt>''' function returns the rectangle enclosing the cannon in widget coordinates. First we create a rectangle with the size 50 x 50 and then move it so its bottom-left corner is equal to the widget's own bottom-left corner.
Funktio '''<tt>cannonRect()</tt>''' palauttaa nelikulmion, joka sisältää kanuunan sisältävän käyttöliittymäkomponentin. Luomme aluksi nelikulmion, jonka koko on 50 x 50 ja siirrämme sen niin, että sen vasen alakulma on sama kuin käyttöliittymäkomponentin vasen alakulma.


The [http://doc.qt.nokia.com/latest/qwidget.html#rect-prop Qt::Widget::rect()] function returns the widget's enclosing rectangle in the widget's own coordinates. The top-left corner of the rectangle is always (0, 0).
Funktio [http://doc.qt.nokia.com/latest/qwidget.html#rect-prop Qt::Widget::rect()] palauttaa käyttöliittymän sisältämän nelikulmion käyttöliittymän omina koordinaatteina. Nelikulmion vasen yläkulma on aina (0, 0).


'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]'''
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]'''


The constructor is mostly the same, but some new bits have been added.
Konstruktori on enimmäkseen sama, mutta joitakin uusia bittejä on lisätty.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 120: Line 119:
</syntaxhighlight>
</syntaxhighlight>


We add a second '''<tt>LCDRange</tt>''', which will be used to set the force.
Lisäämme toisen '''<tt>LCDRange</tt>'''-komponentin, jota käytetään voiman asettamiseen.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 129: Line 128:
</syntaxhighlight>
</syntaxhighlight>


We connect the '''<tt>force</tt>''' widget and the '''<tt>cannonField</tt>''' widget, just like we did for the '''<tt>angle</tt>''' widget.
Yhdistämme käyttöliittymäkomponentin '''<tt>force</tt>''' ja käyttöliittymäkomponentin '''<tt>cannonField</tt>''', aivan kuin teimme käyttöliittymäkomponentille '''<tt>angle</tt>'''.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 143: Line 142:
</syntaxhighlight>
</syntaxhighlight>


In Chapter 9, we put '''<tt>angle</tt>''' in the lower-left cell of the layout. Now we want to have two widgets in that cell, so we make a vertical box, put the vertical box in the grid cell, and put each of '''<tt>angle</tt>''' and '''<tt>range</tt>''' in the vertical box.
Kappaleessa 9 sijoitamme '''<tt>angle</tt>'''-komponentin asettelun vasemman alakulman soluun. Nyt haluamme siihen soluun kaksi käyttöliittymäkomponenttial, joten teemme pystysuoran ruudun, laitamme pystysuoran ruudun rasterinsoluunl, ja laitamme sekä '''<tt>angle</tt>''' että '''<tt>range</tt>''' pystysuoraan ruutuun.


<syntaxhighlight lang="ruby">
<syntaxhighlight lang="ruby">
Line 149: Line 148:
</syntaxhighlight>
</syntaxhighlight>


We initialize the force value to 25.
Alustamme voima-arvoksi 25.


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


We now have a force control.
Meillä on nyt voimaohjaus.


=== Exercises ===
=== Harjoitukset ===
Make the size of the cannon barrel be dependent on the force.
Tee kanuuna piipun koko riippuvaiseksi voimasta.


Put the cannon in the bottom-right corner.
Laita kanuuna oikeaan alakulmaan.


Try adding a better keyboard interface. For example, make + and - increase and decrease the force and enter shoot. If you're bothered by the way the '''<tt>Left</tt>''' and '''<tt>Right</tt>''' keys work, change that too. [Hint: Reimplement [http://doc.qt.nokia.com/latest/qwidget.html#keyPressEvent Qt::Widget::keyPressEvent()].]
Yritä lisätä parempi näppäimistörajapinta. Esimerkiksi, tee + ja - kasvattamaan ja pienennättämään voimaa ja laukaisemaan kanuunan. Jos olet vaivautunut tavasta, jolla näppäimet '''<tt>Left</tt>''' ja '''<tt>Right</tt>''' toimivat, muuta sitä myös. [Vihje: Toteuta uudelleen [http://doc.qt.nokia.com/latest/qwidget.html#keyPressEvent Qt::Widget::keyPressEvent()].]


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

Latest revision as of 14:24, 18 July 2012

Other languages:


Sileää kuin silkki
Tutorial Series   Qt4 Ruby -oppikurssi
Previous   Oppikurssi 9 - Kanuunalla onnistuu
What's Next   Oppikurssi 11 - Annetaan sille laukaus
Further Reading   n/a

Sileää kuin silkki

Tiedostot:

Yleiskuva

Tässä esimerkissä lisäämme voimaa ohjaimeen.

Läpikäynti rivi riviltä

cannon.rb

Kentällä CannonField on nyt voima-arvo kulman lisäksi.

signals 'angleChanged(int)', 'forceChanged(int)'
slots 'setAngle(int)', 'setForce(int)'

Voiman rajapinta noudattaa samaa käytäntöä kuin kulma.

def initialize(parent = nil)
  super()

  @currentAngle = 45
  @currentForce = 0

  setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))
  setAutoFillBackground(true)
end

Voima @currentForce on alustettu nollaksi.

def setAngle(angle)
  if angle < 5
    angle = 5
  elsif angle > 70
    angle = 70
  end

  if @currentAngle == angle
    return
  end

  @currentAngle = angle
  update(cannonRect())
  emit angleChanged(@currentAngle)
end

Teimme pienen muutoksen setAngle()-funktioon. Se piirtää uudelleen käyttöliittymän osan, joka sisältää kanuunan.

def setForce(force)
  if force < 0
    force = 0
  end
  if @currentForce == force
    return
  end

  @currentForce = force
  emit forceChanged(@currentForce)
end

setForce()-toteutus on aika samanlainen kuin setAngle(). Ainoa erilaisuus on, että koska emme näytä voima-arvoa, käyttöliittymäkomponenttia ei tarvitse piirtää uudelleen.

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

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

  painter.translate(0, height())
  painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)
  painter.rotate(-@currentAngle)
  painter.drawRect(Qt::Rect.new(30, -5, 20, 10))
  painter.end()
end

Piirrämme kuin kappaleessa 9.

def cannonRect()
  result = Qt::Rect.new(0, 0, 50, 50)
  result.moveBottomLeft(rect().bottomLeft())
  return result
end

Funktio cannonRect() palauttaa nelikulmion, joka sisältää kanuunan sisältävän käyttöliittymäkomponentin. Luomme aluksi nelikulmion, jonka koko on 50 x 50 ja siirrämme sen niin, että sen vasen alakulma on sama kuin käyttöliittymäkomponentin vasen alakulma.

Funktio Qt::Widget::rect() palauttaa käyttöliittymän sisältämän nelikulmion käyttöliittymän omina koordinaatteina. Nelikulmion vasen yläkulma on aina (0, 0).

t10.rb

Konstruktori on enimmäkseen sama, mutta joitakin uusia bittejä on lisätty.

force = LCDRange.new()
force.setRange(10, 50)

Lisäämme toisen LCDRange-komponentin, jota käytetään voiman asettamiseen.

connect(force, SIGNAL('valueChanged(int)'),
         cannonField, SLOT('setForce(int)'))
connect(cannonField, SIGNAL('forceChanged(int)'),
         force, SLOT('setValue(int)'))

Yhdistämme käyttöliittymäkomponentin force ja käyttöliittymäkomponentin cannonField, aivan kuin teimme käyttöliittymäkomponentille angle.

leftLayout = Qt::VBoxLayout.new()
leftLayout.addWidget(angle)
leftLayout.addWidget(force)

gridLayout = Qt::GridLayout.new()
gridLayout.addWidget(quit, 0, 0)
gridLayout.addLayout(leftLayout, 1, 0)
gridLayout.addWidget(cannonField, 1, 1, 2, 1)
gridLayout.setColumnStretch(1, 10)

Kappaleessa 9 sijoitamme angle-komponentin asettelun vasemman alakulman soluun. Nyt haluamme siihen soluun kaksi käyttöliittymäkomponenttial, joten teemme pystysuoran ruudun, laitamme pystysuoran ruudun rasterinsoluunl, ja laitamme sekä angle että range pystysuoraan ruutuun.

force.setValue(25)

Alustamme voima-arvoksi 25.

Sovelluksen suorittaminen

Meillä on nyt voimaohjaus.

Harjoitukset

Tee kanuuna piipun koko riippuvaiseksi voimasta.

Laita kanuuna oikeaan alakulmaan.

Yritä lisätä parempi näppäimistörajapinta. Esimerkiksi, tee + ja - kasvattamaan ja pienennättämään voimaa ja laukaisemaan kanuunan. Jos olet vaivautunut tavasta, jolla näppäimet Left ja Right toimivat, muuta sitä myös. [Vihje: Toteuta uudelleen Qt::Widget::keyPressEvent().]