Qt5 Tutorial Customizing Items by inheriting QGraphicsItem - 2020

In this tutorial, we will learn QGraphicsItems.

The QGraphicsItems class is the base class for all graphical items in a QGraphicsScene

It provides a light-weight foundation for writing your own custom items. This includes defining the item's geometry, collision detection, its painting implementation and item interaction through its event handlers. QGraphicsItem is part of the Graphics View Framework.

Qt provides a set of standard graphics items for the most common shapes. These are:

1. QGraphicsEllipseItem provides an ellipse item
2. QGraphicsLineItem provides a line item
3. QGraphicsPathItem provides an arbitrary path item
4. QGraphicsPixmapItem provides a pixmap item
5. QGraphicsPolygonItem provides a polygon item
6. QGraphicsRectItem provides a rectangular item
7. QGraphicsSimpleTextItem provides a simple text label item
8. QGraphicsTextItem provides an advanced text browser item

Picture source: http://qt-project.org/doc/qt-5.0/qtwidgets/qgraphicsitem.html

We make our customized item.

When the used clicks on the item, it will change its color and shape.

Here is the normal picture:

But when the mouse is pressed, it changes to circle with red color:

This tutorial is a continuation of the previous turotial for QGraphicsView and QGraphicsScene. We'll do some customization to the QGraphicsItems such as changing item colors when we click.

Qt->Qt Gui Application:

We need to put GraphicsView into our dialog box:

We want to create a class MyItem:

As we see from the picture below, to customize our item, we override inherited virtual function, paint(), and mouse events such as mousePressEvent() and mouseReleaseEvent(). Also we need to specify the bounding box as well.

To write your own graphics item, you first create a subclass of QGraphicsItem, and then start by implementing its two pure virtual public functions: boundingRect(), which returns an estimate of the area painted by the item, and paint(), which implements the actual painting.
- from http://qt-project.org/doc/qt-5.0/qtwidgets/qgraphicsitem.html.

Now, we need to implement the methods in the myitem header file.

Right mouse click on the prototype -> Refactor -> Add Definition in myitem.cpp:

As mentioned earlier, since MyItem inherits QGraphicsItem, it should reimplement the virtual functions. Here is the modified cpp file: myitem.cpp:

// myitem.cpp

#include "myitem.h"

MyItem::MyItem()
{
    Pressed = false;
    setFlag(ItemIsMovable);
}

QRectF MyItem::boundingRect() const
{
    // outer most edges
    return QRectF(0,0,100,100);
}

void MyItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    QRectF rect = boundingRect();

    if(Pressed)
    {
        QPen pen(Qt::red, 3);
        painter->setPen(pen);
        painter->drawEllipse(rect);
    }
    else
    {
        QPen pen(Qt::black, 3);
        painter->setPen(pen);
        painter->drawRect(rect);
    }
}

void MyItem::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
    Pressed = true;
    update();
    QGraphicsItem::mousePressEvent(event);
}

void MyItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event)
{
    Pressed = false;
    update();
    QGraphicsItem::mouseReleaseEvent(event);
}

Here is the header, myitem.h:

// myitem.h

#ifndef MYITEM_H
#define MYITEM_H

#include <QPainter>
#include <QGraphicsItem>

// class for customization
class MyItem :public QGraphicsItem
{
public:
    MyItem();

    QRectF boundingRect() const;

    // overriding paint()
    void paint(QPainter * painter,
               const QStyleOptionGraphicsItem * option,
               QWidget * widget);

    // item state
    bool Pressed;
protected:
    // overriding mouse events
    void mousePressEvent(QGraphicsSceneMouseEvent *event);
    void mouseReleaseEvent(QGraphicsSceneMouseEvent *event);
};

#endif // MYITEM_H

So, we have customized item.

Now, what?

In the dialog.cpp below, we're automatically adding our item to the scene when the dialog (it has GraphicsView) opens up:

// dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    scene = new QGraphicsScene(this);
    ui->graphicsView->setScene(scene);

    // create our object and add it to the scene
    item = new MyItem();
    scene->addItem(item);
}

Dialog::~Dialog()
{
    delete ui;
}

Header file, dialog.h:

// dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QGraphicsScene>
#include "myitem.h"

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT
    
public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();
    
private:
    Ui::Dialog *ui;
    QGraphicsScene *scene;
    MyItem *item;
};

#endif // DIALOG_H

We can grab all files for the project: CustomGraphicsItems.zip.