~oif-team/ubuntu/natty/qt4-x11/xi2.1

<td width="1">  </td><td class="postheader" 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>

[Previous: <a href="tutorial-t10.html">Chapter 10</a>]

[<a href="tutorial.html">Qt Tutorial</a>]

[Next: <a href="tutorial-t12.html">Chapter 12</a>]

</p>

<h1 align="center">Qt Tutorial 11 - Giving It a Shot</h1>

<p>Files:</p>

<ul>

<li><a href="tutorial-t11-cannonfield-cpp.html">tutorial/t11/cannonfield.cpp</a></li>

<li><a href="tutorial-t11-cannonfield-h.html">tutorial/t11/cannonfield.h</a></li>

<li><a href="tutorial-t11-lcdrange-cpp.html">tutorial/t11/lcdrange.cpp</a></li>

<li><a href="tutorial-t11-lcdrange-h.html">tutorial/t11/lcdrange.h</a></li>

<li><a href="tutorial-t11-main-cpp.html">tutorial/t11/main.cpp</a></li>

</ul>

<center><img src="images/t11.png" alt="Screenshot of tutorial eleven" /></center><p>In this example we introduce a timer to implement animated shooting.</p>

<h2>Line by Line Walkthrough</h2>

<h3><a href="tutorial-t11-cannonfield-h.html">t11/cannonfield.h</a></h3>

<p>The <tt>CannonField</tt> now has shooting capabilities.</p>

<pre>  void shoot();</pre>

<p>Calling this slot will make the cannon shoot if a shot is not in the air.</p>

<pre>  private slots:

void moveShot();</pre>

<p>This private slot is used to move the shot while it is in the air, using a <a href="qtimer.html">QTimer</a>.</p>

<pre>  private:

void paintShot(QPainter &painter);</pre>

<p>This private function paints the shot.</p>

<pre>  QRect shotRect() const;</pre>

<p>This private function returns the shot's enclosing rectangle if one is in the air; otherwise the returned rectangle is undefined.</p>

<pre>  int timerCount;

QTimer *autoShootTimer;

float shootAngle;

float shootForce;

};</pre>

<p>These private variables contain information that describes the shot. The <tt>timerCount</tt> keeps track of the time passed since the shot was fired. The <tt>shootAngle</tt> is the cannon angle and <tt>shootForce</tt> is the cannon force when the shot was fired.</p>

<h3><a href="tutorial-t11-cannonfield-cpp.html">t11/cannonfield.cpp</a></h3>

<pre>  #include <math.h></pre>

