Qt5 Tutorial QGraphicsView and QGraphicsScene - 2020

In this tutorial, we will learn QGraphicsView and QGraphicsScene.

The QGraphicsView class provides a widget for displaying the contents of a QGraphicsScene.

QGraphicsView visualizes the contents of a QGraphicsScene in a scrollable viewport. QGraphicsView is part of the Graphics View Framework.

The QGraphicsScene class provides a surface for managing a large number of 2D graphical items.

The class serves as a container for QGraphicsItems. It is used together with QGraphicsView for visualizing graphical items, such as lines, rectangles, text, or even custom items, on a 2D surface. QGraphicsScene is part of the Graphics View Framework.

Qt->Qt Gui Application:

We need to put GraphicsView into our dialog box:

If we compile and run at this point, we get:

We see nothing but a view. That's the GraphicsView. We'll create a scene and the scene will be displayed with the items we're going to add. In other words, the QGraphicsView class provides a widget for displaying the contents of a QGraphicsScene.

Here is the modified dialog.h:

// dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsItem>

namespace Ui {
class Dialog;
}

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

    QGraphicsScene *scene;
    QGraphicsEllipseItem *ellipse;
    QGraphicsRectItem *rectangle;
    QGraphicsTextItem *text;
};
#endif // DIALOG_H

Here is the implementation file, 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);

    QBrush greenBrush(Qt::green);
    QBrush blueBrush(Qt::blue);
    QPen outlinePen(Qt::black);
    outlinePen.setWidth(2);

    rectangle = scene->addRect(100, 0, 80, 100, outlinePen, blueBrush);

    // addEllipse(x,y,w,h,pen,brush)
    ellipse = scene->addEllipse(0, -100, 300, 60, outlinePen, greenBrush);

    text = scene->addText("bogotobogo.com", QFont("Arial", 20) );
    // movable text
    text->setFlag(QGraphicsItem::ItemIsMovable);
}

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

1. We created a QGraphicsScene object, scene:

   scene = new QGraphicsScene(this);

2. Then we put the scene to graphicsView:

   ui->graphicsView->setScene(scene);

3. Items were added to the scene, for example

   scene->addText();

If we run the code, we get:

Note that the text is movable by setting like this:

text->setFlag(QGraphicsItem::ItemIsMovable);