Part 6: Drawing on the canvas

[<< Contents] [<< Prev] [Next >>]

Canvas items

As mentioned in a previous part a canvas can contain an arbitrary number of canvas items. Qt provides a number of predefined canvas items and more specialised items can be created by inheriting from one of the canvas item classes. To represent our radio stations on our canvas we will create a new class derived from QCanvasSprite.

Adding the new class

Our new class will be called "Station" and needs to be added to our project in the same manner as we added CanvasView earlier. Use the KDevelop "New Class..." wizard, enter the class name and press "OK".

To make the code rather easier to follow and to better fit our purposes, we will again replace the template code provided by KDevelop with our own new code shown below. Open each file by using the File menu "Quick Open..." and replace the existing code with the new code shown below.

station.h

#ifndef STATION_H
#define STATION_H

#include <qcanvas.h>

/***********************************************************************************/
/***************************** Station to be simulated *****************************/
/***********************************************************************************/

class Station : public QCanvasSprite
{
public:
  Station( QCanvasPixmapArray*, QCanvas*, int, int );       // constructor
};

#endif // STATION_H

Our class is derived from QCanvasSprite and currently only has a constructor.

station.cpp

#include "station.h"

/***********************************************************************************/
/***************************** Station to be simulated *****************************/
/***********************************************************************************/

/******************************* constuctor ********************************/

Station::Station(QCanvasPixmapArray* sprite, QCanvas* canvas, int x, int y )
                   : QCanvasSprite( sprite, canvas )
{
  // move sprite to correct position and show
  move( x, y );
  show();
}

In the constructor we pass on a sprite image that will represent our station and a pointer to the canvas to the QCanvasSprite constructor, and then move the sprite to the correct position and make it visible using inherited methods.

Sprite image

The sprite image that will represent our stations on our display is a 16 pixel by 16 pixel bitmap image () that was prepared with the help of GIMP and saved in the XPM format.

This needs to be added to our project by using the KDevelop new file functionality (either from the toolbar or File menu), and adding the code below.

/* XPM */
static const char * draw_station_l[] = {
"16 16 2 1",
" 	c None",
".	c #000000",
"  ..   ..   ..  ",
"   ..  ..  ..   ",
"    .. .. ..    ",
"     ......     ",
"      ....      ",
"       ..       ",
"       ..       ",
"   ..........   ",
"   ..........   ",
"   ..      ..   ",
"   ..      ..   ",
"   ..      ..   ",
"   ..      ..   ",
"   ..      ..   ",
"   ..........   ",
"   ..........   "};

Drawing on the canvas

Displaying our stations on the canvas is achieved by creating instances of our new class "Station" and passing in the sprite, the canvas, and x/y location to the constructor. We will let the user select the x/y location for each station by clicking with the mouse on the canvas view.

canvasview.h

Implement the virtual protected method to receive mouse click events.

  void contentsMousePressEvent( QMouseEvent* );    // mouse click

Add a private pixmap array to store the sprite.

  QCanvasPixmapArray   stationSprite;              // station sprite

canvasview.cpp

Include station.h for access to the station functionality, and draw_station_l.xpm for the bitmap image.

#include "station.h"
#include "draw_station_l.xpm"

In the constructor setup the station sprite.

  // initialise the station QCanvasPixmapArray
  stationSprite.setImage( 0, new QCanvasPixmap( QPixmap(draw_station_l), QPoint(8,8) ) );

In the contentsMousePressEvent method we create a new instance of our class Station, update the canvas, check to see if the minimum canvas size needs to be increased to accomondate the new station, and finally place a new message on the status bar.

/************************* contentsMousePressEvent *************************/

void CanvasView::contentsMousePressEvent( QMouseEvent *event )
{
  // add station to canvas
  new Station( &stationSprite, canvas(), event->x(), event->y() );
  canvas()->update();

  // increase minimum canvas size if needed to accomondate new station
  if (event->x()+10 > minCanvasW ) minCanvasW = event->x()+10;
  if (event->y()+10 > minCanvasH ) minCanvasH = event->y()+10;

  // update status bar to say station added
  sbar->message(QString("Added station at %1,%2").arg(event->x()).arg(event->y()));
}

Compile and run

The new code will be compiled automatically when you next attempt to re-run the application using KDevelop. Investigate how the application behaves.

[<< Contents] [<< Prev] [Next >>]