Qt5 Tutorial QPainterPath and QPolygon - 2020

In this tutorial, we will learn QPainterPath and QPolygon.

The QPainterPath class provides a container for painting operations, enabling graphical shapes to be constructed and reused.

A painter path is an object composed of a number of graphical building blocks, such as rectangles, ellipses, lines, and curves. Building blocks can be joined in closed subpaths, for example as a rectangle or an ellipse. A closed path has coinciding start and end points. Or they can exist independently as unclosed subpaths, such as lines and curves.

Here is an example of PainterPath from Qt Doc Painter Paths Example .

OK. Let's make own own example.

Qt->Qt Gui Application:

We will override QWidget::paintEvent() so that we can create customized widgets and have complete control over their appearance.

Here is the modified dialog.h:

// dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QPainter>
#include <QPolygon>
#include <QPainterPath>

namespace Ui {
class Dialog;
}

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

protected:
    void paintEvent(QPaintEvent *e);
};

#endif // DIALOG_H

Here, we're going to reimplement paintEvent().

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

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

void Dialog:: paintEvent(QPaintEvent *e)
{
    QPainter painter(this);

    QPolygon poly;

    poly << QPoint(0, 85) << QPoint(75, 75)
         << QPoint(100, 10) << QPoint(125, 75)
         << QPoint(200, 85) << QPoint(150, 125)
         << QPoint(160, 190) << QPoint(100, 150)
         << QPoint(40, 190) << QPoint(50, 125)\
         << QPoint(0, 85);

    // QPen: style(), width(), brush(), capStyle() and joinStyle().
    QPen pen(Qt::red, 3, Qt::DashDotLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen);
    painter.drawPolygon(poly);
}

In the paintEvent(), we created QPolygon object, fill the points, and draw it using drawPolygon().

If we run the code, we get:

We want the polygon filled.

Here we reimplemented the paintEvent() again:

void Dialog:: paintEvent(QPaintEvent *e)
{
    QPainter painter(this);

    QPolygon poly;

    poly << QPoint(0, 85) << QPoint(75, 75)
         << QPoint(100, 10) << QPoint(125, 75)
         << QPoint(200, 85) << QPoint(150, 125)
         << QPoint(160, 190) << QPoint(100, 150)
         << QPoint(40, 190) << QPoint(50, 125)\
         << QPoint(0, 85);

    // style(), width(), brush(), capStyle() and joinStyle().
    QPen pen(Qt::red, 3, Qt::DashDotLine, Qt::RoundCap, Qt::RoundJoin);
    painter.setPen(pen);

    // Brush
    QBrush brush;
    brush.setColor(Qt::green);
    brush.setStyle(Qt::SolidPattern);

    // Fill polygon
    QPainterPath path;
    path.addPolygon(poly);

    // Draw polygon
    painter.drawPolygon(poly);
    painter.fillPath(path, brush);
}
}

Run the code, then we will have a filled polygon!