734
[Qt教程] 第11篇 2D繪圖（一）繪製簡單圖形
樓主
發表於 2013-4-23 12:52:35 | 查看:
1398| 回複: 5
發表於 2013-4-23 12:52:35 | 查看:
1398| 回複: 5|
繪製簡單圖形
版權聲明
該文章原創於Qter開源社區，作者yafeilinux，轉載請注明出處！
導語
Qt中提供了強大的2D繪圖係統，可以使用相同的API在屏幕和繪圖設備上進行繪製，它主要基於QPainter、QPaintDevice和QPaintEngine這三個類。其中QPainter用來執行繪圖操作；QPaintDevice提供繪圖設備，它是一個二維空間的抽象，可以使用QPainter在其上進行繪製；QPaintEngine提供了一些接口，可以用於QPainter在不同的設備上進行繪製。
在繪圖係統中由QPainter來完成具體的繪製操作，QPainter類提供了大量高度優化的函數來完成GUI編程所需要的大部分繪製工作。QPainter可以繪製一切想要的圖形，從最簡單的一條直線到其他任何複雜的圖形，它還可以用來繪製文本和圖片。QPainter可以在繼承自QPaintDevice類的任何對象上進行繪製操作。
QPainter一般在一個部件的重繪事件（Paint Event）的處理函數paintEvent()中進行繪製，首先要創建QPainter對象，然後進行圖形的繪製，最後銷毀QPainter對象。
環境：Windows Xp + Qt 4.8.4+QtCreator 2.6.2
目錄
一、繪製一條直線
二、畫筆和畫刷
三、繪製弧線
正文
一、繪製一條直線
1.新建Qt Gui應用，項目名稱為painter_1，類信息界麵不用修改，即類名為MainWindow，基類為QMainWindow。
2.在mainwindow.h文件中添加重繪事件處理函數的聲明：
protected:
void paintEvent(QPaintEvent *);
所有的繪製操作都要在這個函數裏麵完成。
3.下麵到mainwindow.cpp文件中先需要添加頭文件包含：
#include <QPainter>
然後添加該函數的定義：
void MainWindow::paintEvent(QPaintEvent *)
{
QPainter painter(this);
painter.drawLine(QPointF(0, 0), QPointF(100, 100));
}
這裏首先為該部件創建了一個QPainter對象，用於後麵的繪製。然後使用drawLine()函數繪製了一條線段，線段的起點為(0,
0)，終點為(100, 100) ，這裏的單位是像素。效果如下圖所示。
可以看到，在Qt窗口裏麵，(0, 0)點就是窗口的左上角，但這裏是不包含外邊框的。而在MainWindow主窗口裏麵繪製時，左上角並不是指中心區域的左上角，而是包含了工具欄。
4.我們將光標定位到QPainter類名上，然後按下鍵盤上的F1按鍵，這時會自動跳轉到該類的幫助頁麵。當然，也可以到幫助模式，直接索引查找該類名。在幫助裏麵我們可以看到很多相關的繪製函數，如下圖所示。
 5.我們任意點擊一個函數名，就會跳轉到該函數的介紹段落。例如我們點擊drawEllipse()函數，就跳轉到了該函數的介紹處，上麵還提供了一個例子。如下圖所示。我們可以直接將例子裏麵的代碼複製到paintEvent()函數裏麵，測試效果。
 二、畫筆和畫刷
1.我們先將paintEvent()函數的內容更改如下：
void MainWindow::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPen pen; //畫筆
pen.setColor(QColor(255, 0, 0));
QBrush brush(QColor(0, 255, 0, 125)); //畫刷
painter.setPen(pen); //添加畫筆
painter.setBrush(brush); //添加畫刷
painter.drawRect(50, 50, 200, 100); //繪製矩形
}
這裏分別新建了一個畫筆QPen，和畫刷QBrush。其中畫筆使用了setColor()函數為其設置了顏色，而畫刷是在構建的時候直接為其設置的顏色。這裏的顏色都是使用的QColor類提供的，裏麵如果是三個參數，那麼分別是紅、綠、藍分量的值，也就是經常說的rgb，取值範圍都是0-255，比如這裏的(255,
0, 0)就表明紅色分量為255，其他分量為0，那麼出來就是紅色。如果是四個參數，最後一個參數alpha是設置透明度的，取值範圍也是0-255,0表示完全透明，而255表示完全不透明。
然後我們將畫筆和畫刷設置到了painter上，並使用drawRect()繪製了一個矩形，其左上角頂點在(50,
50)，寬為200，高為100。運行程序，效果如下圖所示。
2.畫筆還有許多其他的設置，可以查看該類的幫助文檔。例如，可以使用pen.setStyle()來設置畫筆樣式，可用的畫筆樣式如下圖所示。
 3.畫刷也有很多其他設置，這個也可以查看其幫助文檔。在Qt中為畫刷提供了一些可用的樣式，可以使用setStyle()函數來設置。如下圖所示。
 這裏麵包含了漸變填充效果，這個會在下一節講到。
4.下麵我們寫一個簡單的例子演示一下。將paintEvent()函數更改如下：
void MainWindow::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPen pen(Qt::DotLine);
QBrush brush(Qt::blue);
brush.setStyle(Qt::HorPattern);
painter.setPen(pen);
painter.setBrush(brush);
painter.drawRect(50,50,200,200);
}
這裏的顏色使用了Qt預定義的顏色，可以在幫助中索引Qt::GlobalColor關鍵字查看。如下圖所示。
 現在運行程序，效果如下圖所示。
 三、繪製弧線
為了幫助大家學習，這裏再舉一個繪製弧線的例子，其實在幫助文檔中已經給出了這個例子。如下圖所示。
我們將paintEvent()函數更改如下：
void MainWindow::paintEvent(QPaintEvent *)
{
QRectF rectangle(10.0, 20.0, 80.0, 60.0); //矩形
int startAngle = 30 * 16;
//起始角度
int spanAngle = 120 * 16;
//跨越度數
QPainter painter(this);
painter.drawArc(rectangle, startAngle, spanAngle);
}
這裏要說明的是，畫弧線時，角度被分成了十六分之一，就是說，要想為30度，就得是30*16。它有起始角度和跨度，還有位置矩形，要想畫出自己想要的弧線，就要有一定的幾何知識了。這裏就不再祥述。結語
這一節我們隻是簡單介紹了一下怎麼使用QPainter在窗口界麵上進行繪製，還涉及到了畫筆、畫刷，以及使用幫助文檔的一些內容。如果要更加係統、詳細的學習這些基礎知識，可以查看《Qt
Creator快速入門》的第10章。
|
最後更新：2017-04-03 14:54:08