Qt/C++ - Урок 017. QGraphicsScene – Як працювати з графікою в Qt

QGraphicsScene, Qt, QGraphicsScene пример, QGraphicsScene Qt5, QGraphicsScene example

Починаючи з цієї статті Ми приступаємо до вивчення графічних бібліотек Qt, а якщо точніше, QGraphicsScene. Цей клас надає функціонал управління великою кількістю 2D об'єктів. QGraphicsScene встановлюється в QGraphicsView.

Опишемо функціонал, який необхідно буде реалізувати у нашому додатку:

• Додавання графічної сцени в QGraphicsView.
• Відображення двох об'єктів на графічній сцені за допомогою ліній, а саме прямокутника та квадрата.
• Динамічна зміна розмірів графічної сцени залежно від зміни розмірів QGraphicsView.
• Динамічне зміна об'єктів на графічній сцені залежно від розмірів графічної сцени.

Програмний код був написаний QtCreator 3.3.1 на основі Qt 5.4.1.

Структура проекту для роботи з QGraphicsScene

Структура проекту для роботи з QGraphicsScene До структури проекту за промовчанням додається ще один клас MyGraphicView.

Справа в тому, що для зручності роботи з QGraphicsScene було прийнято рішення створити клас, який успадковується від QGraphicsView і вже всередині нього працювати з графічною сценою та її об'єктами.

mainwindow.ui

Зовнішній вигляд програми є головним вікном і GridLayout, розтягнутий на все це вікно. За підсумками уроків додаток буде виглядати так:

Зовнішній вигляд програми з QGraphicsScene ## mainwindow.h

Все, що робимо в цьому файлі, це підключаємо заголовний файл MyGraphicsView.

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
 
#include <QMainWindow>
 
#include <mygraphicview.h>
 
namespace Ui {
class MainWindow;
}
 
class MainWindow : public QMainWindow
{
    Q_OBJECT
 
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
 
private:
    Ui::MainWindow  *ui;
    MyGraphicView   *myPicture;     // Наш кастомный виджет
};
 
#endif // MAINWINDOW_H

mainwindow.cpp

Цей файл також нічим не примітний. Ініціалізуємо віджет та додаємо його GridLayout вікна програми.

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    /* Инициализируем виджет с графикой */
    myPicture   = new MyGraphicView();
    /* и добавляем его на слой */
    ui->graphicLayout->addWidget(myPicture);
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

mygraphicview.h

А тепер найцікавіше. Робота безпосередньо з графічною сценою, в якій ми малюємо два нових об'єкти, які повинні будуть перемальовуватися при зміні розміру вікна програми, і відповідно віджету.

Для динамічного перемальовування графічної сцени, а також при створенні головного вікна, параметри ширини і висоти вікна встановлюються не відразу, а після повного відмальовування, тому для відображення вмісту віджету потрібна деяка затримка часу, щоб отримати правильні значення ширини та висоти віджета, в якому буде утримуватися QGraphicsScene. Для цього скористаємося класом QTimer , по переповненню якого викликатимемо СЛОТ, у якому вже відбуватиметься малювання вмісту графічної сцени та коригування її розмірів.

#ifndef MYGRAPHICVIEW_H
#define MYGRAPHICVIEW_H
 
#include <QWidget>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsItemGroup>
#include <QTimer>
 
 
// Расширяем класс QGraphicsView
class MyGraphicView : public QGraphicsView
{
    Q_OBJECT
public:
    explicit MyGraphicView(QWidget *parent = 0);
    ~MyGraphicView();
 
signals:
 
private slots:
    void slotAlarmTimer();  /* слот для обработчика переполнения таймера
                             * в нём будет производиться перерисовка
                             * виджета
                             * */
 
private:
    QGraphicsScene      *scene;     // Объявляем сцену для отрисовки
    QGraphicsItemGroup  *group_1;   // Объявляем первую группу элементов
    QGraphicsItemGroup  *group_2;   // Объявляем вторую группу элементов
 
    /* Таймер для задержки отрисовки.
     * Дело в том, что при создании окна и виджета
     * необходимо некоторое время, чтобы родительский слой
     * развернулся, чтобы принимать от него адекватные параметры
     * ширины и высоты
     * */
    QTimer              *timer;
 
private:
    /* Перегружаем событие изменения размера окна,
     * чтобы перехватывать его
     * */
    void resizeEvent(QResizeEvent *event);
    /* Метод для удаления всех элементов
     * из группы элементов
     * */
    void deleteItemsFromGroup(QGraphicsItemGroup *group_1);
};
 
#endif // MYGRAPHICVIEW_H

mygraphicview.cpp

Для перемальовування об'єктів у QGraphicsScene ці об'єкти необхідно буде видаляти, тому для зручності роботи елементи цих об'єктів буду згруповані, а також буде написаний метод для видалення всіх елементів групи. Це зручно в тому випадку, якщо Вам необхідно перемалювати лише один об'єкт із кількох, який складається з низки елементів.

#include "mygraphicview.h"
 
