Qt/C++ - Lektion 017. QGraphicsScene – Arbeiten mit Grafiken in Qt

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

Beginnend mit diesem Artikel beginnen wir, die Qt-Grafikbibliotheken zu studieren, oder besser gesagt, QGraphicsScene Diese Klasse bietet Funktionen zum Verwalten einer großen Anzahl von 2D-Objekten. QGraphicsScene ist auf QGraphicsView eingestellt.

Beschreiben wir die Funktionalität, die in unserer Anwendung implementiert werden muss:

• Hinzufügen einer Grafikszene zu QGraphicsView.
• Zeichnen von zwei Objekten in der Grafikszene mit Linien, nämlich ein Rechteck und ein Quadrat.
• Dynamische Größenänderung der Grafikszene in Abhängigkeit von der Größenänderung QGraphicsView.
• Dynamisch wechselnde Objekte in der Grafikszene abhängig von der Größe der Grafikszene selbst.

Der Programmcode wurde in QtCreator 3.3.1 basierend auf Qt 5.4.1 geschrieben.

Projektstruktur für die Arbeit mit QGraphicsScene

Projektstruktur für die Arbeit mit QGraphicsScene Eine weitere Klasse MyGraphicView. wird der "Standard"-Projektstruktur hinzugefügt.

Tatsache ist, dass für die bequeme Arbeit mit QGraphicsScene beschlossen wurde, eine Klasse zu erstellen, die von QGraphicsView erbt und bereits darin mit einer grafischen Szene und ihren Objekten arbeitet.

mainwindow.ui

Das Erscheinungsbild der Anwendung ist das Hauptfenster und das GridLayout erstreckt sich über das gesamte Fenster. Am Ende der Lektionen sieht die Anwendung so aus:

Anwendungserscheinung mit QGraphicsScene ## mainwindow.h

Alles, was wir in dieser Datei tun, ist die Header-Datei 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

Auch diese Datei ist unauffällig. Wir initialisieren das Widget und fügen es dem GridLayout des Anwendungsfensters hinzu.

#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

Jetzt kommt der lustige Teil. Direktes Arbeiten mit der Grafikszene, in der wir zwei neue Objekte zeichnen, die neu gezeichnet werden müssen, wenn die Größe des Anwendungsfensters geändert wird, und dementsprechend das Widget selbst.

Beim dynamischen Neuzeichnen der Grafikszene sowie beim Erstellen des Hauptfensters werden die Parameter der Breite und Höhe des Fensters nicht sofort eingestellt, aber nach dem vollständigen Rendern dauert es daher, den Inhalt des Widgets zu rendern einige Zeitverzögerung, um die richtigen Werte für Breite und Höhe des Widgets zu erhalten, in dem QGraphicsScene enthalten sein wird. Dazu verwenden wir die Klasse QTimer , bei dessen Überlauf wir den SLOT nennen, in dem der Inhalt der Grafikszene gezeichnet und deren Größe angepasst wird.

#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

Um Objekte in QGraphicsScene neu zu zeichnen, müssen dieselben Objekte gelöscht werden, daher werden die Elemente dieser Objekte zur Vereinfachung der Arbeit gruppiert und es wird auch eine Methode geschrieben, um alle Elemente der Gruppe zu löschen . Dies ist praktisch, wenn Sie nur eines von mehreren Objekten neu zeichnen müssen, die aus mehreren Elementen bestehen.

#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;
       }
    }
}

Ergebnis

Das Ergebnis der Bewerbung wird im folgenden Video ab 05:27 Uhr demonstriert. Bis hierhin enthält das Video Erläuterungen zum Projekt.