diff options
Diffstat (limited to 'doc/html/tutorial1-09.html')
| -rw-r--r-- | doc/html/tutorial1-09.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/doc/html/tutorial1-09.html b/doc/html/tutorial1-09.html new file mode 100644 index 0000000..6492db2 --- /dev/null +++ b/doc/html/tutorial1-09.html @@ -0,0 +1,155 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> +<!-- /home/espenr/tmp/qt-3.3.8-espenr-2499/qt-x11-free-3.3.8/doc/tutorial.doc:1153 --> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> +<title>Qt Tutorial - Chapter 9: With Cannon You Can</title> +<style type="text/css"><!-- +fn { margin-left: 1cm; text-indent: -1cm; } +a:link { color: #004faf; text-decoration: none } +a:visited { color: #672967; text-decoration: none } +body { background: #ffffff; color: black; } +--></style> +</head> +<body> + +<table border="0" cellpadding="0" cellspacing="0" width="100%"> +<tr bgcolor="#E5E5E5"> +<td valign=center> + <a href="index.html"> +<font color="#004faf">Home</font></a> + | <a href="classes.html"> +<font color="#004faf">All Classes</font></a> + | <a href="mainclasses.html"> +<font color="#004faf">Main Classes</font></a> + | <a href="annotated.html"> +<font color="#004faf">Annotated</font></a> + | <a href="groups.html"> +<font color="#004faf">Grouped Classes</font></a> + | <a href="functions.html"> +<font color="#004faf">Functions</font></a> +</td> +<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> + + +<p> <center><img src="t9.png" alt="Screenshot of tutorial nine"></center> +<p> In this example we become graphic by drawing a cute little blue +cannon. Only cannon.cpp differs from the previous chapter. +<p> <ul> +<li> <a href="t9-lcdrange-h.html">t9/lcdrange.h</a> contains the LCDRange +class definition. +<li> <a href="t9-lcdrange-cpp.html">t9/lcdrange.cpp</a> contains the LCDRange +implementation. +<li> <a href="t9-cannon-h.html">t9/cannon.h</a> contains the CannonField class +definition. +<li> <a href="t9-cannon-cpp.html">t9/cannon.cpp</a> contains the CannonField +implementation. +<li> <a href="t9-main-cpp.html">t9/main.cpp</a> contains MyWidget and main. +</ul> +<p> <h2> Line-by-line Walkthrough +</h2> +<a name="1"></a><p> <h3> <a href="t9-cannon-cpp.html">t9/cannon.cpp</a> +</h3> +<a name="1-1"></a><p> + +<p> <pre> <a name="x2346"></a>void CannonField::<a href="qwidget.html#paintEvent">paintEvent</a>( <a href="qpaintevent.html">QPaintEvent</a> * ) + { + <a href="qpainter.html">QPainter</a> p( this ); +</pre> +<p> We'll now start to use <a href="qpainter.html">QPainter</a> in earnest. We create a painter that +operates on this widget. +<p> <pre> <a name="x2343"></a> p.<a href="qpainter.html#setBrush">setBrush</a>( blue ); +</pre> +<p> When QPainter fills a rectangle, a circle, or whatever, it fills the +shape using its brush. Here we set it to use a blue brush. (We +could also use a pattern.) +<p> <pre> <a name="x2344"></a> p.<a href="qpainter.html#setPen">setPen</a>( NoPen ); +</pre> +<p> And the edges of what QPainter draws are drawn using the pen. Here we +set it to NoPen, meaning that there will be no special edge when we +draw something; the blue brush will go all the way to the edges of +the things we draw. +<p> <pre> <a name="x2345"></a> p.<a href="qpainter.html#translate">translate</a>( 0, rect().bottom() ); +</pre> +<p> The <a href="qpainter.html#translate">QPainter::translate</a>() function translates the coordinate +system of the QPainter; 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 <a href="coordsys.html">The Coordinate +System</a> for more information about Qt's coordinate system). +<p> <pre> <a name="x2340"></a> p.<a href="qpainter.html#drawPie">drawPie</a>( QRect(-35, -35, 70, 70), 0, 90*16 ); +</pre> +<p> The drawPie() function draws a pie shape inside the specified +rectangle using a start angle and an arc length. The angles are +specified in 1/16th 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. +<p> <pre> <a name="x2342"></a> p.<a href="qpainter.html#rotate">rotate</a>( -ang ); +</pre> +<p> The <a href="qpainter.html#rotate">QPainter::rotate</a>() function rotates the coordinate system of the +<a href="qpainter.html">QPainter</a> around the origin. The rotation argument is a <tt>float</tt> given +in degrees (not given in 1/16th of a degree as above) and clockwise. +Here we rotate the coordinate system <tt>ang</tt> degrees counter-clockwise. +<p> <pre> <a name="x2341"></a> p.<a href="qpainter.html#drawRect">drawRect</a>( QRect(33, -4, 15, 8) ); +</pre> +<p> The <a href="qpainter.html#drawRect">QPainter::drawRect</a>() function draws the specified rectangle. Here +we draw the barrel of the cannon. +<p> It can often be difficult to envision the resulting drawing when the +coordinate system has been transformed (translated, rotated, scaled, or +sheared) as above. +<p> In this case the coordinate system is first translated and then rotated. +If the rectangle <a href="qrect.html">QRect</a>(33, -4, 15, 8) had been drawn in the translated +coordinate system, it would have looked like this: +<p> <center><img src="t9_1.png" alt="The cannon translated but not rotated"></center> +<p> 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: +<p> <center><img src="t9_2.png" alt="The cannon translated and rotated"></center> +<p> We're done, except that we haven't explained why Windows didn't dither +this time. +<p> + +<pre> int main( int argc, char **argv ) + { + <a name="x2347"></a> QApplication::<a href="qapplication.html#setColorSpec">setColorSpec</a>( QApplication::CustomColor ); + <a href="qapplication.html">QApplication</a> a( argc, argv ); +</pre> +<p> We tell Qt that we want a different color-allocation strategy for this +program. There is no single correct color-allocation strategy. Because +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>() +documentation. +<p> Mostly you can ignore this, since the default is good. Occasionally +some applications with unusual color use look bad; changing the +allocation strategy often helps then. +<p> <h2> Behavior +</h2> +<a name="2"></a><p> When the slider is operated the angle of the drawn cannon changes +accordingly. +<p> The Q on the Quit button is now underlined, and Alt+Q does what you +think it does. If you do not know why, you didn't do the exercises in +Chapter 8. +<p> You may notice that the cannon flickers annoyingly, especially on a +slow machine. We'll fix this in the next chapter. +<p> (See <a href="tutorial1-07.html#compiling">Compiling</a> for how to create a +makefile and build the application.) +<p> <h2> Exercises +</h2> +<a name="3"></a><p> Set a different pen instead of NoPen. Set a patterned brush. +<p> Try "Q&uit" or "Qu&it" as button text instead of "&Quit". What +happens? +<p> You're now ready for <a href="tutorial1-10.html">Chapter 10.</a> +<p> [<a href="tutorial1-08.html">Previous tutorial</a>] +[<a href="tutorial1-10.html">Next tutorial</a>] +[<a href="tutorial.html">Main tutorial page</a>] +<p> +<!-- eof --> +<p><address><hr><div align=center> +<table width=100% cellspacing=0 border=0><tr> +<td>Copyright © 2007 +<a href="troll.html">Trolltech</a><td align=center><a href="trademarks.html">Trademarks</a> +<td align=right><div align=right>Qt 3.3.8</div> +</table></div></address></body> +</html> |