<p>We include <tt><math.h></tt> because we need the <tt>sin()</tt> and <tt>cos()</tt> functions. (An alternative would be to include the more modern <tt><cmath></tt> header file. Unfortunately, some Unix platforms still don't support these properly.)</p>

<pre>  CannonField::CannonField(QWidget *parent)

: QWidget(parent)

{

currentAngle = 45;

currentForce = 0;

timerCount = 0;

autoShootTimer = new QTimer(this);

connect(autoShootTimer, SIGNAL(timeout()), this, SLOT(moveShot()));

shootAngle = 0;

shootForce = 0;

setPalette(QPalette(QColor(250, 250, 200)));

}</pre>

<p>We initialize our new private variables and connect the <a href="qtimer.html#timeout">QTimer::timeout</a>() signal to our <tt>moveShot()</tt> slot. We'll move the shot every time the timer times out.</p>

<pre>  void CannonField::shoot()

{

if (autoShootTimer->isActive())

return;

timerCount = 0;

shootAngle = currentAngle;

shootForce = currentForce;

autoShootTimer->start(5);

}</pre>

<p>This function shoots a shot unless a shot is in the air. The <tt>timerCount</tt> is reset to zero. The <tt>shootAngle</tt> and <tt>shootForce</tt> variables are set to the current cannon angle and force. Finally, we start the timer.</p>

<pre>  void CannonField::moveShot()

{

QRegion region = shotRect();

++timerCount;

QRect shotR = shotRect();

if (shotR.x() > width() || shotR.y() > height()) {

autoShootTimer->stop();

} else {

region = region.unite(shotR);

}

update(region);

}</pre>

100

<p><tt>moveShot()</tt> is the slot that moves the shot, called every 5 milliseconds when the <a href="qtimer.html">QTimer</a> fires.</p>

101

<p>Its tasks are to compute the new position, update the screen with the shot in the new position, and if necessary, stop the timer.</p>

102

<p>First we make a <a href="qregion.html">QRegion</a> that holds the old <tt>shotRect()</tt>. A <a href="qregion.html">QRegion</a> is capable of holding any sort of region, and we'll use it here to simplify the painting. <tt>shotRect()</tt> returns the rectangle where the shot is now. It is explained in detail later.</p>

103

<p>Then we increment the <tt>timerCount</tt>, which has the effect of moving the shot one step along its trajectory.</p>

104

<p>Next we fetch the new shot rectangle.</p>

105

<p>If the shot has moved beyond the right or bottom edge of the widget we stop the timer, or we add the new <tt>shotRect()</tt> to the <a href="qregion.html">QRegion</a>.</p>

106

<p>Finally, we repaint the <a href="qregion.html">QRegion</a>. This will send a single paint event for just the one or two rectangles that need updating.</p>

107

<pre>  void CannonField::paintEvent(QPaintEvent * /* event */)

108

{

109

QPainter painter(this);

110

111

paintCannon(painter);

112

if (autoShootTimer->isActive())

113

paintShot(painter);

114

}</pre>

115

<p>The paint event function has been simplified since the previous chapter. Most of the logic has been moved to the new <tt>paintShot()</tt> and <tt>paintCannon()</tt> functions.</p>

116

<pre>  void CannonField::paintShot(QPainter &painter)

117

{

118

painter.setPen(Qt::NoPen);

119

painter.setBrush(Qt::black);

120

painter.drawRect(shotRect());

121

}</pre>

122

<p>This private function paints the shot by drawing a black filled rectangle.</p>

123

<p>We leave out the implementation of <tt>paintCannon()</tt>; it is the same as the <a href="qwidget.html#paintEvent">QWidget::paintEvent</a>() reimplementation from the previous chapter.</p>

124

<pre>  QRect CannonField::shotRect() const

125

{

126

const double gravity = 4;

127

128

double time = timerCount / 40.0;

129

double velocity = shootForce;

130

double radians = shootAngle * 3.14159265 / 180;

131

132

double velx = velocity * cos(radians);

133

double vely = velocity * sin(radians);

134

double x0 = (barrelRect.right() + 5) * cos(radians);

135

double y0 = (barrelRect.right() + 5) * sin(radians);

136

double x = x0 + velx * time;

137

double y = y0 + vely * time - 0.5 * gravity * time * time;

138

139

QRect result(0, 0, 6, 6);

140

result.moveCenter(QPoint(qRound(x), height() - 1 - qRound(y)));

141

return result;

142

}</pre>

143

<p>This private function calculates the center point of the shot and returns the enclosing rectangle of the shot. It uses the initial cannon force and angle in addition to <tt>timerCount</tt>, which increases as time passes.</p>

144

<p>The formula used is the standard Newtonian formula for frictionless movement in a gravity field. For simplicity, we've chosen to disregard any Einsteinian effects.</p>

145

<p>We calculate the center point in a coordinate system where <i>y</i> coordinates increase upward. After we have calculated the center point, we construct a <a href="qrect.html">QRect</a> with size 6 x 6 and move its center point to the point calculated above. In the same operation we convert the point into the widget's coordinate system (see <a href="coordsys.html">The Coordinate System</a>).</p>

146

<p>The <a href="qtglobal.html#qRound">qRound</a>() function is an inline function defined in <tt><QtGlobal></tt> (included by all other Qt header files). <a href="qtglobal.html#qRound">qRound</a>() rounds a double to the closest integer.</p>

147

148

149

<pre>  class MyWidget : public QWidget

150

{

151

public:

152

MyWidget(QWidget *parent = 0);

153

};</pre>

154

<p>The only addition is the <b>Shoot</b> button.</p>

155

<pre>  QPushButton *shoot = new QPushButton("&Shoot");

156

shoot->setFont(QFont("Times", 18, QFont::Bold));</pre>

157

<p>In the constructor we create and set up the <b>Shoot</b> button exactly like we did with the <b>Quit</b> button.</p>

158

<pre>  connect(shoot, SIGNAL(clicked()), cannonField, SLOT(shoot()));</pre>

159

<p>Connects the <a href="qabstractbutton.html#clicked">clicked()</a> signal of the <b>Shoot</b> button to the <tt>shoot()</tt> slot of the <tt>CannonField</tt>.</p>

160

161

<h2>Running the Application</h2>

162

<p>The cannon can shoot, but there's nothing to shoot at.</p>

163

164

<h2>Exercises</h2>

165

<p>Make the shot a filled circle. [Hint: <a href="qpainter.html#drawEllipse">QPainter::drawEllipse</a>() may help.]</p>

166

<p>Change the color of the cannon when a shot is in the air.</p>

167

<p>

168

[Previous: <a href="tutorial-t10.html">Chapter 10</a>]

169

[<a href="tutorial.html">Qt Tutorial</a>]

170

[Next: <a href="tutorial-t12.html">Chapter 12</a>]

171

</p>

172

173

174

175

<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>

176

177

</tr></table></div></address></body>

178

</html>

Older »