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

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)
</code>
 
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.
 
<syntaxhighlight lang="ruby">
    painter.setPen(Qt::NoPen)
</code>
 
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.
 
<syntaxhighlight lang="ruby">
    painter.setBrush(Qt::Brush.new(Qt::blue))
</code>
 
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.
 
<syntaxhighlight lang="ruby">
    painter.translate(0, rect().height())
</code>
 
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.)
 
<syntaxhighlight lang="ruby">
    painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)
</code>
 
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.
 
<syntaxhighlight lang="ruby">
    painter.rotate(-@currentAngle)
</code>
 
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.
 
<syntaxhighlight lang="ruby">
    painter.drawRect(Qt::Rect.new(30, -5, 20, 10))
</code>
 
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.
 
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:
 
[[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:
 
[[Image:Qt4_Ruby_Tutorial_Screenshot_9-correct.png|center]]
 
=== Running the Application ===
When the slider is operated the angle of the drawn cannon changes accordingly.
 
=== Exercises ===
Set a different pen instead of [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen]. Set a patterned brush.
 
[[Category:Ruby]]

Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09

Contents

Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09

With Cannon You Can

Overview

Line by Line Walkthrough