Qt5 中的繪圖 · ZetCode 中文系列教程

# Qt5 中的繪圖 > 原文： [http://zetcode.com/gui/qt5/painting/](http://zetcode.com/gui/qt5/painting/) 在 Qt5 C++ 編程教程的這一部分中，我們將進行繪圖。當我們在 Qt5 中進行繪圖時，`QPainter`類非常有用。對`paintEvent()`方法的反應是使用`QPainter`類完成的。 ## 直線在第一個示例中，我們將在窗口的客戶區域上繪制一些線。 `lines.h` ```cpp #pragma once #include <QWidget> class Lines : public QWidget { public: Lines(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *event); void drawLines(QPainter *qp); }; ``` 這是頭文件。 `lines.cpp` ```cpp #include <QPainter> #include "lines.h" Lines::Lines(QWidget *parent) : QWidget(parent) { } void Lines::paintEvent(QPaintEvent *e) { Q_UNUSED(e); QPainter qp(this); drawLines(&qp); } void Lines::drawLines(QPainter *qp) { QPen pen(Qt::black, 2, Qt::SolidLine); qp->setPen(pen); qp->drawLine(20, 40, 250, 40); pen.setStyle(Qt::DashLine); qp->setPen(pen); qp->drawLine(20, 80, 250, 80); pen.setStyle(Qt::DashDotLine); qp->setPen(pen); qp->drawLine(20, 120, 250, 120); pen.setStyle(Qt::DotLine); qp->setPen(pen); qp->drawLine(20, 160, 250, 160); pen.setStyle(Qt::DashDotDotLine); qp->setPen(pen); qp->drawLine(20, 200, 250, 200); QVector<qreal> dashes; qreal space = 4; dashes << 1 << space << 5 << space; pen.setStyle(Qt::CustomDashLine); pen.setDashPattern(dashes); qp->setPen(pen); qp->drawLine(20, 240, 250, 240); } ``` 我們在窗口上畫了六行；每條線都有不同的筆樣式。 ```cpp void Lines::paintEvent(QPaintEvent *e) { Q_UNUSED(e); QPainter qp(this); drawLines(&qp); } ``` 更新小部件時將調用`paintEvent()`。在這里我們創建`QPainter`對象并進行繪制。由于我們不使用`QPaintEvent`對象，因此可以通過`Q_UNUSED`宏來抑制編譯器警告。實際圖形委托給`drawLines()`方法。 ```cpp QPen pen(Qt::black, 2, Qt::SolidLine); qp->setPen(pen); ``` 我們創建一個`QPen`對象。筆是實心的，2px 粗，是黑色的。筆用于繪制線條和形狀輪廓。使用`setPen()`方法將筆設置為畫家對象。 ```cpp qp->drawLine(20, 40, 250, 40); ``` `drawLine()`方法畫一條線。四個參數是窗口上兩個點的坐標。 ```cpp pen.setStyle(Qt::DashLine); ``` `QPen`行的`setStyle()`方法設置筆樣式-`Qt::DashLine`。 `main.cpp` ```cpp #include <QApplication> #include "lines.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Lines window; window.resize(280, 270); window.setWindowTitle("Lines"); window.show(); return app.exec(); } ``` 這是主文件。 ![Lines](https://img.kancloud.cn/44/ea/44eab3dfba9db34ce97afb45ab7647a3_282x296.jpg) 圖：直線 ## 顏色顏色是代表紅色，綠色和藍色（RGB）強度值的組合的對象。有效的 RGB 值在 0 到 255 之間。在下面的示例中，我們繪制了九個矩形，其中填充了九種不同的顏色。 `colours.h` ```cpp #pragma once #include <QWidget> class Colours : public QWidget { public: Colours(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *e); private: void doPainting(); }; ``` 這是頭文件。 `colours.cpp` ```cpp #include <QPainter> #include "colours.h" Colours::Colours(QWidget *parent) : QWidget(parent) { } void Colours::paintEvent(QPaintEvent *e) { Q_UNUSED(e); doPainting(); } void Colours::doPainting() { QPainter painter(this); painter.setPen(QColor("#d4d4d4")); painter.setBrush(QBrush("#c56c00")); painter.drawRect(10, 15, 90, 60); painter.setBrush(QBrush("#1ac500")); painter.drawRect(130, 15, 90, 60); painter.setBrush(QBrush("#539e47")); painter.drawRect(250, 15, 90, 60); painter.setBrush(QBrush("#004fc5")); painter.drawRect(10, 105, 90, 60); painter.setBrush(QBrush("#c50024")); painter.drawRect(130, 105, 90, 60); painter.setBrush(QBrush("#9e4757")); painter.drawRect(250, 105, 90, 60); painter.setBrush(QBrush("#5f3b00")); painter.drawRect(10, 195, 90, 60); painter.setBrush(QBrush("#4c4c4c")); painter.drawRect(130, 195, 90, 60); painter.setBrush(QBrush("#785f36")); painter.drawRect(250, 195, 90, 60); } ``` 我們繪制九個不同顏色填充的矩形。矩形的輪廓是灰色的。 ```cpp painter.setBrush(QBrush("#c56c00")); painter.drawRect(10, 15, 90, 60); ``` `QBrush`類定義`QPainter`繪制的形狀的填充圖案。 `drawRect()`方法繪制一個矩形。它繪制一個矩形，其左上角位于 x，y 點，并具有給定的寬度和高度。我們使用十六進制表示法來指定顏色值。 `main.cpp` ```cpp #include <QApplication> #include "colours.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Colours window; window.resize(360, 280); window.setWindowTitle("Colours"); window.show(); return app.exec(); } ``` 這是主文件。 ![Colours](https://img.kancloud.cn/6d/df/6ddf3e298af77cb6569f31d4fcd6039e_362x306.jpg) 圖：顏色 ## 圖案以下編程代碼示例與上一個示例相似。這次我們用各種預定義的圖案填充矩形。 `patterns.h` ```cpp #pragma once #include <QWidget> class Patterns : public QWidget { public: Patterns(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *e); private: void doPainting(); }; ``` 這是頭文件。 `patterns.cpp` ```cpp #include <QApplication> #include <QPainter> #include "patterns.h" Patterns::Patterns(QWidget *parent) : QWidget(parent) { } void Patterns::paintEvent(QPaintEvent *e) { Q_UNUSED(e); doPainting(); } void Patterns::doPainting() { QPainter painter(this); painter.setPen(Qt::NoPen); painter.setBrush(Qt::HorPattern); painter.drawRect(10, 15, 90, 60); painter.setBrush(Qt::VerPattern); painter.drawRect(130, 15, 90, 60); painter.setBrush(Qt::CrossPattern); painter.drawRect(250, 15, 90, 60); painter.setBrush(Qt::Dense7Pattern); painter.drawRect(10, 105, 90, 60); painter.setBrush(Qt::Dense6Pattern); painter.drawRect(130, 105, 90, 60); painter.setBrush(Qt::Dense5Pattern); painter.drawRect(250, 105, 90, 60); painter.setBrush(Qt::BDiagPattern); painter.drawRect(10, 195, 90, 60); painter.setBrush(Qt::FDiagPattern); painter.drawRect(130, 195, 90, 60); painter.setBrush(Qt::DiagCrossPattern); painter.drawRect(250, 195, 90, 60); } ``` 我們用各種畫筆圖案繪制了九個矩形。 ```cpp painter.setBrush(Qt::HorPattern); painter.drawRect(10, 15, 90, 60); ``` 我們繪制具有特定圖案的矩形。 `Qt::HorPattern`是用于創建水平線條圖案的常數。 `main.cpp` ```cpp #include <QDesktopWidget> #include <QApplication> #include "patterns.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Patterns window; window.resize(350, 280); window.setWindowTitle("Patterns"); window.show(); return app.exec(); } ``` 這是主文件。 ![Patterns](https://img.kancloud.cn/a8/90/a890939fbd2c2c2b10e92a9700606d88_352x306.jpg) 圖：圖案 ## 透明矩形透明性是指能夠透視材料的質量。了解透明度的最簡單方法是想象一塊玻璃或水。從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。在計算機圖形學中，我們可以使用 alpha 合成來實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。合成過程使用 Alpha 通道。 `transparent_rectangles.h` ```cpp #pragma once #include <QWidget> class TransparentRectangles : public QWidget { public: TransparentRectangles(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *event); void doPainting(); }; ``` 這是頭文件。 `transparent_rectangles.cpp` ```cpp #include <QApplication> #include <QPainter> #include <QPainterPath> #include "transparent_rectangles.h" TransparentRectangles::TransparentRectangles(QWidget *parent) : QWidget(parent) { } void TransparentRectangles::paintEvent(QPaintEvent *e) { Q_UNUSED(e); doPainting(); } void TransparentRectangles::doPainting() { QPainter painter(this); for (int i=1; i<=11; i++) { painter.setOpacity(i*0.1); painter.fillRect(50*i, 20, 40, 40, Qt::darkGray); } } ``` 該示例繪制了十個透明度不同的矩形。 ```cpp painter.setOpacity(i*0.1); ``` `setOpacity()`方法設置畫家的不透明度。該值應在 0.0 到 1.0 的范圍內，其中 0.0 是完全透明的，而 1.0 是完全不透明的。 `main.cpp` ```cpp #include <QDesktopWidget> #include <QApplication> #include "transparent_rectangles.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); TransparentRectangles window; window.resize(630, 90); window.setWindowTitle("Transparent rectangles"); window.show(); return app.exec(); } ``` 這是主文件。 ![Transparent rectangles](https://img.kancloud.cn/a3/28/a328d03b1d03446aa41adbed879605fa_632x116.jpg) 圖：透明矩形 ## 甜甜圈在下面的示例中，我們將創建一個甜甜圈形狀。 `donut.h` ```cpp #pragma once #include <QWidget> class Donut : public QWidget { public: Donut(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *e); private: void doPainting(); }; ``` 這是頭文件。 `donut.cpp` ```cpp #include <QApplication> #include <QPainter> #include "donut.h" Donut::Donut(QWidget *parent) : QWidget(parent) { } void Donut::paintEvent(QPaintEvent *e) { Q_UNUSED(e); doPainting(); } void Donut::doPainting() { QPainter painter(this); painter.setPen(QPen(QBrush("#535353"), 0.5)); painter.setRenderHint(QPainter::Antialiasing); int h = height(); int w = width(); painter.translate(QPoint(w/2, h/2)); for (qreal rot=0; rot < 360.0; rot+=5.0 ) { painter.drawEllipse(-125, -40, 250, 80); painter.rotate(5.0); } } ``` “甜甜圈”是類似于此類食物的高級幾何形狀。我們通過繪制 72 個旋轉橢圓來創建它。 ```cpp painter.setRenderHint(QPainter::Antialiasing); ``` 我們將以抗鋸齒模式繪制。渲染將具有更高的質量。 ```cpp int h = height(); int w = width(); painter.translate(QPoint(w/2, h/2)); ``` 這些行將坐標系的起點移到窗口的中間。默認情況下，它位于 0、0 點。換句話說，在窗口的左上角。通過移動坐標系，繪圖會容易得多。 ```cpp for (qreal rot=0; rot < 360.0; rot+=5.0 ) { painter.drawEllipse(-125, -40, 250, 80); painter.rotate(5.0); } ``` 在此循環中，我們繪制了 72 個旋轉的橢圓。 `main.cpp` ```cpp #include <QDesktopWidget> #include <QApplication> #include "donut.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Donut window; window.resize(350, 280); window.setWindowTitle("Donut"); window.show(); return app.exec(); } ``` 這是主文件。 ## 形狀 Qt5 繪圖 API 可以繪制各種形狀。以下編程代碼示例顯示了其中一些。 `shapes.h` ```cpp #pragma once #include <QWidget> class Shapes : public QWidget { public: Shapes(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *e); private: void doPainting(); }; ``` 這是頭文件。 `shapes.cpp` ```cpp #include <QApplication> #include <QPainter> #include <QPainterPath> #include "shapes.h" Shapes::Shapes(QWidget *parent) : QWidget(parent) { } void Shapes::paintEvent(QPaintEvent *e) { Q_UNUSED(e); doPainting(); } void Shapes::doPainting() { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); painter.setPen(QPen(QBrush("#888"), 1)); painter.setBrush(QBrush(QColor("#888"))); QPainterPath path1; path1.moveTo(5, 5); path1.cubicTo(40, 5, 50, 50, 99, 99); path1.cubicTo(5, 99, 50, 50, 5, 5); painter.drawPath(path1); painter.drawPie(130, 20, 90, 60, 30*16, 120*16); painter.drawChord(240, 30, 90, 60, 0, 16*180); painter.drawRoundRect(20, 120, 80, 50); QPolygon polygon({QPoint(130, 140), QPoint(180, 170), QPoint(180, 140), QPoint(220, 110), QPoint(140, 100)}); painter.drawPolygon(polygon); painter.drawRect(250, 110, 60, 60); QPointF baseline(20, 250); QFont font("Georgia", 55); QPainterPath path2; path2.addText(baseline, font, "Q"); painter.drawPath(path2); painter.drawEllipse(140, 200, 60, 60); painter.drawEllipse(240, 200, 90, 60); } ``` 我們繪制了九種不同的形狀。 ```cpp QPainterPath path1; path1.moveTo(5, 5); path1.cubicTo(40, 5, 50, 50, 99, 99); path1.cubicTo(5, 99, 50, 50, 5, 5); painter.drawPath(path1); ``` `QPainterPath`是用于創建復雜形狀的對象。我們用它來繪制貝塞爾曲線。 ```cpp painter.drawPie(130, 20, 90, 60, 30*16, 120*16); painter.drawChord(240, 30, 90, 60, 0, 16*180); painter.drawRoundRect(20, 120, 80, 50); ``` 這些代碼行繪制了一個餅圖，一個和弦和一個圓角矩形。 ```cpp QPolygon polygon({QPoint(130, 140), QPoint(180, 170), QPoint(180, 140), QPoint(220, 110), QPoint(140, 100)}); painter.drawPolygon(polygon); ``` 在這里，我們使用`drawPolygon()`方法繪制一個多邊形。多邊形由五個點組成。 ```cpp QPointF baseline(20, 250); QFont font("Georgia", 55); QPainterPath path2; path2.addText(baseline, font, "Q"); painter.drawPath(path2); ``` Qt5 允許基于字體字符創建路徑。 ```cpp painter.drawEllipse(140, 200, 60, 60); painter.drawEllipse(240, 200, 90, 60); ``` `drawEllipse()`也會繪制一個橢圓和一個圓。圓是橢圓的特例。參數是矩形起點的 x 和 y 坐標以及橢圓邊界矩形的寬度和高度。 `main.cpp` ```cpp #include <QDesktopWidget> #include <QApplication> #include "shapes.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Shapes window; window.resize(350, 280); window.setWindowTitle("Shapes"); window.show(); return app.exec(); } ``` 這是示例的主文件。 ![Shapes](https://img.kancloud.cn/98/a4/98a4e5541a1e6ee528375c5776740f54_352x306.jpg) 圖：形狀 ## 漸變在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。在 2D 繪圖程序和繪圖程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。以下代碼示例顯示了如何創建線性漸變。 `linear_gradients.h` ```cpp #pragma once #include <QWidget> class LinearGradients : public QWidget { public: LinearGradients(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *e); private: void doPainting(); }; ``` 這是頭文件。 `linear_gradients.cpp` ```cpp #include <QApplication> #include <QPainter> #include "linear_gradients.h" LinearGradients::LinearGradients(QWidget *parent) : QWidget(parent) { } void LinearGradients::paintEvent(QPaintEvent *e) { Q_UNUSED(e); doPainting(); } void LinearGradients::doPainting() { QPainter painter(this); QLinearGradient grad1(0, 20, 0, 110); grad1.setColorAt(0.1, Qt::black); grad1.setColorAt(0.5, Qt::yellow); grad1.setColorAt(0.9, Qt::black); painter.fillRect(20, 20, 300, 90, grad1); QLinearGradient grad2(0, 55, 250, 0); grad2.setColorAt(0.2, Qt::black); grad2.setColorAt(0.5, Qt::red); grad2.setColorAt(0.8, Qt::black); painter.fillRect(20, 140, 300, 100, grad2); } ``` 在代碼示例中，我們繪制了兩個矩形，并用線性漸變填充它們。 ```cpp QLinearGradient grad1(0, 20, 0, 110); ``` `QLinearGradient`構造線性漸變，并在兩個點之間作為參數提供插值區域。 ```cpp grad1.setColorAt(0.1, Qt::black); grad1.setColorAt(0.5, Qt::yellow); grad1.setColorAt(0.9, Qt::black); ``` 使用停止點定義漸變中的顏色。 `setColorAt()`在給定位置以給定顏色創建一個停止點。 ```cpp painter.fillRect(20, 20, 300, 90, grad1); ``` 我們用漸變填充矩形。 `main.cpp` ```cpp #include <QApplication> #include "linear_gradients.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); LinearGradients window; window.resize(350, 260); window.setWindowTitle("Linear gradients"); window.show(); return app.exec(); } ``` 這是主文件。 ![Linear gradients](https://img.kancloud.cn/79/22/792288b280e640a424e575a3784b8542_352x286.jpg) 圖：線性漸變 ## 徑向漸變徑向漸變是兩個圓之間顏色或陰影的混合。 `radial_gradient.h` ```cpp #pragma once #include <QWidget> class RadialGradient : public QWidget { public: RadialGradient(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *e); private: void doPainting(); }; ``` 這是頭文件。 `radial_gradient.cpp` ```cpp #include <QApplication> #include <QPainter> #include "radial_gradient.h" RadialGradient::RadialGradient(QWidget *parent) : QWidget(parent) { } void RadialGradient::paintEvent(QPaintEvent *e) { Q_UNUSED(e); doPainting(); } void RadialGradient::doPainting() { QPainter painter(this); int h = height(); int w = width(); QRadialGradient grad1(w/2, h/2, 80); grad1.setColorAt(0, QColor("#032E91")); grad1.setColorAt(0.3, Qt::white); grad1.setColorAt(1, QColor("#032E91")); painter.fillRect(0, 0, w, h, grad1); } ``` 該示例創建了一個徑向漸變；漸變從窗口的中心擴散。 ```cpp QRadialGradient grad1(w/2, h/2, 80); ``` `QRadialGradient`創建一個徑向漸變；它在焦點和圍繞它的圓上的端點之間插入顏色。參數是圓心和半徑的坐標。焦點位于圓的中心。 ```cpp grad1.setColorAt(0, QColor("#032E91")); grad1.setColorAt(0.3, Qt::white); grad1.setColorAt(1, QColor("#032E91")); ``` `setColorAt()`方法定義彩色擋塊。 ```cpp painter.fillRect(0, 0, w, h, grad1); ``` 窗口的整個區域都充滿了徑向漸變。 `main.cpp` ```cpp #include <QApplication> #include "radial_gradient.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); RadialGradient window; window.resize(300, 250); window.setWindowTitle("Radial gradient"); window.show(); return app.exec(); } ``` 這是主文件。 ![Radial gradient](https://img.kancloud.cn/c2/56/c25661da09bbca56ca51f7e40871e21e_302x276.jpg) 圖：徑向漸變 ## 泡泡在本 C++ Qt5 教程章節的最后一個示例中，我們創建一個泡泡效果。該示例顯示一個不斷增長的居中文本，該文本從某個點逐漸淡出。這是一種非常常見的效果，您通常可以在網絡上的 Flash 動畫中看到這種效果。 `puff.h` ```cpp #pragma once #include <QWidget> class Puff : public QWidget { public: Puff(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *event); void timerEvent(QTimerEvent *event); private: int x; qreal opacity; int timerId; void doPainting(); }; ``` 在頭文件中，我們定義了兩個事件處理器：繪圖事件處理器和計時器處理器。 `puff.cpp` ```cpp #include <QPainter> #include <QTimer> #include <QTextStream> #include "puff.h" Puff::Puff(QWidget *parent) : QWidget(parent) { x = 1; opacity = 1.0; timerId = startTimer(15); } void Puff::paintEvent(QPaintEvent *e) { Q_UNUSED(e); doPainting(); } void Puff::doPainting() { QPainter painter(this); QTextStream out(stdout); QString text = "ZetCode"; painter.setPen(QPen(QBrush("#575555"), 1)); QFont font("Courier", x, QFont::DemiBold); QFontMetrics fm(font); int textWidth = fm.width(text); painter.setFont(font); if (x > 10) { opacity -= 0.01; painter.setOpacity(opacity); } if (opacity <= 0) { killTimer(timerId); out << "timer stopped" << endl; } int h = height(); int w = width(); painter.translate(QPoint(w/2, h/2)); painter.drawText(-textWidth/2, 0, text); } void Puff::timerEvent(QTimerEvent *e) { Q_UNUSED(e); x += 1; repaint(); } ``` 這是`puff.cpp`文件。 ```cpp Puff::Puff(QWidget *parent) : QWidget(parent) { x = 1; opacity = 1.0; timerId = startTimer(15); } ``` 在構造器中，我們啟動計時器。每 15ms 會生成一個計時器事件。 ```cpp void Puff::timerEvent(QTimerEvent *e) { Q_UNUSED(e); x += 1; repaint(); } ``` 在`timerEvent()`內，我們增加字體大小并重新繪制小部件。 ```cpp if (x > 10) { opacity -= 0.01; painter.setOpacity(opacity); } ``` 如果字體大小大于 10 磅，我們將逐漸降低不透明度；文字開始消失。 ```cpp if (opacity <= 0) { killTimer(timerId); out << "timer stopped" << endl; } ``` 如果文字完全消失，我們將殺死計時器。 `main.cpp` ```cpp #include <QApplication> #include "puff.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Puff window; window.resize(350, 280); window.setWindowTitle("Puff"); window.show(); return app.exec(); } ``` 這是主文件。本章是關于 Qt5 中的繪圖的。