Difference between revisions of "Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09"

Jump to: navigation, search
m (Text replace - "</code>" to "</syntaxhighlight>")
(add translate tags)
Line 1: Line 1:
 +
<languages />
 +
 
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09}}
 
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09}}
  
{{TutorialBrowser|
+
{{<translate>TutorialBrowser</translate>|
 
+
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate>Qt4 Ruby Tutorial</translate>]]|
series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|
+
name=<translate>With Cannon You Can</translate>|
 
+
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_08|<translate>Tutorial 8 - Preparing for Battle</translate>]]|
name=With Cannon You Can|
+
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_10|<translate>Tutorial 10 - Smooth as Silk</translate>]]
 
+
pre=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_08|Tutorial 8 - Preparing for Battle]]|
+
 
+
next=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_10|Tutorial 10 - Smooth as Silk]]
+
 
}}
 
}}
 +
<translate>
 
== With Cannon You Can ==
 
== With Cannon You Can ==
 +
</translate>
 +
<translate>
 
[[Image:Qt4_Ruby_Tutorial_Screenshot_9.png|center]]
 
[[Image:Qt4_Ruby_Tutorial_Screenshot_9.png|center]]
 +
</translate>
 +
<translate>
 
Files:
 
Files:
 +
</translate>
 
* [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]
  
 +
<translate>
 
=== Overview ===
 
=== Overview ===
 +
 
In this example we become graphic by drawing a cute little blue cannon. Only cannon.rb differs from the previous chapter.  
 
In this example we become graphic by drawing a cute little blue cannon. Only cannon.rb differs from the previous chapter.  
  
 
=== Line by Line Walkthrough ===
 
=== Line by Line Walkthrough ===
 +
</translate>
 
'''[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 29: Line 36:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<translate>
 
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.
 
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.
 +
</translate>
  
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
Line 35: Line 44:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<translate>
 
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.
 
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.
 +
</translate>
  
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
Line 41: Line 52:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<translate>
 
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.
 
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.
 +
</translate>
  
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
Line 47: Line 60:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<translate>
 
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.)
 
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.)
 +
</translate>
  
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
Line 53: Line 68:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<translate>
 
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.
 
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.
 +
</translate>
  
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
Line 59: Line 76:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<translate>
 
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.
 
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.
 +
</translate>
  
 
<syntaxhighlight lang="ruby">
 
<syntaxhighlight lang="ruby">
Line 65: Line 84:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<translate>
 
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.
 
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.
  
It can often be difficult to envision the resulting drawing when the coordinate system has been transformed ( translated, rotated, scaled, or sheared) as above.
+
It can often be difficult to envision the resulting drawing when the coordinate system has been transformed (translated, rotated, scaled, or sheared) as above.
  
 
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:
 
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:
Line 76: Line 96:
  
 
[[Image:Qt4_Ruby_Tutorial_Screenshot_9-correct.png|center]]
 
[[Image:Qt4_Ruby_Tutorial_Screenshot_9-correct.png|center]]
 +
</translate>
  
 +
<translate>
 
=== Running the Application ===
 
=== Running the Application ===
 +
 
When the slider is operated the angle of the drawn cannon changes accordingly.
 
When the slider is operated the angle of the drawn cannon changes accordingly.
  
Line 84: Line 107:
  
 
[[Category:Ruby]]
 
[[Category:Ruby]]
 +
</translate>

Revision as of 00:36, 2 July 2011

Other languages:English 100% • ‎Finnish 100% • ‎Russian 50%


Contents

Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09


With Cannon You Can
Tutorial Series   Qt4 Ruby Tutorial
Previous   Tutorial 8 - Preparing for Battle
What's Next   Tutorial 10 - Smooth as Silk
Further Reading   n/a

With Cannon You Can

Qt4 Ruby Tutorial Screenshot 9.png

Files:

Overview

In this example we become graphic by drawing a cute little blue cannon. Only cannon.rb differs from the previous chapter.

Line by Line Walkthrough

cannon.rb

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

We'll now start to use Qt::Painter in earnest. We create a painter that operates on this widget.

    painter.setPen(Qt::NoPen)

The edges of what Qt::Painter draws are drawn using the pen. Here we set it to Qt::NoPen, meaning that there will be no special edge when we draw something.

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

When 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.

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

The Qt::Painter::translate() function translates the coordinate system of the 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 The Coordinate System for more information about Qt's coordinate system.)

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

The 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.

    painter.rotate(-@currentAngle)

The Qt::Painter::rotate() function rotates the coordinate system of the 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 @currentAngle degrees counter-clockwise.

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

The Qt::Painter::drawRect() function draws the specified rectangle. Here we draw the barrel of the cannon.

It can often be difficult to envision the resulting drawing when the coordinate system has been transformed (translated, rotated, scaled, or sheared) as above.

In this case the coordinate system is first translated and then rotated. If the rectangle Qt::Rect.new(30, -5, 20, 10) had been drawn in the translated coordinate system, it would have looked like this:

Qt4 Ruby Tutorial Screenshot 9-incorrect.png

Note that the rectangle is clipped by the border of the CannonField 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:

Qt4 Ruby Tutorial Screenshot 9-correct.png

Running the Application

When the slider is operated the angle of the drawn cannon changes accordingly.

Exercises

Set a different pen instead of Qt::NoPen. Set a patterned brush.


KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal