Linux Tech Blog

Last time, I gave an introduction to the QGraphicsView Framework. Now, I’ll show you how to create QGraphicsItems in a scene.

First, you need to understand the Coordinate System. There are 3 coordinate systems in use with the framework: View coordinates, Scene coordinates and Item coordinates.

1. The View coordinate system: represents the QGraphicsView widget coordinates. Each unit in this system corresponds to one pixel on the screen.
2. The Scene coordinate system: represents logical units of a QGraphicsScene. Top-level items on the scene are positioned using this system before mapping to the View.
3. The Item coordinate system: represents the QGraphicsItem local coordinates. These coordinates are centered (by default) around the Item’s (0, 0) point.

Two example scenarios are demonstrated below:

LEFT: Untransformed View. RIGHT: Zoomed Out View. Each pixel on the View correspond to 4 logical units on the Scene. (This is only a demonstrative example)

The picture on the LEFT shows a sample scene (QGraphicsScene) visualized by an untransformed view (QGraphicsView). The picture on the RIGHT shows the same scene, but the view is changed. It has a ZOOM OUT operation applied to it.

Notice that each logical unit on the RIGHT scene does not represent a pixel on the screen anymore. However, each item remains with the SAME coordinates and bounding rectangles.

Now, let’s do some coding. First, we add a rectangle and a circle to the scene:

QGraphicsScene scene(0, 0, 240, 120);
 
QGraphicsRectItem *rect;
rect = new QGraphicsRectItem(QRect(0, 0, 100, 100));
rect->setBrush( Qt::red );
rect->setPos(10, 10);
 
scene.addItem(rect);
 
QGraphicsEllipseItem *circle;
circle = new QGraphicsEllipseItem(QRect(0, 0, 100, 100));
circle->setBrush( Qt::blue );
circle->setPos(120, 10);
 
scene.addItem(circle);
 
QGraphicsView view(&scene);
 
view.show();

A rectangle and a circle. No transformations applied.

To add both items, the addItem method was used. Both bounding rectangles start at (0, 0) point, but their scene positions were changed through the setPos method. You can still use the convenience methods to add items if you want (addRect, addEllipse, addPolygon, etc).

In order to add a third item, we must enlarge the scene to visualize it.

QGraphicsScene scene(0, 0, 240, 200);

QPolygonF polygon;
polygon << QPointF(0, 60) << QPointF(120, 60)
                          << QPointF(60, 0);
QGraphicsPolygonItem *triangle;
triangle = new QGraphicsPolygonItem(polygon);
triangle->setBrush( Qt::green );
triangle->setPos(60, 120);
 
scene.addItem(triangle);
...

A triangle (QGraphicsPolygonItem) added to the scene.

The triangle was created with the QGraphicsPolygonItem class.  A QPolygonF with the vertices is passed to its constructor.

Now, let’s apply some operations to them:

rect->translate(15, 10);
rect->rotate(10);
 
circle->translate(20, 30);
circle->scale(1/1.5, 1/1.5);
 
triangle->shear(0.85, 0);
...

Items rotated, translated, scaled and sheared.

Now the rectangle was moved and rotated (by default Qt sets the transformation center to the scene’s (0,0) point), the circle was moved and scaled (shrinked) and the triangle was sheared. You can learn more about transformations on this link: QGraphicsItem class.

And that’s it. Hope this was usefull. The source code used for this post is available here: qgraphicsitem-examples.tar.gz