Part 4: Adding a canvas

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

What is a canvas?

A canvas is an optimised 2D graphics area that can contain an arbitrary numbers of canvas items. Canvas items can have an arbitrary shape, size and content, and can be freely moved around in the canvas. We will use a canvas to construct the main graphical area for our application.

The canvas module uses a document/view model. A canvas view class is used to show a particular view of a canvas. Multiple views can operate on the same canvas at the same time. We will use a canvas view to display our main graphical area within our main application window.

Adding a new class

Our canvas view will be implemented as a new class derived from QCanvasView to inherit a standard set of canvas view functionality.

The new class will be called "CanvasView" and is added to our project by using the KDevelop Project menu "New Class..." wizard. Enter the class name, press "OK", and on the next dialog tick the "Do not ask me again and use always my Active Target" option 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.

canvasview.h

#ifndef CANVASVIEW_H
#define CANVASVIEW_H

#include "ksimulate.h"
#include <qcanvas.h>
#include <qevent.h>

/***********************************************************************************/
/******************** CanvasView provides access to the canvas *********************/
/***********************************************************************************/

class CanvasView : public QCanvasView
{
  Q_OBJECT
public:
  CanvasView( QCanvas*, KSimulate* );              // constructor
    
protected:
  void viewportResizeEvent( QResizeEvent* );       // view resized
};

#endif // CANVASVIEW_H

As has been previously mentioned our new class is derived from QCanvasView to inherit a standard set of canvas view functionality. However we will enhance this straight away with an implementation for the virtual protected method to receive resize events from our main application window.

canvasview.cpp

#include "canvasview.h"

/***********************************************************************************/
/******************** CanvasView provides access to the canvas *********************/
/***********************************************************************************/

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

CanvasView::CanvasView(QCanvas* canvas, KSimulate* parent)
           : QCanvasView( canvas, parent )
{
}

/************************** viewportResizeEvent ****************************/

void CanvasView::viewportResizeEvent( QResizeEvent *event )
{
  // resize canvas
  canvas()->resize( event->size().width(), event->size().height() );
}

#include "canvasview.moc"

In the viewportResizeEvent method we resize the canvas to exactly fit our main window viewport. The viewport on our main window is the area between the menu bar at the top and the status bar at the bottom.

Creating the canvas and canvas view

The canvas and canvas view need to be created as part of the main application window constructor.

ksimulate.cpp

Include the canvasview.h header file.

#include "canvasview.h"

And inside the constructor add the code to create the canvas and canvas view, and set the canvas view as the central widget.

  // create canvas and canvas view
  QCanvas*    canvas      = new QCanvas( this );
  CanvasView* canvasView  = new CanvasView( canvas, this );
  setCentralWidget( canvasView );
  canvasView->show();

Compile and run

Because we have added a new class, we need to rerun automake again by selecting "Run automake & friends" from the Build menu. The new code will now successfully compile when you attempt to run the application.

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