[190] | 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:1506 -->
|
---|
| 3 | <html>
|
---|
| 4 | <head>
|
---|
| 5 | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
---|
| 6 | <title>Qt Tutorial - Chapter 11: Giving It a Shot</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 11: Giving It a Shot</h1>
|
---|
| 33 |
|
---|
| 34 |
|
---|
| 35 | <p> <center><img src="t11.png" alt="Screenshot of tutorial eleven"></center>
|
---|
| 36 | <p> In this example we introduce a timer to implement animated shooting.
|
---|
| 37 | <p> <ul>
|
---|
| 38 | <li> <a href="t11-lcdrange-h.html">t11/lcdrange.h</a> contains the LCDRange
|
---|
| 39 | class definition.
|
---|
| 40 | <li> <a href="t11-lcdrange-cpp.html">t11/lcdrange.cpp</a> contains the LCDRange
|
---|
| 41 | implementation.
|
---|
| 42 | <li> <a href="t11-cannon-h.html">t11/cannon.h</a> contains the CannonField class
|
---|
| 43 | definition.
|
---|
| 44 | <li> <a href="t11-cannon-cpp.html">t11/cannon.cpp</a> contains the CannonField
|
---|
| 45 | implementation.
|
---|
| 46 | <li> <a href="t11-main-cpp.html">t11/main.cpp</a> contains MyWidget and main.
|
---|
| 47 | </ul>
|
---|
| 48 | <p> <h2> Line-by-line Walkthrough
|
---|
| 49 | </h2>
|
---|
| 50 | <a name="1"></a><p> <h3> <a href="t11-cannon-h.html">t11/cannon.h</a>
|
---|
| 51 | </h3>
|
---|
| 52 | <a name="1-1"></a><p> The CannonField now has shooting capabilities.
|
---|
| 53 | <p>
|
---|
| 54 |
|
---|
| 55 | <p> <pre> void shoot();
|
---|
| 56 | </pre>
|
---|
| 57 | <p> Calling this slot will make the cannon shoot if a shot is not in the air.
|
---|
| 58 | <p> <pre> private slots:
|
---|
| 59 | void moveShot();
|
---|
| 60 | </pre>
|
---|
| 61 | <p> This private slot is used to move the shot while it is in the air,
|
---|
| 62 | using a <a href="qtimer.html">QTimer</a>.
|
---|
| 63 | <p> <pre> private:
|
---|
| 64 | void paintShot( <a href="qpainter.html">QPainter</a> * );
|
---|
| 65 | </pre>
|
---|
| 66 | <p> This private function paints the shot.
|
---|
| 67 | <p> <pre> <a href="qrect.html">QRect</a> shotRect() const;
|
---|
| 68 | </pre>
|
---|
| 69 | <p> This private function returns the shot's enclosing rectangle if
|
---|
| 70 | one is in the air; otherwise the returned rectangle is undefined.
|
---|
| 71 | <p> <pre> int timerCount;
|
---|
| 72 | <a href="qtimer.html">QTimer</a> * autoShootTimer;
|
---|
| 73 | float shoot_ang;
|
---|
| 74 | float shoot_f;
|
---|
| 75 | };
|
---|
| 76 | </pre>
|
---|
| 77 | <p> These private variables contain information that describes the shot. The
|
---|
| 78 | <tt>timerCount</tt> keeps track of the time passed since the shot was fired.
|
---|
| 79 | The <tt>shoot_ang</tt> is the cannon angle and <tt>shoot_f</tt> is the cannon force
|
---|
| 80 | when the shot was fired.
|
---|
| 81 | <p> <h3> <a href="t11-cannon-cpp.html">t11/cannon.cpp</a>
|
---|
| 82 | </h3>
|
---|
| 83 | <a name="1-2"></a><p>
|
---|
| 84 |
|
---|
| 85 | <p> <pre> #include <math.h>
|
---|
| 86 | </pre>
|
---|
| 87 | <p> We include the math library because we need the sin() and cos() functions.
|
---|
| 88 | <p> <pre> CannonField::CannonField( <a href="qwidget.html">QWidget</a> *parent, const char *name )
|
---|
| 89 | : <a href="qwidget.html">QWidget</a>( parent, name )
|
---|
| 90 | {
|
---|
| 91 | ang = 45;
|
---|
| 92 | f = 0;
|
---|
| 93 | timerCount = 0;
|
---|
| 94 | autoShootTimer = new <a href="qtimer.html">QTimer</a>( this, "movement handler" );
|
---|
| 95 | <a name="x2379"></a> <a href="qobject.html#connect">connect</a>( autoShootTimer, SIGNAL(<a href="qtimer.html#timeout">timeout</a>()),
|
---|
| 96 | this, SLOT(moveShot()) );
|
---|
| 97 | shoot_ang = 0;
|
---|
| 98 | shoot_f = 0;
|
---|
| 99 | <a href="qwidget.html#setPalette">setPalette</a>( QPalette( QColor( 250, 250, 200) ) );
|
---|
| 100 | }
|
---|
| 101 | </pre>
|
---|
| 102 | <p> We initialize our new private variables and connect the <a href="qtimer.html#timeout">QTimer::timeout</a>() signal to our moveShot() slot. We'll move the
|
---|
| 103 | shot every time the timer times out.
|
---|
| 104 | <p> <pre> void CannonField::shoot()
|
---|
| 105 | {
|
---|
| 106 | <a name="x2376"></a> if ( autoShootTimer-><a href="qtimer.html#isActive">isActive</a>() )
|
---|
| 107 | return;
|
---|
| 108 | timerCount = 0;
|
---|
| 109 | shoot_ang = ang;
|
---|
| 110 | shoot_f = f;
|
---|
| 111 | <a name="x2377"></a> autoShootTimer-><a href="qtimer.html#start">start</a>( 50 );
|
---|
| 112 | }
|
---|
| 113 | </pre>
|
---|
| 114 | <p> This function shoots a shot unless a shot is in the air. The <tt>timerCount</tt>
|
---|
| 115 | is reset to zero. The <tt>shoot_ang</tt> and <tt>shoot_f</tt> are set to the current
|
---|
| 116 | cannon angle and force. Finally, we start the timer.
|
---|
| 117 | <p> <pre> void CannonField::moveShot()
|
---|
| 118 | {
|
---|
| 119 | <a href="qregion.html">QRegion</a> r( shotRect() );
|
---|
| 120 | timerCount++;
|
---|
| 121 |
|
---|
| 122 | <a href="qrect.html">QRect</a> shotR = shotRect();
|
---|
| 123 |
|
---|
| 124 | if ( shotR.<a href="qrect.html#x">x</a>() > width() || shotR.<a href="qrect.html#y">y</a>() > height() )
|
---|
| 125 | <a name="x2378"></a> autoShootTimer-><a href="qtimer.html#stop">stop</a>();
|
---|
| 126 | else
|
---|
| 127 | <a name="x2373"></a> r = r.<a href="qrect.html#unite">unite</a>( QRegion( shotR ) );
|
---|
| 128 | <a href="qwidget.html#repaint">repaint</a>( r );
|
---|
| 129 | }
|
---|
| 130 | </pre>
|
---|
| 131 | <p> moveShot() is the slot that moves the shot, called every 50
|
---|
| 132 | milliseconds when the <a href="qtimer.html">QTimer</a> fires.
|
---|
| 133 | <p> Its tasks are to compute the new position, repaint the screen with the
|
---|
| 134 | shot in the new position, and if necessary, stop the timer.
|
---|
| 135 | <p> First we make a <a href="qregion.html">QRegion</a> that holds the old shotRect(). A <a href="qregion.html">QRegion</a>
|
---|
| 136 | is capable of holding any sort of region, and we'll use it here to
|
---|
| 137 | simplify the painting. ShotRect() returns the rectangle where the
|
---|
| 138 | shot is now - it is explained in detail later.
|
---|
| 139 | <p> Then we increment the <tt>timerCount</tt>, which has the effect of moving the
|
---|
| 140 | shot one step along its trajectory.
|
---|
| 141 | <p> Next we fetch the new shot rectangle.
|
---|
| 142 | <p> If the shot has moved beyond the right or bottom edge of the widget, we
|
---|
| 143 | stop the timer or we add the new shotRect() to the QRegion.
|
---|
| 144 | <p> Finally, we repaint the QRegion. This will send a single paint event
|
---|
| 145 | for just the one or two rectangles that need updating.
|
---|
| 146 | <p> <pre> void CannonField::<a href="qwidget.html#paintEvent">paintEvent</a>( <a href="qpaintevent.html">QPaintEvent</a> *e )
|
---|
| 147 | {
|
---|
| 148 | <a name="x2369"></a> <a href="qrect.html">QRect</a> updateR = e-><a href="qpaintevent.html#rect">rect</a>();
|
---|
| 149 | <a href="qpainter.html">QPainter</a> p( this );
|
---|
| 150 |
|
---|
| 151 | <a name="x2370"></a> if ( updateR.<a href="qrect.html#intersects">intersects</a>( cannonRect() ) )
|
---|
| 152 | paintCannon( &p );
|
---|
| 153 | if ( autoShootTimer-><a href="qtimer.html#isActive">isActive</a>() &&
|
---|
| 154 | updateR.<a href="qrect.html#intersects">intersects</a>( shotRect() ) )
|
---|
| 155 | paintShot( &p );
|
---|
| 156 | }
|
---|
| 157 | </pre>
|
---|
| 158 | <p> The paint event function has been split in two since the previous
|
---|
| 159 | chapter. Now we fetch the bounding rectangle of the region that
|
---|
| 160 | needs painting, check whether it intersects either the cannon and/or
|
---|
| 161 | the shot, and if necessary, call paintCannon() and/or paintShot().
|
---|
| 162 | <p> <pre> void CannonField::paintShot( <a href="qpainter.html">QPainter</a> *p )
|
---|
| 163 | {
|
---|
| 164 | p-><a href="qpainter.html#setBrush">setBrush</a>( black );
|
---|
| 165 | p-><a href="qpainter.html#setPen">setPen</a>( NoPen );
|
---|
| 166 | <a name="x2366"></a> p-><a href="qpainter.html#drawRect">drawRect</a>( shotRect() );
|
---|
| 167 | }
|
---|
| 168 | </pre>
|
---|
| 169 | <p> This private function paints the shot by drawing a black filled rectangle.
|
---|
| 170 | <p> We leave out the implementation of paintCannon(); it is the same as
|
---|
| 171 | the paintEvent() from the previous chapter.
|
---|
| 172 | <p> <pre> QRect CannonField::shotRect() const
|
---|
| 173 | {
|
---|
| 174 | const double gravity = 4;
|
---|
| 175 |
|
---|
| 176 | double time = timerCount / 4.0;
|
---|
| 177 | double velocity = shoot_f;
|
---|
| 178 | double radians = shoot_ang*3.14159265/180;
|
---|
| 179 |
|
---|
| 180 | double velx = velocity*cos( radians );
|
---|
| 181 | double vely = velocity*sin( radians );
|
---|
| 182 | <a name="x2372"></a> double x0 = ( barrelRect.<a href="qrect.html#right">right</a>() + 5 )*cos(radians);
|
---|
| 183 | double y0 = ( barrelRect.<a href="qrect.html#right">right</a>() + 5 )*sin(radians);
|
---|
| 184 | double x = x0 + velx*time;
|
---|
| 185 | double y = y0 + vely*time - 0.5*gravity*time*time;
|
---|
| 186 |
|
---|
| 187 | <a href="qrect.html">QRect</a> r = QRect( 0, 0, 6, 6 );
|
---|
| 188 | <a name="x2371"></a> r.<a href="qrect.html#moveCenter">moveCenter</a>( QPoint( qRound(x), height() - 1 - qRound(y) ) );
|
---|
| 189 | return r;
|
---|
| 190 | }
|
---|
| 191 | </pre>
|
---|
| 192 | <p> This private function calculates the center point of the shot and returns
|
---|
| 193 | the enclosing rectangle of the shot. It uses the initial cannon force and
|
---|
| 194 | angle in addition to <tt>timerCount</tt>, which increases as time passes.
|
---|
| 195 | <p> The formula used is the classical Newtonian formula for frictionless
|
---|
| 196 | movement in a gravity field. For simplicity, we've chosen to
|
---|
| 197 | disregard any Einsteinian effects.
|
---|
| 198 | <p> We calculate the center point in a coordinate system where y
|
---|
| 199 | coordinates increase upward. After we have calculated the center
|
---|
| 200 | point, we construct a <a href="qrect.html">QRect</a> with size 6x6 and move its center point to
|
---|
| 201 | the point calculated above. In the same operation we convert the
|
---|
| 202 | point into the widget's coordinate system (see <a href="coordsys.html">The
|
---|
| 203 | Coordinate System</a>).
|
---|
| 204 | <p> The qRound() function is an inline function defined in qglobal.h (included
|
---|
| 205 | by all other Qt header files). qRound() rounds a double to the closest
|
---|
| 206 | integer.
|
---|
| 207 | <p> <h3> <a href="t11-main-cpp.html">t11/main.cpp</a>
|
---|
| 208 | </h3>
|
---|
| 209 | <a name="1-3"></a><p>
|
---|
| 210 |
|
---|
| 211 | <p> <pre> class MyWidget: public <a href="qwidget.html">QWidget</a>
|
---|
| 212 | {
|
---|
| 213 | public:
|
---|
| 214 | MyWidget( <a href="qwidget.html">QWidget</a> *parent=0, const char *name=0 );
|
---|
| 215 | };
|
---|
| 216 | </pre>
|
---|
| 217 | <p> The only addition is the Shoot button.
|
---|
| 218 | <p> <pre> <a href="qpushbutton.html">QPushButton</a> *shoot = new <a href="qpushbutton.html">QPushButton</a>( "&Shoot", this, "shoot" );
|
---|
| 219 | <a name="x2382"></a> shoot-><a href="qwidget.html#setFont">setFont</a>( QFont( "Times", 18, QFont::Bold ) );
|
---|
| 220 | </pre>
|
---|
| 221 | <p> In the constructor we create and set up the Shoot button exactly like we
|
---|
| 222 | did with the Quit button. Note that the first argument to the constructor
|
---|
| 223 | is the button text, and the third is the widget's name.
|
---|
| 224 | <p> <pre> <a href="qobject.html#connect">connect</a>( shoot, SIGNAL(<a href="qbutton.html#clicked">clicked</a>()), cannonField, SLOT(shoot()) );
|
---|
| 225 | </pre>
|
---|
| 226 | <p> Connects the clicked() signal of the Shoot button to the shoot() slot
|
---|
| 227 | of the CannonField.
|
---|
| 228 | <p> <h2> Behavior
|
---|
| 229 | </h2>
|
---|
| 230 | <a name="2"></a><p> The cannon can shoot, but there's nothing to shoot at.
|
---|
| 231 | <p> (See <a href="tutorial1-07.html#compiling">Compiling</a> for how to create a
|
---|
| 232 | makefile and build the application.)
|
---|
| 233 | <p> <h2> Exercises
|
---|
| 234 | </h2>
|
---|
| 235 | <a name="3"></a><p> Make the shot a filled circle. Hint: <a href="qpainter.html#drawEllipse">QPainter::drawEllipse</a>() may
|
---|
| 236 | help.
|
---|
| 237 | <p> Change the color of the cannon when a shot is in the air.
|
---|
| 238 | <p> You're now ready for <a href="tutorial1-12.html">Chapter 12.</a>
|
---|
| 239 | <p> [<a href="tutorial1-10.html">Previous tutorial</a>]
|
---|
| 240 | [<a href="tutorial1-12.html">Next tutorial</a>]
|
---|
| 241 | [<a href="tutorial.html">Main tutorial page</a>]
|
---|
| 242 | <p>
|
---|
| 243 | <!-- eof -->
|
---|
| 244 | <p><address><hr><div align=center>
|
---|
| 245 | <table width=100% cellspacing=0 border=0><tr>
|
---|
| 246 | <td>Copyright © 2007
|
---|
| 247 | <a href="troll.html">Trolltech</a><td align=center><a href="trademarks.html">Trademarks</a>
|
---|
| 248 | <td align=right><div align=right>Qt 3.3.8</div>
|
---|
| 249 | </table></div></address></body>
|
---|
| 250 | </html>
|
---|