MyGraphicView::MyGraphicView(QWidget *parent)
    : QGraphicsView(parent)
{
 
    /* Немного поднастроим отображение виджета и его содержимого */
    this->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); // Отключим скроллбар по горизонтали
    this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);   // Отключим скроллбар по вертикали
    this->setAlignment(Qt::AlignCenter);                        // Делаем привязку содержимого к центру
    this->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);    // Растягиваем содержимое по виджету
 
    /* Также зададим минимальные размеры виджета
     * */
    this->setMinimumHeight(100);
    this->setMinimumWidth(100);
 
    scene = new QGraphicsScene();   // Инициализируем сцену для отрисовки
    this->setScene(scene);          // Устанавливаем сцену в виджет
 
    group_1 = new QGraphicsItemGroup(); // Инициализируем первую группу элементов
    group_2 = new QGraphicsItemGroup(); // Инициализируем вторую группу элементов
 
    scene->addItem(group_1);            // Добавляем первую группу в сцену
    scene->addItem(group_2);            // Добавляем вторую группу в сцену
 
    timer = new QTimer();               // Инициализируем Таймер
    timer->setSingleShot(true);
    // Подключаем СЛОТ для отрисовки к таймеру
    connect(timer, SIGNAL(timeout()), this, SLOT(slotAlarmTimer()));
    timer->start(50);                   // Стартуем таймер на 50 миллисекунд
}
 
MyGraphicView::~MyGraphicView()
{
 
}
 
void MyGraphicView::slotAlarmTimer()
{
    /* Удаляем все элементы со сцены,
     * если они есть перед новой отрисовкой
     * */
    this->deleteItemsFromGroup(group_1);
    this->deleteItemsFromGroup(group_2);
 
    int width = this->width();      // определяем ширину нашего виджета
    int height = this->height();    // определяем высоту нашего виджета
 
    /* Устанавливаем размер сцены по размеру виджета
     * Первая координата - это левый верхний угол,
     * а Вторая - это правый нижний угол
     * */
    scene->setSceneRect(0,0,width,height);
 
    /* Приступаем к отрисовке произвольной картинки
     * */
    QPen penBlack(Qt::black); // Задаём чёрную кисть
    QPen penRed(Qt::red);   // Задаём красную кисть
 
    /* Нарисуем черный прямоугольник
     * */
    group_1->addToGroup(scene->addLine(20,20, width - 20, 20, penBlack));
    group_1->addToGroup(scene->addLine(width - 20, 20, width - 20, height -20, penBlack));
    group_1->addToGroup(scene->addLine(width - 20, height -20, 20, height -20, penBlack));
    group_1->addToGroup(scene->addLine(20, height -20, 20, 20, penBlack));
 
    /* Нарисуем красный квадрат
     * */
    int sideOfSquare = (height > width) ? (width - 60) : (height - 60);
    int centerOfWidget_X = width/2;
    int centerOfWidget_Y = height/2;
 
    group_2->addToGroup(scene->addLine(centerOfWidget_X - (sideOfSquare/2),
                                       centerOfWidget_Y - (sideOfSquare/2),
                                       centerOfWidget_X + (sideOfSquare/2),
                                       centerOfWidget_Y - (sideOfSquare/2),
                                       penRed));
 
    group_2->addToGroup(scene->addLine(centerOfWidget_X + (sideOfSquare/2),
                                       centerOfWidget_Y - (sideOfSquare/2),
                                       centerOfWidget_X + (sideOfSquare/2),
                                       centerOfWidget_Y + (sideOfSquare/2),
                                       penRed));
 
    group_2->addToGroup(scene->addLine(centerOfWidget_X + (sideOfSquare/2),
                                       centerOfWidget_Y + (sideOfSquare/2),
                                       centerOfWidget_X - (sideOfSquare/2),
                                       centerOfWidget_Y + (sideOfSquare/2),
                                       penRed));
 
    group_2->addToGroup(scene->addLine(centerOfWidget_X - (sideOfSquare/2),
                                       centerOfWidget_Y + (sideOfSquare/2),
                                       centerOfWidget_X - (sideOfSquare/2),
                                       centerOfWidget_Y - (sideOfSquare/2),
                                       penRed));
}
 
/* Этим методом перехватываем событие изменения размера виджет
 * */
void MyGraphicView::resizeEvent(QResizeEvent *event)
{
    timer->start(50);   // Как только событие произошло стартуем таймер для отрисовки
    QGraphicsView::resizeEvent(event);  // Запускаем событие родителького класса
}
 
 
/* Метод для удаления всех элементов из группы
 * */
void MyGraphicView::deleteItemsFromGroup(QGraphicsItemGroup *group)
{
    /* Перебираем все элементы сцены, и если они принадлежат группе,
     * переданной в метод, то удаляем их
     * */
    foreach( QGraphicsItem *item, scene->items(group->boundingRect())) {
       if(item->group() == group ) {
          delete item;
       }
    }
}

Підсумок

Результат роботи програми продемонстровано на наступному відео з 5:27. До цього моменту у відео присутні пояснення проекту.