Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09 - Revision history

AnneW at 14:21, 18 July 2012

2012-07-18T14:21:04Z

AnneW: Marked this version for translation

2011-07-02T14:54:54Z

Marked this version for translation

Aspotashev: add translate tags

2011-07-01T23:36:08Z

add translate tags

Neverendingo: Text replace - "" to ""

2011-06-29T20:55:44Z

Text replace - "</code>" to "</syntaxhighlight>"

Neverendingo: Text replace - "`" to ""`


2011-06-29T20:43:12Z
Text replace - "<code ruby>" to "<syntaxhighlight lang="ruby">"

				
				
				
				
			
			← Older revision
			Revision as of 20:43, 29 June 2011
			
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>



Alisha at 03:02, 13 January 2010
2010-01-13T03:02:27Z


				
				
				
				
			
			← Older revision
			Revision as of 03:02, 13 January 2010
			
Line 78:
Line 78:
    
  === 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.
    
  === Exercises ===   === Exercises ===
  + Set a different pen instead of [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen]. Set a patterned brush.
    
− Set a different pen instead of [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen]. Set a patterned brush. + [[Category:Ruby]]



Alisha at 16:48, 31 December 2009
2009-12-31T16:48:01Z


				
				
				
				
			
			← Older revision
			Revision as of 16:48, 31 December 2009
			
Line 47:
Line 47:
  </code>   </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 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>   <code ruby>



Alisha at 00:58, 31 December 2009
2009-12-31T00:58:17Z


				
				
				
				
			
			← Older revision
			Revision as of 00:58, 31 December 2009
			
Line 19:
Line 19:
    
  === Overview ===   === Overview ===
− n 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 ===



Alisha at 00:55, 31 December 2009
2009-12-31T00:55:04Z


				
				
				
				
			
			← Older revision
			Revision as of 00:55, 31 December 2009
			
Line 29:
Line 29:
  </code>   </code>
    
− We'll now start to use 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>   <code ruby>
Line 35:
Line 35:
  </code>   </code>
    
− 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. + 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>   <code ruby>
Line 41:
Line 41:
  </code>   </code>
    
− 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. + 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>   <code ruby>
Line 47:
Line 47:
  </code>   </code>
    
− 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.) + 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 The Coordinate System for more information about Qt's coordinate system.)
    
  <code ruby>   <code ruby>
Line 53:
Line 53:
  </code>   </code>
    
− 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. + 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>   <code ruby>
Line 59:
Line 59:
  </code>   </code>
    
− 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. + 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>   <code ruby>
Line 65:
Line 65:
  </code>   </code>
    
− The 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 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:
    
  [[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 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: + 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]]   [[Image:Qt4_Ruby_Tutorial_Screenshot_9-correct.png|center]]
Line 83:
Line 83:
  === Exercises ===   === Exercises ===
    
− Set a different pen instead of Qt::NoPen. Set a patterned brush. + Set a different pen instead of [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen]. Set a patterned brush.



Alisha: Created page with '{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09}}  {{TutorialBrowser|  series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutori...'
2009-12-31T00:37:55Z
Created page with '{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09}}  {{TutorialBrowser|  series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutori...'
New page
{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09}}



{{TutorialBrowser|



series=[[Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|



name=With Cannon You Can|



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

}}

== With Cannon You Can ==

[[Image:Qt4_Ruby_Tutorial_Screenshot_9.png|center]]

Files:

* [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/t9.rb t9.rb]



=== Overview ===

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



=== Line by Line Walkthrough ===

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



<code ruby>

def paintEvent(event)

  painter = Qt::Painter.new(self)

</code>



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



<code ruby>

    painter.setPen(Qt::NoPen)

</code>



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.



<code ruby>

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

</code>



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.



<code ruby>

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

</code>



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



<code ruby>

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

</code>



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.



<code ruby>

    painter.rotate(-@currentAngle)

</code>



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.



<code ruby>

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

</code>



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:



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



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:



[[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 Qt::NoPen. Set a patterned brush.

@@ Line 1: / Line 1: @@
 <languages />
-{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09}}
 {{<translate><!--T:1-->

@@ Line 3: / Line 3: @@
 {{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 09}}
-{{<translate>TutorialBrowser</translate>|
+{{<translate><!--T:1-->
-series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate>Qt4 Ruby Tutorial</translate>]]|
+TutorialBrowser</translate>|
-name=<translate>With Cannon You Can</translate>|
+series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|<translate><!--T:2-->
-pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_08|<translate>Tutorial 8 - Preparing for Battle</translate>]]|
+Qt4 Ruby Tutorial</translate>]]|
-next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_10|<translate>Tutorial 10 - Smooth as Silk</translate>]]
+name=<translate><!--T:3-->
 }}
 <translate>
-== With Cannon You Can ==
+== With Cannon You Can == <!--T:6-->
 </translate>
 <translate>
 [[Image:Qt4_Ruby_Tutorial_Screenshot_9.png|center]]
 </translate>
 <translate>
 Files:
 </translate>
@@ Line 23: / Line 30: @@
 <translate>
-=== Overview ===
+=== Overview === <!--T:9-->
 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 === <!--T:11-->
 </translate>
 '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t9/cannon.rb cannon.rb]'''
@@ Line 37: / Line 45: @@
 <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.
 </translate>
@@ Line 45: / Line 54: @@
 <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.
 </translate>
@@ Line 53: / Line 63: @@
 <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.
 </translate>
@@ Line 61: / Line 72: @@
 <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.)
 </translate>
@@ Line 69: / Line 81: @@
 <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.
 </translate>
@@ Line 77: / Line 90: @@
 <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.
 </translate>
@@ Line 85: / Line 99: @@
 <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.
 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]]
 </translate>
 <translate>
-=== Running the Application ===
+=== Running the Application === <!--T:24-->
 When the slider is operated the angle of the drawn cannon changes accordingly.
-=== Exercises ===
+=== Exercises === <!--T:26-->
 Set a different pen instead of [http://doc.qt.nokia.com/latest/qt.html#PenStyle-enum Qt::NoPen]. Set a patterned brush.
 [[Category:Ruby]]
 </translate>