Qt/C++ - Lektion 019. Wie man Dreiecke in Qt5 malt. Positionieren von Formen in QGraphicsScene

треугольник, QGraphicsItem, QPolygon, Рисование Qt, Qt5, Qt, Рисование Qt5, QPainter

Interfaces zeichnen, Datenbanktabellen bilden, mit dem Netzwerk arbeiten ist alles gut, aber manchmal möchte man einfach nur etwas zeichnen, zum Beispiel ein Dreieck . Und dann natürlich dieses Objekt animieren, damit es gesteuert werden kann, und dieses Projekt anschließend in ein kleines Spiel verwandeln. Wer möchte nicht sein eigenes Spiel schreiben, selbst das einfachste?

Machen wir dann den ersten Schritt zu einem einfachen Spiel, nämlich das Zeichnen von Objekten in Qt, indem wir versuchen, ein Dreieck zu zeichnen.

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

Die Struktur des Projekts "Triangle"

Beschreiben wir die Struktur des Projekts, in dem wir ein Dreieck zeichnen:

• Triangle.pro - Projektprofil, standardmäßig erstellt und erfordert keine Anpassungen in diesem Projekt;
• main.cpp - die Datei, aus der die Anwendung startet, in dieser Datei wird das Widget aufgerufen, in dem sich die grafische Szene mit dem Dreieck befindet;
• widget.h - Header-Datei des aufgerufenen Widgets mit einer grafischen Szene;
• widget.cpp - Quellcodedatei des Widgets;
• Triangle.h - Header-Datei der Klasse Triangle , die von QGraphicsItem geerbt wird;
• Triangle.cpp - Quellcodedatei für die Klasse Triangle.

mainwindow.ui

Werfen Sie im Interface-Designer einfach QGraphicsView in das Widget. Nichts anderes ist erforderlich.

widget.h

In dieser Datei deklarieren wir nur die Grafikszene und das Dreiecksobjekt, mit dem wir arbeiten werden.

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QGraphicsScene>

#include <triangle.h>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget      *ui;
    QGraphicsScene  *scene;     // Объявляем графическую сцену 
    Triangle        *triangle;  // и треугольник
};

#endif // WIDGET_H

widget.cpp

In dieser Datei werden QGraphicsView , QGraphicsScene, Objekte konfiguriert und auch ein Dreiecksobjekt erstellt und in der Grafikszene installiert.

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->resize(600,600);          // Задаем размеры виджета, то есть окна
    this->setFixedSize(600,600);    // Фиксируем размеры виджета

    scene = new QGraphicsScene();   // Инициализируем графическую сцену
    triangle = new Triangle();      // Инициализируем треугольник

    ui->graphicsView->setScene(scene);  // Устанавливаем графическую сцену в graphicsView
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);    // Устанавливаем сглаживание
    ui->graphicsView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff); // Отключаем скроллбар по вертикали
    ui->graphicsView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); // Отключаем скроллбар по горизонтали

    scene->setSceneRect(-250,-250,500,500); // Устанавливаем область графической сцены

    scene->addLine(-250,0,250,0,QPen(Qt::black));   // Добавляем горизонтальную линию через центр
    scene->addLine(0,-250,0,250,QPen(Qt::black));   // Добавляем вертикальную линию через центр

    scene->addItem(triangle);   // Добавляем на сцену треугольник
    triangle->setPos(0,0);      // Устанавливаем треугольник в центр сцены


}

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

dreieck.h

Aber jetzt ist es an der Zeit, an der Klasse selbst zu arbeiten, in der das Dreieck erstellt wird. In diesem Fall erben wir von QGraphicsItem .

#ifndef TRIANGLE_H
#define TRIANGLE_H

#include <QGraphicsItem>
#include <QPainter>

// Наследуемся от QGraphicsItem
class Triangle : public QGraphicsItem
{
public:
    Triangle();
    ~Triangle();

protected:
    QRectF boundingRect() const;    /* Определяем виртуальный метод,
                                     * который возвращает область, в которой
                                     * находится треугольник
                                     * */
    /* Определяем метод для отрисовки треугольника
     * */
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
};

#endif // TRIANGLE_H

Dreieck.cpp

Jetzt zeichnen wir in unserer Klasse ein Dreieck. Hier gibt es einen wichtigen Punkt. Das Koordinatensystem des QGraphicsItem -Objekts ist ein anderes Konzept als das Koordinatensystem der Grafikszene. Das heißt, jedes Objekt QGraphicsItem oder von dieser Klasse geerbt hat sein eigenes Koordinatensystem, das in das QGraphicsScene Koordinatensystem übersetzt wird. Wenn wir die Position festlegen, an der sich das Objekt in der Grafikszene befinden wird, geben wir an, wo sich der Punkt des Grafikobjekts befindet, der die Koordinaten 0 auf der X-Achse und 0 auf der Y-Achse im Koordinatensystem des Objekts hat. Daher ist es wichtig, dass dieser Punkt in der Mitte der Grafik liegt. Dies erleichtert die weitere Arbeit, sofern Sie natürlich nicht bewusst etwas anderes annehmen.

#include "triangle.h"

Triangle::Triangle() :
    QGraphicsItem()
{

}

Triangle::~Triangle()
{

}

QRectF Triangle::boundingRect() const
{
    return QRectF(-25,-40,50,80);   // Ограничиваем область, в которой лежит треугольник
}

void Triangle::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
        QPolygon polygon;   // Используем класс полигона, чтобы отрисовать треугольник
        // Помещаем координаты точек в полигональную модель
        polygon << QPoint(0,-40) << QPoint(25,40) << QPoint(-25,40);
        painter->setBrush(Qt::red);     // Устанавливаем кисть, которой будем отрисовывать объект
        painter->drawPolygon(polygon);  // Рисуем треугольник по полигональной модели
        Q_UNUSED(option);
        Q_UNUSED(widget);
}

Ergebnis

Als Ergebnis sollten Sie eine Anwendung haben, die ein rotes Dreieck in der Mitte der Grafikszene am Schnittpunkt zweier Linien anzeigt, wie in der Abbildung gezeigt.

Ich empfehle Ihnen auch, sich mit dem Video-Tutorial vertraut zu machen, in dem der Moment beim Einstellen der Koordinaten eines Grafikobjekts genauer betrachtet wird.

Archiv mit dem Projekt

Videoanleitung