[Qt教程]?第11篇 2D繪圖（一）繪制簡(jiǎn)單圖形

樓主 ?發(fā)表于 2013-4-23 12:52:35?|?查看: 1398|?回復(fù): 5

繪制簡(jiǎn)單圖形 版權(quán)聲明 該文章原創(chuàng)于Qter開源社區(qū)，作者yafeilinux，轉(zhuǎn)載請(qǐng)注明出處！ 導(dǎo)語(yǔ) Qt中提供了強(qiáng)大的2D繪圖系統(tǒng)，可以使用相同的API在屏幕和繪圖設(shè)備上進(jìn)行繪制，它主要基于QPainter、QPaintDevice和QPaintEngine這三個(gè)類。其中QPainter用來執(zhí)行繪圖操作；QPaintDevice提供繪圖設(shè)備，它是一個(gè)二維空間的抽象，可以使用QPainter在其上進(jìn)行繪制；QPaintEngine提供了一些接口，可以用于QPainter在不同的設(shè)備上進(jìn)行繪制。 在繪圖系統(tǒng)中由QPainter來完成具體的繪制操作，QPainter類提供了大量高度優(yōu)化的函數(shù)來完成GUI編程所需要的大部分繪制工作。QPainter可以繪制一切想要的圖形，從最簡(jiǎn)單的一條直線到其他任何復(fù)雜的圖形，它還可以用來繪制文本和圖片。QPainter可以在繼承自QPaintDevice類的任何對(duì)象上進(jìn)行繪制操作。 ? ?? ? QPainter一般在一個(gè)部件的重繪事件（Paint Event）的處理函數(shù)paintEvent()中進(jìn)行繪制，首先要?jiǎng)?chuàng)建QPainter對(duì)象，然后進(jìn)行圖形的繪制，最后銷毀QPainter對(duì)象。 環(huán)境：Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目錄 一、繪制一條直線 二、畫筆和畫刷 三、繪制弧線 正文 一、繪制一條直線 1.新建Qt Gui應(yīng)用，項(xiàng)目名稱為painter_1，類信息界面不用修改，即類名為MainWindow，基類為QMainWindow。 2.在mainwindow.h文件中添加重繪事件處理函數(shù)的聲明： protected: void?paintEvent(QPaintEvent *); 所有的繪制操作都要在這個(gè)函數(shù)里面完成。 3.下面到mainwindow.cpp文件中先需要添加頭文件包含： #include?<QPainter> 然后添加該函數(shù)的定義： void?MainWindow::paintEvent(QPaintEvent?*) { ? ??QPainter?painter(this); ? ??painter.drawLine(QPointF(0,?0),?QPointF(100,?100)); } 這里首先為該部件創(chuàng)建了一個(gè)QPainter對(duì)象，用于后面的繪制。然后使用drawLine()函數(shù)繪制了一條線段，線段的起點(diǎn)為(0, 0)，終點(diǎn)為(100, 100)?，這里的單位是像素。效果如下圖所示。 可以看到，在Qt窗口里面，(0, 0)點(diǎn)就是窗口的左上角，但這里是不包含外邊框的。而在MainWindow主窗口里面繪制時(shí)，左上角并不是指中心區(qū)域的左上角，而是包含了工具欄。 4.我們將光標(biāo)定位到QPainter類名上，然后按下鍵盤上的F1按鍵，這時(shí)會(huì)自動(dòng)跳轉(zhuǎn)到該類的幫助頁(yè)面。當(dāng)然，也可以到幫助模式，直接索引查找該類名。在幫助里面我們可以看到很多相關(guān)的繪制函數(shù)，如下圖所示。 5.我們?nèi)我恻c(diǎn)擊一個(gè)函數(shù)名，就會(huì)跳轉(zhuǎn)到該函數(shù)的介紹段落。例如我們點(diǎn)擊drawEllipse()函數(shù)，就跳轉(zhuǎn)到了該函數(shù)的介紹處，上面還提供了一個(gè)例子。如下圖所示。我們可以直接將例子里面的代碼復(fù)制到paintEvent()函數(shù)里面，測(cè)試效果。 二、畫筆和畫刷 1.我們先將paintEvent()函數(shù)的內(nèi)容更改如下： 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);?//繪制矩形 } ? ??這里分別新建了一個(gè)畫筆QPen，和畫刷QBrush。其中畫筆使用了setColor()函數(shù)為其設(shè)置了顏色，而畫刷是在構(gòu)建的時(shí)候直接為其設(shè)置的顏色。這里的顏色都是使用的QColor類提供的，里面如果是三個(gè)參數(shù)，那么分別是紅、綠、藍(lán)分量的值，也就是經(jīng)常說的rgb，取值范圍都是0-255，比如這里的(255, 0, 0)就表明紅色分量為255，其他分量為0，那么出來就是紅色。如果是四個(gè)參數(shù)，最后一個(gè)參數(shù)alpha是設(shè)置透明度的，取值范圍也是0-255,0表示完全透明，而255表示完全不透明。 ? ??然后我們將畫筆和畫刷設(shè)置到了painter上，并使用drawRect()繪制了一個(gè)矩形，其左上角頂點(diǎn)在(50, 50)，寬為200，高為100。運(yùn)行程序，效果如下圖所示。 2.畫筆還有許多其他的設(shè)置，可以查看該類的幫助文檔。例如，可以使用pen.setStyle()來設(shè)置畫筆樣式，可用的畫筆樣式如下圖所示。 3.畫刷也有很多其他設(shè)置，這個(gè)也可以查看其幫助文檔。在Qt中為畫刷提供了一些可用的樣式，可以使用setStyle()函數(shù)來設(shè)置。如下圖所示。 這里面包含了漸變填充效果，這個(gè)會(huì)在下一節(jié)講到。 4.下面我們寫一個(gè)簡(jiǎn)單的例子演示一下。將paintEvent()函數(shù)更改如下： 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預(yù)定義的顏色，可以在幫助中索引Qt::GlobalColor關(guān)鍵字查看。如下圖所示。 現(xiàn)在運(yùn)行程序，效果如下圖所示。 三、繪制弧線 為了幫助大家學(xué)習(xí)，這里再舉一個(gè)繪制弧線的例子，其實(shí)在幫助文檔中已經(jīng)給出了這個(gè)例子。如下圖所示。 我們將paintEvent()函數(shù)更改如下： void?MainWindow::paintEvent(QPaintEvent?*) { ? ??QRectF?rectangle(10.0,?20.0,?80.0,?60.0);?//矩形 ? ??int?startAngle?=?30?*?16;? ???//起始角度 ? ??int?spanAngle?=?120?*?16;? ?//跨越度數(shù) ? ??QPainter?painter(this); ? ??painter.drawArc(rectangle,?startAngle,?spanAngle); } 這里要說明的是，畫弧線時(shí)，角度被分成了十六分之一，就是說，要想為30度，就得是30*16。它有起始角度和跨度，還有位置矩形，要想畫出自己想要的弧線，就要有一定的幾何知識(shí)了。這里就不再祥述。 結(jié)語(yǔ) ? ?? ??這一節(jié)我們只是簡(jiǎn)單介紹了一下怎么使用QPainter在窗口界面上進(jìn)行繪制，還涉及到了畫筆、畫刷，以及使用幫助文檔的一些內(nèi)容。如果要更加系統(tǒng)、詳細(xì)的學(xué)習(xí)這些基礎(chǔ)知識(shí)，可以查看《Qt Creator快速入門》的第10章。

總結(jié)

以上是生活随笔為你收集整理的[Qt教程] 第11篇 2D绘图（一）绘制简单图形的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。