Introduction to QT drawing system

Qt The drawing system allows the use of the same API Drawing on screens and other printing devices . The whole drawing system is based on QPainter,QPainterDevice and QPaintEngine Three categories .

QPainter Used to perform drawing operations ;QPaintDevice It's an abstraction of two-dimensional space , This two-dimensional space allows QPainter Draw on it , That is to say QPainter Working space ;QPaintEngine Provided a brush （QPainter） A unified interface for rendering on different devices .QPaintEngine Class applied to QPainter and QPaintDevice Between , Usually transparent to developers . Unless you need to customize a device , Otherwise you don't need to care QPaintEngine This class of . We can QPainter It's understood as a brush ; hold QPaintDevice The place where the brush is used , Like paper 、 Screen etc. ; And for paper 、 On screen , Be sure to use a different brush to draw , In order to unify the use of a brush , We designed QPaintEngine class , This class makes different papers 、 Every screen can use a brush .

The following figure shows the hierarchy between the three classes （ come from Qt API file ）：

The diagram above tells us ,Qt Our drawing system is actually , Use QPainter stay QPainterDevice Drawing on , Use... Between them QPaintEngine To communicate （ That is translation QPainter Instructions ）.

Let's introduce QPainter Use ：

//!!! Qt4/Qt5
 
class PaintedWidget : public QWidget
{
    Q_OBJECT
public:
    PaintedWidget(QWidget *parent = 0);
protected:
    void paintEvent(QPaintEvent *);
};

Notice that we rewrote QWidget Of paintEvent() function . Maybe we are understanding Qt The first practical application after the event system . The next step is PaintedWidget Source code ：

//!!! Qt4/Qt5
 
PaintedWidget::PaintedWidget(QWidget *parent) :
    QWidget(parent)
{
    resize(800, 600);
    setWindowTitle(tr("Paint Demo"));
}
 
void PaintedWidget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.drawLine(80, 100, 650, 500);
    painter.setPen(Qt::red);
    painter.drawRect(10, 10, 100, 400);
    painter.setPen(QPen(Qt::green, 5));
    painter.setBrush(Qt::blue);
    painter.drawEllipse(50, 150, 400, 200);
}

In the constructor , We just set the size and title of the window . and paintEvent() Functions are drawn code . First , We created a... On the stack QPainter object , in other words , Each run paintEvent() Function , Will rebuild this QPainter object . Be careful , This may give rise to some details ： Because every time we rebuild QPainter, So the brush color set at the first run 、 State, etc , The second time you enter this function, you lose it all . Sometimes we want to keep the brush state , You have to save your own data , Otherwise, you need to QPainter As a member variable of a class .

QPainter Receive one QPaintDevice Pointer as parameter .QPaintDevice There are many subclasses , such as QImage, as well as QWidget. Remember ,QPaintDevice It can be understood as where to draw , And now we want to draw on this component , So what's coming in is this The pointer .

QPainter There's a lot to draw Initial function , Used for drawing all kinds of graphics , Like here drawLine(),drawRect() as well as drawEllipse() etc. . When drawing contours , Use QPainter Of pen() attribute . such as , We call painter.setPen(Qt::red) take pen Set to red , The rectangle drawn below has a red outline . Next , We will pen Change to green ,5 Pixel width （painter.setPen(QPen(Qt::green, 5))）, Set the brush to blue again . Call again at this time draw function , It's green 5 Pixel wide contour 、 Ellipses filled in blue .

Run our program , You can see the final effect ：

We will introduce the brush in detail in the following chapters QPen And brushes QBrush Properties of .

Another point to make , Please pay attention to our drawing order , First, straight lines , Then the rectangle , Finally, the ellipse . In this drawing order , You can see that the straight line is the first drawing , On the bottom floor ; Rectangle is the second drawing , On the middle floor ; Ellipse is the last drawing , At the top .

If you understand OpenGL, I must have heard such a sentence ：OpenGL Is a state machine . The so-called state machine , That is to say ,OpenGL Only various states are saved . such as , Set the brush color to red , that , Unless you reset another color , Its color will always be red .QPainter In the same way , Its state will not recover itself , Unless you use various setting functions . therefore , If in the code above , We draw a rectangle after the ellipse , Its style will also be green 5 Pixel outline and blue fill , Unless you explicitly call the set function to update the status . This is how most drawing systems are implemented , Include OpenGL、QPainter as well as Java2D. It is because QPainter Is a state machine , Will lead to a detailed problem that we have previously introduced ： because paintEvent() It requires repeated entry , therefore , Attention should be paid to the second entry ,QPainter Is your state consistent with the first time , Otherwise, it may cause flickering . This flicker is not due to the problem of double buffering , But because of the fast switching of the drawing state .