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

Jump to: navigation, search
m (Text replace - "<code ruby>" to "<syntaxhighlight lang="ruby">")
Line 24: Line 24:
 
'''[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]'''
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
def paintEvent(event)
 
def paintEvent(event)
 
   painter = Qt::Painter.new(self)
 
   painter = Qt::Painter.new(self)
Line 31: Line 31:
 
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.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     painter.setPen(Qt::NoPen)
 
     painter.setPen(Qt::NoPen)
 
</code>
 
</code>
Line 37: Line 37:
 
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.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     painter.setBrush(Qt::Brush.new(Qt::blue))
 
     painter.setBrush(Qt::Brush.new(Qt::blue))
 
</code>
 
</code>
Line 43: Line 43:
 
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.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     painter.translate(0, rect().height())
 
     painter.translate(0, rect().height())
 
</code>
 
</code>
Line 49: Line 49:
 
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.)
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)
 
     painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)
 
</code>
 
</code>
Line 55: Line 55:
 
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.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     painter.rotate(-@currentAngle)
 
     painter.rotate(-@currentAngle)
 
</code>
 
</code>
Line 61: Line 61:
 
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.
  
<code ruby>
+
<syntaxhighlight lang="ruby">
 
     painter.drawRect(Qt::Rect.new(30, -5, 20, 10))
 
     painter.drawRect(Qt::Rect.new(30, -5, 20, 10))
 
</code>
 
</code>

Revision as of 21:43, 29 June 2011


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)
</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]]

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