You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
11 KiB
237 lines
11 KiB
<!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:1304 -->
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
<title>TQt Tutorial - Chapter 10: Smooth as Silk</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>TQt Tutorial - Chapter 10: Smooth as Silk</h1>
|
|
|
|
|
|
<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">t10/lcdrange.h</a> contains the LCDRange
|
|
class definition.
|
|
<li> <a href="t10-lcdrange-cpp.html">t10/lcdrange.cpp</a> contains the LCDRange
|
|
implementation.
|
|
<li> <a href="t10-cannon-h.html">t10/cannon.h</a> contains the CannonField class
|
|
definition.
|
|
<li> <a href="t10-cannon-cpp.html">t10/cannon.cpp</a> contains the CannonField
|
|
implementation.
|
|
<li> <a href="t10-main-cpp.html">t10/main.cpp</a> contains MyWidget and main.
|
|
</ul>
|
|
<p> <h2> Line-by-line Walkthrough
|
|
</h2>
|
|
<a name="1"></a><p> <h3> <a href="t10-cannon-h.html">t10/cannon.h</a>
|
|
</h3>
|
|
<a name="1-1"></a><p> The CannonField now has a force value in addition to the angle.
|
|
<p>
|
|
|
|
<p> <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 the angle.
|
|
<p> <pre> private:
|
|
<a href="ntqrect.html">TQRect</a> cannonRect() const;
|
|
</pre>
|
|
<p> We have put the definition of the cannon's enclosing rectangle in a
|
|
separate function.
|
|
<p> <pre> int ang;
|
|
int f;
|
|
};
|
|
</pre>
|
|
<p> The force is stored in the integer <tt>f</tt>.
|
|
<p> <h3> <a href="t10-cannon-cpp.html">t10/cannon.cpp</a>
|
|
</h3>
|
|
<a name="1-2"></a><p>
|
|
|
|
<p> <pre> #include <<a href="qpixmap-h.html">ntqpixmap.h</a>>
|
|
</pre>
|
|
<p> We include the <a href="ntqpixmap.html">TQPixmap</a> class definition.
|
|
<p> <pre> CannonField::CannonField( <a href="ntqwidget.html">TQWidget</a> *parent, const char *name )
|
|
: <a href="ntqwidget.html">TQWidget</a>( parent, name )
|
|
{
|
|
ang = 45;
|
|
f = 0;
|
|
<a href="ntqwidget.html#setPalette">setPalette</a>( TQPalette( TQColor( 250, 250, 200) ) );
|
|
}
|
|
</pre>
|
|
<p> The force (<tt>f</tt>) is initialized to zero.
|
|
<p> <pre> void CannonField::setAngle( int degrees )
|
|
{
|
|
if ( degrees < 5 )
|
|
degrees = 5;
|
|
if ( degrees > 70 )
|
|
degrees = 70;
|
|
if ( ang == degrees )
|
|
return;
|
|
ang = degrees;
|
|
<a href="ntqwidget.html#repaint">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
|
|
the drawing a little bit.
|
|
<p> <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 because we don't show the force
|
|
value, we don't need to repaint the widget.
|
|
<p> <pre> void CannonField::<a href="ntqwidget.html#paintEvent">paintEvent</a>( <a href="qpaintevent.html">TQPaintEvent</a> *e )
|
|
{
|
|
<a name="x2357"></a> if ( !e-><a href="qpaintevent.html#rect">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 we return if we don't.
|
|
<p> <pre> <a href="ntqrect.html">TQRect</a> cr = cannonRect();
|
|
<a name="x2361"></a> <a href="ntqpixmap.html">TQPixmap</a> pix( cr.<a href="ntqrect.html#size">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.
|
|
<p> <pre> <a name="x2362"></a><a name="x2358"></a> pix.<a href="ntqpixmap.html#fill">fill</a>( this, cr.<a href="ntqrect.html#topLeft">topLeft</a>() );
|
|
</pre>
|
|
<p> We fill the pixmap with the background from this widget.
|
|
<p> <pre> <a href="ntqpainter.html">TQPainter</a> p( &pix );
|
|
<a name="x2354"></a> p.<a href="ntqpainter.html#setBrush">setBrush</a>( blue );
|
|
p.<a href="ntqpainter.html#setPen">setPen</a>( NoPen );
|
|
<a name="x2359"></a><a name="x2356"></a> p.<a href="ntqpainter.html#translate">translate</a>( 0, pix.<a href="ntqpixmap.html#height">height</a>() - 1 );
|
|
<a name="x2349"></a> p.<a href="ntqpainter.html#drawPie">drawPie</a>( TQRect( -35,-35, 70, 70 ), 0, 90*16 );
|
|
<a name="x2353"></a> p.<a href="ntqpainter.html#rotate">rotate</a>( -ang );
|
|
<a name="x2351"></a> p.<a href="ntqpainter.html#drawRect">drawRect</a>( TQRect(33, -4, 15, 8) );
|
|
<a name="x2352"></a> p.<a href="ntqpainter.html#end">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.
|
|
<p> <pre> <a name="x2348"></a> p.<a href="ntqpainter.html#begin">begin</a>( this );
|
|
<a name="x2350"></a> p.<a href="ntqpainter.html#drawPixmap">drawPixmap</a>( cr.<a href="ntqrect.html#topLeft">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.
|
|
<p> <pre> TQRect CannonField::cannonRect() const
|
|
{
|
|
<a href="ntqrect.html">TQRect</a> r( 0, 0, 50, 50 );
|
|
<a name="x2360"></a> r.<a href="ntqrect.html#moveBottomLeft">moveBottomLeft</a>( <a href="ntqwidget.html#rect">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 and then
|
|
move it so its bottom left corner is equal to the widget's own bottom-
|
|
left corner.
|
|
<p> The <a href="ntqwidget.html#rect">TQWidget::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">t10/main.cpp</a>
|
|
</h3>
|
|
<a name="1-3"></a><p>
|
|
|
|
<p> <pre> MyWidget::MyWidget( <a href="ntqwidget.html">TQWidget</a> *parent, const char *name )
|
|
: <a href="ntqwidget.html">TQWidget</a>( parent, name )
|
|
{
|
|
</pre>
|
|
<p> The constructor is mostly the same, but some new bits have been added.
|
|
<p> <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.
|
|
<p> <pre> <a href="ntqobject.html#connect">connect</a>( force, TQ_SIGNAL(valueChanged(int)),
|
|
cannonField, TQ_SLOT(setForce(int)) );
|
|
<a href="ntqobject.html#connect">connect</a>( cannonField, TQ_SIGNAL(forceChanged(int)),
|
|
force, TQ_SLOT(setValue(int)) );
|
|
</pre>
|
|
<p> We connect the <tt>force</tt> widget and the <tt>cannonField</tt> widget, just like
|
|
we did for the <tt>angle</tt> widget.
|
|
<p> <pre> <a href="qvboxlayout.html">TQVBoxLayout</a> *leftBox = new <a href="qvboxlayout.html">TQVBoxLayout</a>;
|
|
<a name="x2365"></a> grid-><a href="qgridlayout.html#addLayout">addLayout</a>( leftBox, 1, 0 );
|
|
leftBox-><a href="qboxlayout.html#addWidget">addWidget</a>( angle );
|
|
leftBox-><a href="qboxlayout.html#addWidget">addWidget</a>( force );
|
|
</pre>
|
|
<p> In Chapter 9 we put <tt>angle</tt> 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 <tt>angle</tt>
|
|
and <tt>range</tt> in the vertical box.
|
|
<p> <pre> force->setValue( 25 );
|
|
</pre>
|
|
<p> We initialize the force value to 25.
|
|
<p> <h2> Behavior
|
|
</h2>
|
|
<a name="2"></a><p> The flicker has gone and we have a force control.
|
|
<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> 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="ntqaccel.html">TQAccel</a> and
|
|
new addStep() and subtractStep() slots in LCDRange, like <a href="ntqslider.html#addStep">TQSlider::addStep</a>(). If you're bothered by the way the left and right
|
|
keys work (I am!), change that too.
|
|
<p> You're now ready for <a href="tutorial1-11.html">Chapter 11.</a>
|
|
<p> [<a href="tutorial1-09.html">Previous tutorial</a>]
|
|
[<a href="tutorial1-11.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>TQt 3.3.8</div>
|
|
</table></div></address></body>
|
|
</html>
|