source: trunk/doc/html/tutorial1-10.html@ 203

Last change on this file since 203 was 190, checked in by rudi, 14 years ago

reference documentation added
File size: 10.8 KB
Line 
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:1304 -->
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
6<title>Qt Tutorial - Chapter 10: Smooth as Silk</title>
7<style type="text/css"><!--
8fn { margin-left: 1cm; text-indent: -1cm; }
9a:link { color: #004faf; text-decoration: none }
10a:visited { color: #672967; text-decoration: none }
11body { 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&nbsp;Classes</font></a>
23 | <a href="mainclasses.html">
24<font color="#004faf">Main&nbsp;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&nbsp;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 10: Smooth as Silk</h1>
33
34
35<p> <center><img src="t10.png" alt="Screenshot of tutorial ten"></center>
36<p> In this example, we introduce painting in a pixmap to remove flickering.
37We also add a force control.
38<p> <ul>
39<li> <a href="t10-lcdrange-h.html">t10/lcdrange.h</a> contains the LCDRange
40class definition.
41<li> <a href="t10-lcdrange-cpp.html">t10/lcdrange.cpp</a> contains the LCDRange
42implementation.
43<li> <a href="t10-cannon-h.html">t10/cannon.h</a> contains the CannonField class
44definition.
45<li> <a href="t10-cannon-cpp.html">t10/cannon.cpp</a> contains the CannonField
46implementation.
47<li> <a href="t10-main-cpp.html">t10/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="t10-cannon-h.html">t10/cannon.h</a>
52</h3>
53<a name="1-1"></a><p> The CannonField now has a force value in addition to the angle.
54<p>
55
56<p> <pre> int angle() const { return ang; }
57 int force() const { return f; }
58
59 public slots:
60 void setAngle( int degrees );
61 void setForce( int newton );
62
63 signals:
64 void angleChanged( int );
65 void forceChanged( int );
66</pre>
67<p> The interface to the force follows the same practice as for the angle.
68<p> <pre> private:
69 <a href="qrect.html">QRect</a> cannonRect() const;
70</pre>
71<p> We have put the definition of the cannon's enclosing rectangle in a
72separate function.
73<p> <pre> int ang;
74 int f;
75 };
76</pre>
77<p> The force is stored in the integer <tt>f</tt>.
78<p> <h3> <a href="t10-cannon-cpp.html">t10/cannon.cpp</a>
79</h3>
80<a name="1-2"></a><p>
81
82<p> <pre> #include &lt;<a href="qpixmap-h.html">qpixmap.h</a>&gt;
83</pre>
84<p> We include the <a href="qpixmap.html">QPixmap</a> class definition.
85<p> <pre> CannonField::CannonField( <a href="qwidget.html">QWidget</a> *parent, const char *name )
86 : <a href="qwidget.html">QWidget</a>( parent, name )
87 {
88 ang = 45;
89 f = 0;
90 <a href="qwidget.html#setPalette">setPalette</a>( QPalette( QColor( 250, 250, 200) ) );
91 }
92</pre>
93<p> The force (<tt>f</tt>) is initialized to zero.
94<p> <pre> void CannonField::setAngle( int degrees )
95 {
96 if ( degrees &lt; 5 )
97 degrees = 5;
98 if ( degrees &gt; 70 )
99 degrees = 70;
100 if ( ang == degrees )
101 return;
102 ang = degrees;
103 <a href="qwidget.html#repaint">repaint</a>( cannonRect(), FALSE );
104 emit angleChanged( ang );
105 }
106</pre>
107<p> We have made a slight change in the setAngle() function. It repaints
108only the portion of the widget that contains the cannon. The FALSE
109argument indicates that the specified rectangle should not be erased
110before a paint event is sent to the widget. This speeds up and smooths
111the drawing a little bit.
112<p> <pre> void CannonField::setForce( int newton )
113 {
114 if ( newton &lt; 0 )
115 newton = 0;
116 if ( f == newton )
117 return;
118 f = newton;
119 emit forceChanged( f );
120 }
121</pre>
122<p> The implementation of setForce() is quite similar to that of
123setAngle(). The only difference is that because we don't show the force
124value, we don't need to repaint the widget.
125<p> <pre> void CannonField::<a href="qwidget.html#paintEvent">paintEvent</a>( <a href="qpaintevent.html">QPaintEvent</a> *e )
126 {
127 <a name="x2357"></a> if ( !e-&gt;<a href="qpaintevent.html#rect">rect</a>().intersects( cannonRect() ) )
128 return;
129</pre>
130<p> We have now optimized the paint event to repaint only the parts of the
131widget that need updating. First we check whether we have to paint
132anything at all, and we return if we don't.
133<p> <pre> <a href="qrect.html">QRect</a> cr = cannonRect();
134 <a name="x2361"></a> <a href="qpixmap.html">QPixmap</a> pix( cr.<a href="qrect.html#size">size</a>() );
135</pre>
136<p> Then we create a temporary pixmap, which we use for flicker-free
137painting. All the painting operations are done into this pixmap, and
138then the pixmap is drawn on the screen in a single operation.
139<p> This is the essence of flicker-free drawing: Draw on each pixel
140precisely once. Less, and you get drawing errors. More, and you get
141flicker. It doesn't matter much in this example - when the code was
142written there were still machines slow enough for it to flicker, but
143not any more. We've kept the code for educational purposes.
144<p> <pre> <a name="x2362"></a><a name="x2358"></a> pix.<a href="qpixmap.html#fill">fill</a>( this, cr.<a href="qrect.html#topLeft">topLeft</a>() );
145</pre>
146<p> We fill the pixmap with the background from this widget.
147<p> <pre> <a href="qpainter.html">QPainter</a> p( &amp;pix );
148 <a name="x2354"></a> p.<a href="qpainter.html#setBrush">setBrush</a>( blue );
149 p.<a href="qpainter.html#setPen">setPen</a>( NoPen );
150 <a name="x2359"></a><a name="x2356"></a> p.<a href="qpainter.html#translate">translate</a>( 0, pix.<a href="qpixmap.html#height">height</a>() - 1 );
151 <a name="x2349"></a> p.<a href="qpainter.html#drawPie">drawPie</a>( QRect( -35,-35, 70, 70 ), 0, 90*16 );
152 <a name="x2353"></a> p.<a href="qpainter.html#rotate">rotate</a>( -ang );
153 <a name="x2351"></a> p.<a href="qpainter.html#drawRect">drawRect</a>( QRect(33, -4, 15, 8) );
154 <a name="x2352"></a> p.<a href="qpainter.html#end">end</a>();
155</pre>
156<p> We paint, as in Chapter 9, but now we paint in the pixmap.
157<p> At this point, we have a painter variable and a pixmap that looks
158precisely right, but we still haven't painted on the screen.
159<p> <pre> <a name="x2348"></a> p.<a href="qpainter.html#begin">begin</a>( this );
160 <a name="x2350"></a> p.<a href="qpainter.html#drawPixmap">drawPixmap</a>( cr.<a href="qrect.html#topLeft">topLeft</a>(), pix );
161</pre>
162<p> So we open the painter on the CannonField itself and then draw the pixmap.
163<p> That's all. A couple of extra lines at the top and a couple at the
164bottom, and the code is 100% flicker-free.
165<p> <pre> QRect CannonField::cannonRect() const
166 {
167 <a href="qrect.html">QRect</a> r( 0, 0, 50, 50 );
168 <a name="x2360"></a> r.<a href="qrect.html#moveBottomLeft">moveBottomLeft</a>( <a href="qwidget.html#rect">rect</a>().bottomLeft() );
169 return r;
170 }
171</pre>
172<p> This function returns the rectangle enclosing the cannon in widget
173coordinates. First we create a rectangle with the size 50x50 and then
174move it so its bottom left corner is equal to the widget's own bottom-
175left corner.
176<p> The <a href="qwidget.html#rect">QWidget::rect</a>() function returns the widget's enclosing
177rectangle in the widget's own coordinates (where the top left corner
178is 0, 0).
179<p> <h3> <a href="t10-main-cpp.html">t10/main.cpp</a>
180</h3>
181<a name="1-3"></a><p>
182
183<p> <pre> MyWidget::MyWidget( <a href="qwidget.html">QWidget</a> *parent, const char *name )
184 : <a href="qwidget.html">QWidget</a>( parent, name )
185 {
186</pre>
187<p> The constructor is mostly the same, but some new bits have been added.
188<p> <pre> LCDRange *force = new LCDRange( this, "force" );
189 force-&gt;setRange( 10, 50 );
190</pre>
191<p> We add a second LCDRange, which will be used to set the force.
192<p> <pre> <a href="qobject.html#connect">connect</a>( force, SIGNAL(valueChanged(int)),
193 cannonField, SLOT(setForce(int)) );
194 <a href="qobject.html#connect">connect</a>( cannonField, SIGNAL(forceChanged(int)),
195 force, SLOT(setValue(int)) );
196</pre>
197<p> We connect the <tt>force</tt> widget and the <tt>cannonField</tt> widget, just like
198we did for the <tt>angle</tt> widget.
199<p> <pre> <a href="qvboxlayout.html">QVBoxLayout</a> *leftBox = new <a href="qvboxlayout.html">QVBoxLayout</a>;
200 <a name="x2365"></a> grid-&gt;<a href="qgridlayout.html#addLayout">addLayout</a>( leftBox, 1, 0 );
201 leftBox-&gt;<a href="qboxlayout.html#addWidget">addWidget</a>( angle );
202 leftBox-&gt;<a href="qboxlayout.html#addWidget">addWidget</a>( force );
203</pre>
204<p> In Chapter 9 we put <tt>angle</tt> in the lower-left cell of the layout.
205Now we want to have two widgets in that cell, so we make a vertical
206box, put the vertical box in the grid cell, and put each of <tt>angle</tt>
207and <tt>range</tt> in the vertical box.
208<p> <pre> force-&gt;setValue( 25 );
209</pre>
210<p> We initialize the force value to 25.
211<p> <h2> Behavior
212</h2>
213<a name="2"></a><p> The flicker has gone and we have a force control.
214<p> (See <a href="tutorial1-07.html#compiling">Compiling</a> for how to create a
215makefile and build the application.)
216<p> <h2> Exercises
217</h2>
218<a name="3"></a><p> Make the size of the cannon barrel be dependent on the force.
219<p> Put the cannon in the bottom-right corner.
220<p> Try adding a better keyboard interface. For example, make + and -
221increase and decrease the force and enter shoot. Hint: <a href="qaccel.html">QAccel</a> and
222new addStep() and subtractStep() slots in LCDRange, like <a href="qslider.html#addStep">QSlider::addStep</a>(). If you're bothered by the way the left and right
223keys work (I am!), change that too.
224<p> You're now ready for <a href="tutorial1-11.html">Chapter 11.</a>
225<p> [<a href="tutorial1-09.html">Previous tutorial</a>]
226[<a href="tutorial1-11.html">Next tutorial</a>]
227[<a href="tutorial.html">Main tutorial page</a>]
228<p>
229<!-- eof -->
230<p><address><hr><div align=center>
231<table width=100% cellspacing=0 border=0><tr>
232<td>Copyright &copy; 2007
233<a href="troll.html">Trolltech</a><td align=center><a href="trademarks.html">Trademarks</a>
234<td align=right><div align=right>Qt 3.3.8</div>
235</table></div></address></body>
236</html>
Note: See TracBrowser for help on using the repository browser.