使用Qt繪製多邊形

02-03

今天給大家簡單介紹下Qt的繪圖系統。

1 QPainter、QPaintDevice和QPaintEngine

Qt二維繪圖系統，主要由三部分組成，QPainter、QPaintDevice和QPaintEngine類。

QPainter是一個繪圖類，可以理解為現實中的畫家，用戶可以為這個畫家指定畫筆，畫刷，讓他為我們繪畫矩形，圓形乃至更複雜的圖形。
QPaintDevice是一個二維空間的抽象，比如QWidget就是繼承該類的，所以凡是繼承自QWidget的類，都可以讓QPainter這個畫家為你作畫，該類可對比現實中的畫板。
QPaintEngine可以認為它為QPainter和QPaintDevice之間提供了中間層介面，所以QPainter才可以在很多不同的設備之間使用同樣的介面進行繪畫，QPaintEngine類由QPainter和QPaintDevice在內部使用，一般不需要我們關注。

2 繪製多邊形

Qt繪圖，需要重新實現

void paintEvent(QPaintEvent* e);n

在函數體中使用QPainter繪圖。

下面，我們新建GUI項目PolygonGraph，繼承自QWidget，類名為PolygonGraph，不需要勾選「創建ui界面」。

本例中繪製了一個六邊形，並為每條邊對應的區塊填充了顏色。

polygongraph.h

#ifndef POLYGONGRAPH_Hn#define POLYGONGRAPH_Hn#include <QWidget>nclass PolygonGraph : public QWidgetn{n Q_OBJECTnpublic:n PolygonGraph(QWidget *parent = 0);n ~PolygonGraph();nprotected:n //在保護成員中，重寫paintEventn void paintEvent(QPaintEvent* e);n};n#endif // POLYGONGRAPH_Hn

polygongraph.cpp

#include <QtMath>n#include <QPainter>n#include "polygongraph.h"nnPolygonGraph::PolygonGraph(QWidget *parent)n : QWidget(parent)n{n}nnPolygonGraph::~PolygonGraph()n{n}nnvoid PolygonGraph::paintEvent(QPaintEvent *e)n{n /*n * 繪製多邊形本例中直接寫的六邊形n * int count 多邊形的邊數n * float radius 多邊形半徑n */n int count = 6;n int radius = 100;nn /*n * 注意：n * 在使用QPainter繪圖之前，必須先指定繪圖設備。n * 下方指定的是在本窗口中繪製。n * 如果沒有指定繪圖設備，則在之後的繪圖中將無效。n * 指定繪圖設備的方法還可以使用begin() end()組合。n * QPainter在同一時刻，只能在一個設備上繪製，如果將其切換至另一個設備，將是無效的。n */n QPainter painter(this);nn //設置為抗鋸齒,並且設置畫筆顏色為淺灰n painter.setRenderHint(QPainter::Antialiasing);n painter.setPen(Qt::lightGray);nn /*n * 繪圖設備的坐標原點(0,0)在左上角，水平向右增長，垂直向下增長。n * 首先先平移坐標原點，讓原點在繪圖設備的中心n */n painter.translate(width()/2., height()/2.);nn //開始繪製多邊形，並為每個區塊上色n for (int i = 0; i < count; ++i)n {n //設中心點到邊的垂線與半徑的夾角為degree=(360/count)/2即：n float degree = 180./count;nn //先將坐標進行旋轉，然後再繪製n painter.rotate(2 * degree);nn //設邊長的一半為wid,則wid = radius*sin(degree)n //原點到邊的距離為hei，則hei = radius*cos(degree)n //在程序中三角函數都是以弧度為基準，所以要先將角度轉化成弧度。n //頭文件要包含QtMathn float radian = qDegreesToRadians(degree);n float wid = radius * qSin(radian);n float hei = radius * qCos(radian);nn //繪製該三角區塊n QPainterPath path;n path.lineTo(-wid, -hei);n path.lineTo(wid, -hei);n path.lineTo(0, 0);n painter.drawPath(path);nn //隨機生成一個顏色，作為該區塊的顏色，並上色n QColor color(qrand()%255, qrand()%255, qrand()%255, 150);n painter.fillPath(path, color);n }n}n

現在編譯運行程序：

當我們改變窗口大小，切換進程都會發現圖中的顏色發生變化，這是因為都會調用paintEvent進行重繪。

好的，今天的分享就到這裡了，可能有些小夥伴對於程序中的坐標平移，旋轉不是很明白，下篇文章，小豆君會詳細講解Qt的繪圖的矩陣變換，敬請關注。

如果你想要獲得更多乾貨，可關注我的微信公眾號：小豆君，關注後還可加入C++Qt交流群，一起學習。