| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|---|
| 2 | <!-- /home/espenr/tmp/qt-3.3.8-espenr-2499/qt-x11-free-3.3.8/doc/tutorial.doc:1153 -->
|
|---|
| 3 | <html>
|
|---|
| 4 | <head>
|
|---|
| 5 | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|---|
| 6 | <title>Qt Tutorial - Chapter 9: With Cannon You Can</title>
|
|---|
| 7 | <style type="text/css"><!--
|
|---|
| 8 | fn { margin-left: 1cm; text-indent: -1cm; }
|
|---|
| 9 | a:link { color: #004faf; text-decoration: none }
|
|---|
| 10 | a:visited { color: #672967; text-decoration: none }
|
|---|
| 11 | body { background: #ffffff; color: black; }
|
|---|
| 12 | --></style>
|
|---|
| 13 | </head>
|
|---|
| 14 | <body>
|
|---|
| 15 |
|
|---|
| 16 | <table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|---|
| 17 | <tr bgcolor="#E5E5E5">
|
|---|
| 18 | <td valign=center>
|
|---|
| 19 | <a href="index.html">
|
|---|
| 20 | <font color="#004faf">Home</font></a>
|
|---|
| 21 | | <a href="classes.html">
|
|---|
| 22 | <font color="#004faf">All Classes</font></a>
|
|---|
| 23 | | <a href="mainclasses.html">
|
|---|
| 24 | <font color="#004faf">Main Classes</font></a>
|
|---|
| 25 | | <a href="annotated.html">
|
|---|
| 26 | <font color="#004faf">Annotated</font></a>
|
|---|
| 27 | | <a href="groups.html">
|
|---|
| 28 | <font color="#004faf">Grouped Classes</font></a>
|
|---|
| 29 | | <a href="functions.html">
|
|---|
| 30 | <font color="#004faf">Functions</font></a>
|
|---|
| 31 | </td>
|
|---|
| 32 | <td align="right" valign="center"><img src="logo32.png" align="right" width="64" height="32" border="0"></td></tr></table><h1 align=center>Qt Tutorial - Chapter 9: With Cannon You Can</h1>
|
|---|
| 33 |
|
|---|
| 34 |
|
|---|
| 35 | <p> <center><img src="t9.png" alt="Screenshot of tutorial nine"></center>
|
|---|
| 36 | <p> In this example we become graphic by drawing a cute little blue
|
|---|
| 37 | cannon. Only cannon.cpp differs from the previous chapter.
|
|---|
| 38 | <p> <ul>
|
|---|
| 39 | <li> <a href="t9-lcdrange-h.html">t9/lcdrange.h</a> contains the LCDRange
|
|---|
| 40 | class definition.
|
|---|
| 41 | <li> <a href="t9-lcdrange-cpp.html">t9/lcdrange.cpp</a> contains the LCDRange
|
|---|
| 42 | implementation.
|
|---|
| 43 | <li> <a href="t9-cannon-h.html">t9/cannon.h</a> contains the CannonField class
|
|---|
| 44 | definition.
|
|---|
| 45 | <li> <a href="t9-cannon-cpp.html">t9/cannon.cpp</a> contains the CannonField
|
|---|
| 46 | implementation.
|
|---|
| 47 | <li> <a href="t9-main-cpp.html">t9/main.cpp</a> contains MyWidget and main.
|
|---|
| 48 | </ul>
|
|---|
| 49 | <p> <h2> Line-by-line Walkthrough
|
|---|
| 50 | </h2>
|
|---|
| 51 | <a name="1"></a><p> <h3> <a href="t9-cannon-cpp.html">t9/cannon.cpp</a>
|
|---|
| 52 | </h3>
|
|---|
| 53 | <a name="1-1"></a><p>
|
|---|
| 54 |
|
|---|
| 55 | <p> <pre> <a name="x2346"></a>void CannonField::<a href="qwidget.html#paintEvent">paintEvent</a>( <a href="qpaintevent.html">QPaintEvent</a> * )
|
|---|
| 56 | {
|
|---|
| 57 | <a href="qpainter.html">QPainter</a> p( this );
|
|---|
| 58 | </pre>
|
|---|
| 59 | <p> We'll now start to use <a href="qpainter.html">QPainter</a> in earnest. We create a painter that
|
|---|
| 60 | operates on this widget.
|
|---|
| 61 | <p> <pre> <a name="x2343"></a> p.<a href="qpainter.html#setBrush">setBrush</a>( blue );
|
|---|
| 62 | </pre>
|
|---|
| 63 | <p> When QPainter fills a rectangle, a circle, or whatever, it fills the
|
|---|
| 64 | shape using its brush. Here we set it to use a blue brush. (We
|
|---|
| 65 | could also use a pattern.)
|
|---|
| 66 | <p> <pre> <a name="x2344"></a> p.<a href="qpainter.html#setPen">setPen</a>( NoPen );
|
|---|
| 67 | </pre>
|
|---|
| 68 | <p> And the edges of what QPainter draws are drawn using the pen. Here we
|
|---|
| 69 | set it to NoPen, meaning that there will be no special edge when we
|
|---|
| 70 | draw something; the blue brush will go all the way to the edges of
|
|---|
| 71 | the things we draw.
|
|---|
| 72 | <p> <pre> <a name="x2345"></a> p.<a href="qpainter.html#translate">translate</a>( 0, rect().bottom() );
|
|---|
| 73 | </pre>
|
|---|
| 74 | <p> The <a href="qpainter.html#translate">QPainter::translate</a>() function translates the coordinate
|
|---|
| 75 | system of the QPainter; i.e., it moves it by an offset. Here we set
|
|---|
| 76 | the (0, 0) point to the bottom-left corner of the widget. The x and
|
|---|
| 77 | y directions remain unchanged, i.e., all the y coordinates inside the
|
|---|
| 78 | widget are now negative (see <a href="coordsys.html">The Coordinate
|
|---|
| 79 | System</a> for more information about Qt's coordinate system).
|
|---|
| 80 | <p> <pre> <a name="x2340"></a> p.<a href="qpainter.html#drawPie">drawPie</a>( QRect(-35, -35, 70, 70), 0, 90*16 );
|
|---|
| 81 | </pre>
|
|---|
| 82 | <p> The drawPie() function draws a pie shape inside the specified
|
|---|
| 83 | rectangle using a start angle and an arc length. The angles are
|
|---|
| 84 | specified in 1/16th of a degree. Zero degrees is at the 3 o'clock
|
|---|
| 85 | position. The drawing direction is counter-clockwise. Here we draw a
|
|---|
| 86 | quarter of a circle in the bottom-left corner of the widget. The pie
|
|---|
| 87 | is filled with blue and has no outline.
|
|---|
| 88 | <p> <pre> <a name="x2342"></a> p.<a href="qpainter.html#rotate">rotate</a>( -ang );
|
|---|
| 89 | </pre>
|
|---|
| 90 | <p> The <a href="qpainter.html#rotate">QPainter::rotate</a>() function rotates the coordinate system of the
|
|---|
| 91 | <a href="qpainter.html">QPainter</a> around the origin. The rotation argument is a <tt>float</tt> given
|
|---|
| 92 | in degrees (not given in 1/16th of a degree as above) and clockwise.
|
|---|
| 93 | Here we rotate the coordinate system <tt>ang</tt> degrees counter-clockwise.
|
|---|
| 94 | <p> <pre> <a name="x2341"></a> p.<a href="qpainter.html#drawRect">drawRect</a>( QRect(33, -4, 15, 8) );
|
|---|
| 95 | </pre>
|
|---|
| 96 | <p> The <a href="qpainter.html#drawRect">QPainter::drawRect</a>() function draws the specified rectangle. Here
|
|---|
| 97 | we draw the barrel of the cannon.
|
|---|
| 98 | <p> It can often be difficult to envision the resulting drawing when the
|
|---|
| 99 | coordinate system has been transformed (translated, rotated, scaled, or
|
|---|
| 100 | sheared) as above.
|
|---|
| 101 | <p> In this case the coordinate system is first translated and then rotated.
|
|---|
| 102 | If the rectangle <a href="qrect.html">QRect</a>(33, -4, 15, 8) had been drawn in the translated
|
|---|
| 103 | coordinate system, it would have looked like this:
|
|---|
| 104 | <p> <center><img src="t9_1.png" alt="The cannon translated but not rotated"></center>
|
|---|
| 105 | <p> Note that the rectangle is clipped by the border of the CannonField
|
|---|
| 106 | widget. When we rotate the coordinate system, for instance 60
|
|---|
| 107 | degrees, the rectangle will be rotated around (0, 0), which is the
|
|---|
| 108 | bottom-left corner because we have translated the coordinate system.
|
|---|
| 109 | The result looks like this:
|
|---|
| 110 | <p> <center><img src="t9_2.png" alt="The cannon translated and rotated"></center>
|
|---|
| 111 | <p> We're done, except that we haven't explained why Windows didn't dither
|
|---|
| 112 | this time.
|
|---|
| 113 | <p>
|
|---|
| 114 |
|
|---|
| 115 | <pre> int main( int argc, char **argv )
|
|---|
| 116 | {
|
|---|
| 117 | <a name="x2347"></a> QApplication::<a href="qapplication.html#setColorSpec">setColorSpec</a>( QApplication::CustomColor );
|
|---|
| 118 | <a href="qapplication.html">QApplication</a> a( argc, argv );
|
|---|
| 119 | </pre>
|
|---|
| 120 | <p> We tell Qt that we want a different color-allocation strategy for this
|
|---|
| 121 | program. There is no single correct color-allocation strategy. Because
|
|---|
| 122 | this program uses an unusual yellow but not many colors, <tt>CustomColor</tt> is best. There are several other allocation strategies; you can read about them in the <a href="qapplication.html#setColorSpec">QApplication::setColorSpec</a>()
|
|---|
| 123 | documentation.
|
|---|
| 124 | <p> Mostly you can ignore this, since the default is good. Occasionally
|
|---|
| 125 | some applications with unusual color use look bad; changing the
|
|---|
| 126 | allocation strategy often helps then.
|
|---|
| 127 | <p> <h2> Behavior
|
|---|
| 128 | </h2>
|
|---|
| 129 | <a name="2"></a><p> When the slider is operated the angle of the drawn cannon changes
|
|---|
| 130 | accordingly.
|
|---|
| 131 | <p> The Q on the Quit button is now underlined, and Alt+Q does what you
|
|---|
| 132 | think it does. If you do not know why, you didn't do the exercises in
|
|---|
| 133 | Chapter 8.
|
|---|
| 134 | <p> You may notice that the cannon flickers annoyingly, especially on a
|
|---|
| 135 | slow machine. We'll fix this in the next chapter.
|
|---|
| 136 | <p> (See <a href="tutorial1-07.html#compiling">Compiling</a> for how to create a
|
|---|
| 137 | makefile and build the application.)
|
|---|
| 138 | <p> <h2> Exercises
|
|---|
| 139 | </h2>
|
|---|
| 140 | <a name="3"></a><p> Set a different pen instead of NoPen. Set a patterned brush.
|
|---|
| 141 | <p> Try "Q&uit" or "Qu&it" as button text instead of "&Quit". What
|
|---|
| 142 | happens?
|
|---|
| 143 | <p> You're now ready for <a href="tutorial1-10.html">Chapter 10.</a>
|
|---|
| 144 | <p> [<a href="tutorial1-08.html">Previous tutorial</a>]
|
|---|
| 145 | [<a href="tutorial1-10.html">Next tutorial</a>]
|
|---|
| 146 | [<a href="tutorial.html">Main tutorial page</a>]
|
|---|
| 147 | <p>
|
|---|
| 148 | <!-- eof -->
|
|---|
| 149 | <p><address><hr><div align=center>
|
|---|
| 150 | <table width=100% cellspacing=0 border=0><tr>
|
|---|
| 151 | <td>Copyright © 2007
|
|---|
| 152 | <a href="troll.html">Trolltech</a><td align=center><a href="trademarks.html">Trademarks</a>
|
|---|
| 153 | <td align=right><div align=right>Qt 3.3.8</div>
|
|---|
| 154 | </table></div></address></body>
|
|---|
| 155 | </html>
|
|---|
