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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>
Qt Tutorial - Chapter 10: Smooth as Silk
</title></head><body bgcolor="#ffffff">
<p>
<table width="100%">
<tr><td><a href="index.html">
<img width="100" height="100" src="qtlogo.png"
alt="Home" border="0"><img width="100"
height="100" src="face.png" alt="Home" border="0">
</a><td valign=top><div align=right><img src="dochead.png" width="472" height="27"><br>
<a href="classes.html"><b>Classes</b></a>
-<a href="annotated.html">Annotated</a>
- <a href="hierarchy.html">Tree</a>
-<a href="functions.html">Functions</a>
-<a href="index.html">Home</a>
-<a href="topicals.html"><b>Structure</b></a>
</div>
</table>
<p>
<h1 align=center>Chapter 10: Smooth as Silk</h1><br clear="all">
<p>
<center><img src="t10.png" alt="Screenshot of tutorial ten"></center>
<p>
In this example, we introduce painting in a pixmap to remove flickering.
We also add a force control.
<p>
<ul>
<li><a href="t10-lcdrange-h.html">lcdrange.h</a> contains the LCDRange
class definition
<li><a href="t10-lcdrange-cpp.html">lcdrange.cpp</a> contains the LCDRange
implementation
<li><a href="t10-cannon-h.html">cannon.h</a> contains the CannonField class
definition
<li><a href="t10-cannon-cpp.html">cannon.cpp</a> contains the CannonField
implementation
<li><a href="t10-main-cpp.html">main.cpp</a> contains MyWidget and main.
<li><a href="t10-makefile.html">Makefile</a> contains some rules for
generating the meta object information necessary for
<a href="signalsandslots.html">signal/slot creation.</a>
</ul>
<p>
<h2>Line by Line Walk-Through</h2>
<p>
<h3><a href="t10-cannon-h.html">cannon.h</a></h3>
<p>
The CannonField now has a force value in addition to the angle. <pre>
int angle() const { return ang; }
int force() const { return f; }
public slots:
void setAngle( int degrees );
void setForce( int newton );
signals:
void angleChanged( int );
void forceChanged( int );
</pre>
<p>
The interface to the force follows the same practice as for angle. <pre>
private:
<a href="qrect.html">QRect</a> cannonRect() const;
</pre>
<p>
We have put the definition of the cannon's enclosing rectangle in a
separate function. <pre>
int ang;
int f;
};
</pre>
<p>
The force is stored in the integer f.
<p>
<h3><a href="t10-cannon-cpp.html">cannon.cpp</a></h3> <pre>
#include <<a href="qpixmap-h.html">qpixmap.h</a>>
</pre>
<p>
We include the QPixmap class definition. <pre>
CannonField::CannonField( <a href="qwidget.html">QWidget</a> *parent, const char *name )
: <a href="qwidget.html">QWidget</a>( parent, name )
{
ang = 45;
f = 0;
<a href="qwidget.html#d7e4b9">setPalette</a>( <a href="qpalette.html">QPalette</a>( <a href="qcolor.html">QColor</a>( 250, 250, 200) ) );
}
</pre>
<p>
The force (f) is initialized to zero. <pre>
void CannonField::setAngle( int degrees )
{
if ( degrees < 5 )
degrees = 5;
if ( degrees > 70 )
degrees = 70;
if ( ang == degrees )
return;
ang = degrees;
<a href="qwidget.html#7569b1">repaint</a>( cannonRect(), FALSE );
emit angleChanged( ang );
}
</pre>
<p>
We have made a slight change in the setAngle() function. It repaints
only the portion of the widget that contains the cannon. The FALSE
argument indicates that the specified rectangle should not be erased
before a paint event is sent to the widget. This speeds up and smooths
drawing a little bit. <pre>
void CannonField::setForce( int newton )
{
if ( newton < 0 )
newton = 0;
if ( f == newton )
return;
f = newton;
emit forceChanged( f );
}
</pre>
<p>
The implementation of setForce() is quite similar to that of
setAngle(). The only difference is that since we don't show the force
value, we don't need to repaint the widget. <pre>
void CannonField::paintEvent( <a href="qpaintevent.html">QPaintEvent</a> *e )
{
if ( !e-><a href="qpaintevent.html#2d6e18">rect</a>().intersects( cannonRect() ) )
return;
</pre>
<p>
We have now optimized the paint event to repaint only the parts of the
widget that need updating. First we check whether we have to paint
anything at all, and return if we don't. <pre>
<a href="qrect.html">QRect</a> cr = cannonRect();
<a href="qpixmap.html">QPixmap</a> pix( cr.<a href="qrect.html#507cd9">size</a>() );
</pre>
<p>
Then we create a temporary pixmap, which we use for flicker-free
painting. All the painting operations are done into this pixmap, and
then the pixmap is drawn on the screen in a single operation.
<p>
This is the essence of flicker-free drawing: Draw on each pixel
precisely once. Less, and you get drawing errors. More, and you get
flicker. It doesn't matter much in this example - when the code was
written there were still machines slow enough for it to flicker, but
not any more. We've kept the code for educational purposes. <pre>
pix.<a href="qpixmap.html#6910a0">fill</a>( this, cr.<a href="qrect.html#349186">topLeft</a>() );
</pre>
<p>
We fill the pixmap with the background from this widget. <pre>
<a href="qpainter.html">QPainter</a> p( &pix );
p.<a href="qpainter.html#3e0cc8">setBrush</a>( blue );
p.<a href="qpainter.html#0183e4">setPen</a>( NoPen );
p.<a href="qpainter.html#eb778c">translate</a>( 0, pix.<a href="qpixmap.html#d5bb33">height</a>() - 1 );
p.<a href="qpainter.html#3ca7a2">drawPie</a>( <a href="qrect.html">QRect</a>( -35,-35, 70, 70 ), 0, 90*16 );
p.<a href="qpainter.html#b5205c">rotate</a>( -ang );
p.<a href="qpainter.html#4c0077">drawRect</a>( <a href="qrect.html">QRect</a>(33, -4, 15, 8) );
p.<a href="qpainter.html#365784">end</a>();
</pre>
<p>
We paint, as in chapter 9, but now we paint in the pixmap.
<p>
At this point, we have a painter variable and a pixmap that looks
precisely right, but we still haven't painted on the screen. <pre>
p.<a href="qpainter.html#02ed5d">begin</a>( this );
p.<a href="qpainter.html#c64b89">drawPixmap</a>( cr.<a href="qrect.html#349186">topLeft</a>(), pix );
</pre>
<p>
So we open the painter on the CannonField itself and then draw the pixmap.
<p>
That's all. A couple of extra lines at the top and a couple at the
bottom, and the code is 100% flicker-free. <pre>
<a href="qrect.html">QRect</a> CannonField::cannonRect() const
{
<a href="qrect.html">QRect</a> r( 0, 0, 50, 50 );
r.<a href="qrect.html#8df149">moveBottomLeft</a>( <a href="qwidget.html#75ae71">rect</a>().bottomLeft() );
return r;
}
</pre>
<p>
This function returns the rectangle enclosing the cannon in widget
coordinates. First we create a rectangle with the size 50x50, then
move it so its bottom left corner is equal to the widget's own bottom
left corner.
<p>
The <a href="qwidget.html#75ae71">QWidget::rect()</a> function returns the widget's enclosing
rectangle in the widget's own coordinates (where the top left corner
is 0,0).
<p>
<h3><a href="t10-main-cpp.html">main.cpp</a></h3> <pre>
MyWidget::MyWidget( <a href="qwidget.html">QWidget</a> *parent, const char *name )
: <a href="qwidget.html">QWidget</a>( parent, name )
{
</pre>
<p>
The constructor is mostly the same, but some new bits have been added. <pre>
LCDRange *force = new LCDRange( this, "force" );
force->setRange( 10, 50 );
</pre>
<p>
We add a second LCDRange which will be used to set the force. <pre>
<a href="qobject.html#7f8e37">connect</a>( force, SIGNAL(valueChanged(int)),
cannonField, SLOT(setForce(int)) );
<a href="qobject.html#7f8e37">connect</a>( cannonField, SIGNAL(forceChanged(int)),
force, SLOT(setValue(int)) );
</pre>
<p>
We connect the <code>force</code> widget and the <code>cannonField</code> widget just like
we did for the <code>angle</code> widget. <pre>
<a href="qvboxlayout.html">QVBoxLayout</a> *leftBox = new <a href="qvboxlayout.html">QVBoxLayout</a>;
grid-><a href="qgridlayout.html#a409bc">addLayout</a>( leftBox, 1, 0 );
leftBox-><a href="qboxlayout.html#ebba99">addWidget</a>( angle );
leftBox-><a href="qboxlayout.html#ebba99">addWidget</a>( force );
</pre>
<p>
In chapter 9, we put <code>angle</code> in the lower-left cell of the layout.
Now, we want to have two widgets in that cell, so we make a vertical
box, put the vertical box in the grid cell, and put each of <code>angle</code>
and <code>range</code> in the vertical box. <pre>
force->setValue( 25 );
</pre>
<p>
We initialize the force value to 25.
<p>
<h2>Behavior</h2>
<p>
The flicker has gone and we have a force control.
<p>
<h2>Exercises</h2>
<p>
Make the size of the cannon barrel be dependent on the force.
<p>
Put the cannon in the bottom right corner.
<p>
Try adding a better keyboard interface. For example, make + and -
increase and decrease the force and enter shoot. Hint: <a href="qaccel.html">QAccel</a> and
new addStep() and subtractStep() slots in LCDRange, like <a href="qslider.html#f8da10">QSlider::addStep()</a>. If you're bothered by the way the left and right
keys work (I am!), change that too.
<p>
You may now go on to <a href="t11.html">chapter eleven.</a>
<p>
[<a href="t9.html">Previous tutorial</a>]
[<a href="t11.html">Next tutorial</a>]
[<a href="tutorial.html">Main tutorial page</a>]
<p><address><hr><div align="center">
<table width="100%" cellspacing="0" border="0"><tr>
<td>Copyright 2001 Trolltech<td><a href="http://www.trolltech.com/trademarks.html">Trademarks</a>
<td align="right"><div align="right">Qt version 2.3.2</div>
</table></div></address></body></html>
|
