Chapter 9: With Cannon You Can

In this example, we use a QPainter for the first time. It is used to draw a cute little blue cannon. Only cannon.cpp differs from the previous chapter.

• lcdrange.h contains the LCDRange class definition
• lcdrange.cpp contains the LCDRange implementation
• cannon.h contains the CannonField class definition
• cannon.cpp contains the CannonField implementation
• main.cpp contains MyWidget and main.
• Makefile contains some rules for generating the meta object information necessary for signal/slot creation.

Line by Line Walk-Through

cannon.cpp

    void CannonField::paintEvent( QPaintEvent * )
    {
        QPainter p;
        QBrush   brush( blue );
        QPen     pen( NoPen );

In order to paint our widget, we use a QPainter. QPainter is Qt's painting engine. It can render 2D graphics on several types of paint devices. QWidget is a paint device. See the QPainter documentation for details.

QPainter uses a QPen and a QBrush. The pen specifies a line style and a text color while the brush specifies a fill color and/or a fill pattern. In our paintEvent, we want to use a blue brush and an invisible pen.

        p.begin( this );

Calling begin() tells the painter to start painting on a paint device. Here we start painting on the CannonField widget.

        p.setBrush( brush );
        p.setPen( pen );

Here we set the brush and pen created above.

        p.translate( 0, rect().bottom() );

The translate() function translates the coordinate system of the QPainter, i.e. moves it by an offset. Here we set the (0,0) point to the bottom left corner of the widget. The x and y directions remain unchanged, i.e. all the y coordinates inside the widget are now negative (see The Coordinate System).

        p.drawPie( QRect(-35, -35, 70, 70), 0, 90*16 );

The drawPie() function draws a pie shape inside the specified rectangle using a start angle and an arc length. The angles are specified in 1/16th of a degree. Zero degrees is at the 3 o'clock position. The drawing direction is counter-clockwise. Here we draw a quarter of a circle in the bottom left corner of the widget. The pie is filled with blue and has no outline.

        p.rotate( -ang );

The rotate() function rotates the coordinate system of the QPainter around the point (0,0). The rotation argument is a float given in degrees (not given in 1/16th of a degree as above) and clockwise. Here we rotate the coordinate system ang degrees counter-clockwise.

        p.drawRect( QRect(33, -4, 15, 8) );

The drawRect() function draws the specified rectangle. Here we draw the barrel of the cannon.

It can often be difficult to envision the resulting drawing when the coordinate system has been transformed (translated, rotated, scaled or sheared) as above.

In this case, the coordinate system is first translated, then rotated. If the rectangle QRect(33, -4, 15, 8) had been drawn in the translated coordinate system, it would have looked like this:

Note that the rectangle is clipped by the border of the CannonField widget. When we rotate the coordinate system, for instance 60 degrees, the rectangle will be rotated around (0,0), which is the bottom left corner, since we have translated the coordinate system. The result looks like this:

        p.end();

Calling end() tells the painter to end painting on a paint device. We're done, except that we haven't explained why Windows didn't dither this time.

    int main( int argc, char **argv )    {
        QApplication::setColorSpec( QApplication::CustomColor );

We tell Qt that we want a different color allocation strategy for this program. There is no single correct color allocation strategy. Some strategies look good for some programs, some look bad.

CustomColor gives Qt applications better colors on Windows. It has no effect under X11. There are several options. You can read about them in the documentation.

Behavior

When the scroll bar is operated, the angle of the drawn cannon changes accordingly.

You may notice that the cannon flickers annoyingly, especially on a slow machine. We'll fix this in the next chapter.

Excercises

Set a background pixmap for the CannonField widget.

You may now go on to chapter ten.

[Previous tutorial] [Next tutorial] [Main tutorial page]