Qt/C++ - Lesson 019. How to paint triangle in Qt5. Positioning shapes in QGraphicsScene

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

Drawing interfaces, the formation of the database tables, work with the network - it's all good, but sometimes you want to just draw something, such as a triangle. And then of course, revive this place, so that they can be controlled, and subsequently to turn this project into a little game. Well, who does not want to write your own game, even the most simple?

Let us then take the first step toward the unpretentious games, namely deal with drawing objects to Qt, trying to draw a triangle.

Project structure

  • Triangle.pro - Project profile, created by default, and in this project does not require the correction;
  • main.cpp - file, which starts with the application, the file is called a widget, which will be located in the graphic scene with a triangle;
  • widget.h - header file of a widget with a graphic scene;
  • widget.cpp - source file of widget;
  • triangle.h - Triangle header file class that inherits from QGraphicsItem;
  • triangle.cpp - source file of Triangle class;

mainwindow.ui

The interface design simply throws QGraphicsView in the widget. Nothing more is required.

widget.h

This file is only for defining a graphical scene and the triangle object with which we work.

#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 this file are configured objects QGraphicsView, QGraphicsScene , and the triangle object is created and installed on the graphic scene.

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

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->resize(600,600);          // Set sizes of widget
    this->setFixedSize(600,600);    // Fix sizes of widget
    scene = new QGraphicsScene();   // Init graphic scene
    triangle = new Triangle();      // Init Triangle

    ui->graphicsView->setScene(scene);  // Set graphics scene into 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));   // Add horizontal line via center
    scene->addLine(0,-250,0,250,QPen(Qt::black));   // Add vertical line via center

    scene->addItem(triangle);   
    triangle->setPos(0,0);      


}

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

triangle.h

But now is the time to work out the class itself, which creates a triangle. In this case, we are inheriting from QGraphicsItem .

#ifndef TRIANGLE_H
#define TRIANGLE_H

#include <QGraphicsItem>
#include <QPainter>

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

protected:
    QRectF boundingRect() const;    /* We define a virtual method that returns the area in which the triangle is
                                     * */
    /* Define a method for rendering a triangle
     * */
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
};

#endif // TRIANGLE_H

triangle.cpp

Now draw a triangle in our class. Here, there is one important moment. Coordinate System QGraphicsItem object - a concept different from the coordinate system of the graphic scenes. That is, each QGraphicsItem object or inherited from this class has its own coordinate system, which is translated in QGraphicsScene coordinate system. When we assign a position where there will be an object in the graphic scene, we indicate where it will be located point of the graphic object that has the coordinates 0 on the X-axis and 0 on the Y-axis in the coordinate system of the object, so it is important that this point was the center of the graphic. This will facilitate further work, unless of course you are not consciously intend to other options.

#include "triangle.h"

Triangle::Triangle() :
    QGraphicsItem()
{

}

Triangle::~Triangle()
{

}

QRectF Triangle::boundingRect() const
{
    return QRectF(-25,-40,50,80);   // We are limiting the area of triangle
}

void Triangle::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
        QPolygon polygon;   // Using Polygon class, to draw the triangle
        // We put the coordinates of points in the polygonal model
        polygon << QPoint(0,-40) << QPoint(25,40) << QPoint(-25,40);
        painter->setBrush(Qt::red);     // We set the brush, which will render the object
        painter->drawPolygon(polygon);  // Draw a triangle on a polygonal model
        Q_UNUSED(option);
        Q_UNUSED(widget);
}

Result

As a result, you should get an application that displays a red triangle in the center of the graphic scenes at the intersection of the two lines, as shown in the figure.

Download project

Video

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

P
Nov. 19, 2019, 2:23 p.m.
Pan

C++ - Test 001. The first program and data types

  • Result:100points,
  • Rating points10
P
Nov. 19, 2019, 2:20 p.m.
Pan

C++ - Test 001. The first program and data types

  • Result:66points,
  • Rating points-1
O
Nov. 18, 2019, 3:54 p.m.
Oksana

C++ - Test 005. Structures and Classes

  • Result:66points,
  • Rating points-1
Last comments
D
Nov. 19, 2019, 4 p.m.
Django_lover

Привет! Пытаюсь освоить создание чата по вашей статье, сделал все как написано. Пока что результат такой (см. на прикрепленные скрины). Подскажите, пожалуйста, почему такой внешний вид и вдруг м…
P
Nov. 19, 2019, 2:10 p.m.
Pan

Здравствуйте. Спасибо за статью. Сделал перевод программы. Все работает. Только я делал не динамический, но это пока и не надо. Но с одной проблемой все же столкнулся. В прог…
v
Nov. 19, 2019, 11:26 a.m.
vintorez10

Разобрался!!! Надо было не архив качать а exe файл и его уже распаковывать в нужную папку)))
v
Nov. 19, 2019, 10:19 a.m.
vintorez10

Ребята а что если папки "Source" в архиве opencv нет? Скачал три варианта библиотеки ни в одном нет этой папки.
c
Nov. 18, 2019, 6:27 a.m.
cyberaxe77

Моих знаний пока явно недостаточно, чтобы писать статьи. Так...небольшие заметки "на полях"))).
Now discuss on the forum
Nov. 19, 2019, 8:10 a.m.
Intruder

Михаил, добрый день. Без разницы в дизайнере создается форма или не в дизайнере. Как вы добавляете в QTabWidget? Нашел видеоурок и по нему все сделал. Все получилось. QtabWidg…
Nov. 19, 2019, 7:22 a.m.
Evgenij Legotskoj

Ну тогда создайте, пожалуйста, потом новую тему на форуме с тем кодом, а то мы с вами в оффтоп ушли, здесь немного не о том было обсуждение.
Nov. 19, 2019, 6:18 a.m.
BlinCT

Спасибо за идею. Сейчас попробою.
Nov. 19, 2019, 2:36 a.m.
BlinCT

Всем привет. Если кто дебажил qml часть подскажиет пожалуйста, какие настрйоки требуются в Qt Creator? Я собирал 5.12.5 из исходников, в Настройкс в debugger у меня выставлен путь к со…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB