目錄

?

2D Painting Example

Overview

Helper Class Definition

Helper Class Implementation

Widget Class Definition

Widget Class Implementation

GLWidget Class Definition

GLWidget Class Implementation

Window Class Definition

Window Class Implementation

---

?

2D Painting Example

QPainter類將2D的繪圖給QpaintDevice的子類，這個子類包括QWidget和QImage。
QGLWidget是QWidget的子類，所以他可以重寫paintEvent或Qpainter在設備上畫圖。但是這個painteEvent和QPainter和普通的QWidget是不同的，如果本機的OpenGL支持繪圖，那么將會得到硬件的加速支持。
本例中，QWidget和QGLWidget的繪圖，并且QWidget還抗鋸齒，QGLWidget如果硬件支持，也能抗鋸齒。

?

Overview

這里使用了QGLWidget和QWidget描繪的界面進行對比，并且，這個對比很直觀，就放在旁邊，這里使用Helper類去畫相同的畫面。

?

Helper Class Definition

在這個例子，為了描繪相同的動畫效果，用了Helper類去畫相同的功能。
Helper類：

class Helper{public:Helper();public:void paint(QPainter *painter, QPaintEvent *event, int elapsed);private:QBrush background;QBrush circleBrush;QFont textFont;QPen circlePen;QPen textPen;};

除了構造函數，helper類還提供了painter函數去畫東西。

?

Helper Class Implementation

構造函數的作用是初始化各個變量。

Helper::Helper(){QLinearGradient gradient(QPointF(50, -20), QPointF(80, 20));gradient.setColorAt(0.0, Qt::white);gradient.setColorAt(1.0, QColor(0xa6, 0xce, 0x39));background = QBrush(QColor(64, 32, 64));circleBrush = QBrush(gradient);circlePen = QPen(Qt::black);circlePen.setWidth(1);textPen = QPen(Qt::white);textFont.setPixelSize(50);}

繪制在paint()函數中使用QPainter類去在設備上畫圖。QPaintEvent提供了繪制區域的問題。

void Helper::paint(QPainter *painter, QPaintEvent *event, int elapsed){painter->fillRect(event->rect(), background);painter->translate(100, 100);

在轉換坐標前，首先填充下painter的區域，這樣其余的畫圖都會從被轉換坐標開始。
畫一個螺旋，指定時間做指定的動作，讓看的人感覺它是向外旋轉。

painter->save();painter->setBrush(circleBrush);painter->setPen(circlePen);painter->rotate(elapsed * 0.030);qreal r = elapsed / 1000.0;int n = 30;for (int i = 0; i < n; ++i) {painter->rotate(30);qreal factor = (i + r) / n;qreal radius = 0 + 120.0 * factor;qreal circleRadius = 1 + factor * 20;painter->drawEllipse(QRectF(radius, -circleRadius,circleRadius * 2, circleRadius * 2));}painter->restore();

在這個坐標系統中旋轉了很多次，所以調用save()在讓其復原，調用restore()。

painter->setPen(textPen);painter->setFont(textFont);painter->drawText(QRect(-50, -50, 100, 100), Qt::AlignCenter, QStringLiteral("Qt"));}

?

Widget Class Definition

Widget使用helper類去繪畫

class Helper;class Widget : public QWidget{Q_OBJECTpublic:Widget(Helper *helper, QWidget *parent);public slots:void animate();protected:void paintEvent(QPaintEvent *event) override;private:Helper *helper;int elapsed;};

除了構造函數，還有paintEvent()函數，elapsed用于記錄上次更新時間。

?

Widget Class Implementation

構造函數初始化各個成員。

Widget::Widget(Helper *helper, QWidget *parent): QWidget(parent), helper(helper){elapsed = 0;setFixedSize(200, 200);}

animate()槽函數在任一時間被調用。

void Widget::animate(){elapsed = (elapsed + qobject_cast<QTimer*>(sender())->interval()) % 1000;update();}

在paintEvent()中調用Helper類實現重繪。

void Widget::paintEvent(QPaintEvent *event){QPainter painter;painter.begin(this);painter.setRenderHint(QPainter::Antialiasing);helper->paint(&painter, event, elapsed);painter.end();}

?

GLWidget Class Definition

GLWidget用于展示OpenGL繪圖界面。

class Helper;class GLWidget : public QOpenGLWidget{Q_OBJECTpublic:GLWidget(Helper *helper, QWidget *parent);public slots:void animate();protected:void paintEvent(QPaintEvent *event) override;private:Helper *helper;int elapsed;};

Helper類繪圖，elapsed記錄上一次更新的時間。

?

GLWidget Class Implementation

構造函數與Widget的構造函數是有差異的。

GLWidget::GLWidget(Helper *helper, QWidget *parent): QOpenGLWidget(parent), helper(helper){elapsed = 0;setFixedSize(200, 200);setAutoFillBackground(false);}

QGL::SampleBuffers這個標識可以設置OpenGL抗鋸齒，如果系統沒有OpenGLDriver話是開啟不成功的。可以設置OpenGL抗鋸齒，如果系統沒有OpenGLDriver話是開啟不成功的。
animate()和widget一樣。

void GLWidget::animate(){elapsed = (elapsed + qobject_cast<QTimer*>(sender())->interval()) % 1000;update();}

paintEvent()和widget一樣。

void GLWidget::paintEvent(QPaintEvent *event){QPainter painter;painter.begin(this);painter.setRenderHint(QPainter::Antialiasing);helper->paint(&painter, event, elapsed);painter.end();}

?

Window Class Definition

window類：

class Window : public QWidget{Q_OBJECTpublic:Window();private:Helper helper;};

包含一個Helper用于傳給上面的兩個界面。

?

Window Class Implementation

構造函數初始化，構造界面，以及布局：

Window::Window(){setWindowTitle(tr("2D Painting on Native and OpenGL Widgets"));Widget *native = new Widget(&helper, this);GLWidget *openGL = new GLWidget(&helper, this);QLabel *nativeLabel = new QLabel(tr("Native"));nativeLabel->setAlignment(Qt::AlignHCenter);QLabel *openGLLabel = new QLabel(tr("OpenGL"));openGLLabel->setAlignment(Qt::AlignHCenter);QGridLayout *layout = new QGridLayout;layout->addWidget(native, 0, 0);layout->addWidget(openGL, 0, 1);layout->addWidget(nativeLabel, 1, 0);layout->addWidget(openGLLabel, 1, 1);setLayout(layout);QTimer *timer = new QTimer(this);connect(timer, &QTimer::timeout, native, &Widget::animate);connect(timer, &QTimer::timeout, openGL, &GLWidget::animate);timer->start(50);}

每50毫秒重繪一下，大約每秒20幀。

總結

以上是生活随笔為你收集整理的Qt文档阅读笔记-官方2D Painting Example实例解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。