1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
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>
|
