第6章Qt5圖形與圖畫

1、第6章 Qt 5Qt 5圖形與圖畫6.1 Qt 56.1 Qt 5位置相關(guān)函數(shù)位置相關(guān)函數(shù)6.2 Qt 56.2 Qt 5基礎(chǔ)圖形的繪制基礎(chǔ)圖形的繪制6.3 Qt 56.3 Qt 5雙緩沖機(jī)制雙緩沖機(jī)制6.4 Qt 5 SVG6.4 Qt 5 SVG格式圖片的顯示格式圖片的顯示6.1 Qt 56.1 Qt 5位置相關(guān)函數(shù)6.1.1 6.1.1 區(qū)別概述區(qū)別概述Qt提供了很多關(guān)于獲取窗體位置及顯示區(qū)域大小的函數(shù)，如x( )、y( )和pos( )、rect( )、size( )、geometry( )等，統(tǒng)稱為“位置相關(guān)函數(shù)”或“位置函數(shù)”，如圖6.1所示是幾種主要的位置函數(shù)，圖中清楚地標(biāo)出了它

2、們之間的區(qū)別。6.1.2 使用舉例具體實(shí)現(xiàn)步驟如下。（1）新建Qt Gui應(yīng)用（詳見本書第1章1.3.1節(jié)），項(xiàng)目名稱為“Geometry ”，基類選擇“QDialog ”，類名命名為“Geometry”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項(xiàng)目工程的建立。（2）Geometry類繼承自QDialog類，在頭文件中聲明所需的控件（主要為QLabel類）及所需要的函數(shù)。打開“geometry.h”頭文件，添加代碼。6.1.2 使用舉例（3）在構(gòu)造函數(shù)中完成控件的創(chuàng)建以及初始化工作，打開“geometry.cpp”文件，添加代碼。updateLabel

3、()函數(shù)完成獲得各位置函數(shù)的信息并顯示功能，具體代碼。重新定義QWidget的moveEvent()函數(shù)，響應(yīng)對(duì)話框的移動(dòng)事件，使得窗體在被移動(dòng)時(shí)能夠同步更新各函數(shù)的顯示結(jié)果，具體代碼如下：void Geometry:moveEvent(QMoveEvent *) updateLabel();重新定義QWidget的resizeEvent()函數(shù)，響應(yīng)對(duì)話框的大小調(diào)整事件，使得在窗體大小發(fā)生改變時(shí)，也能夠同步更新各函數(shù)的顯示結(jié)果，具體代碼如下：void Geometry:resizeEvent(QResizeEvent *) updateLabel();6.1.2 使用舉例（4）運(yùn)行程序，效果

4、如圖6.2所示。6.2 Qt 56.2 Qt 5基礎(chǔ)圖形的繪制基礎(chǔ)圖形的繪制6.2.1 6.2.1 繪圖框架設(shè)計(jì)繪圖框架設(shè)計(jì)繪制各種基礎(chǔ)圖形使用的框架實(shí)例如圖6.3所示。具體內(nèi)容見代碼CH602。6.2.1 繪圖框架設(shè)計(jì)此實(shí)例的具體實(shí)現(xiàn)包含了兩個(gè)部分的內(nèi)容，一個(gè)是用于畫圖的區(qū)域PaintArea類，另一個(gè)是主窗口MainWidget類，如圖6.4所示。6.2.2 繪圖區(qū)的實(shí)現(xiàn)打開“paintarea.h”頭文件，添加代碼。PaintArea類的構(gòu)造函數(shù)用于完成初始化工作，設(shè)置圖形顯示區(qū)域的背景色及最小顯示尺寸，具體代碼如下：#include paintarea.h#include PaintA

5、rea:PaintArea(QWidget *parent):QWidget(parent) setPalette(QPalette(Qt:white); setAutoFillBackground(true); setMinimumSize(400,400);6.2.2 繪圖區(qū)的實(shí)現(xiàn)setShape()函數(shù)可以設(shè)置形狀，setPen()函數(shù)可以設(shè)置畫筆，setBrush()函數(shù)可以設(shè)置畫刷，setFillRule()函數(shù)可以設(shè)置填充模式，具體代碼實(shí)現(xiàn)如下：void PaintArea:setShape(Shape s) shape = s; update();void PaintArea:s

6、etPen(QPen p) pen = p; update();void PaintArea:setBrush(QBrush b) brush = b; update();void PaintArea:setFillRule(Qt:FillRule rule) fillRule =rule; update(); /重畫繪制區(qū)窗體PaintArea類的重畫函數(shù)代碼。6.2.2 繪圖區(qū)的實(shí)現(xiàn)其中，其中， QPainter p(this)QPainter p(this)：新建一個(gè)QPainter對(duì)象。 p.setPen(pen)p.setPen(pen)、p.setBrush(brush)p.set

7、Brush(brush)：設(shè)置QPainter對(duì)象的畫筆和畫刷。 QRect rect(50,100,300,200)QRect rect(50,100,300,200)：設(shè)定一個(gè)方形區(qū)域，為畫長(zhǎng)方形、圓角方形、橢圓等做準(zhǔn)備。 static const QPoint points4=static const QPoint points4=：創(chuàng)建一個(gè)QPoint的數(shù)組，包含四個(gè)點(diǎn)，為畫多邊形、多邊線及點(diǎn)做準(zhǔn)備。 int startAngle=30int startAngle=30* *1616、int spanAngle =120int spanAngle =120* *1616：其中，參數(shù)st

8、artAngle表示起始角，為弧形的起始點(diǎn)與圓心之間連線與水平方向的夾角；參數(shù)spanAngle表示的是跨度角，為弧形起點(diǎn)、終點(diǎn)分別與圓心連線之間的夾角，如圖6.5所示。6.2.2 繪圖區(qū)的實(shí)現(xiàn) QPainterPath pathQPainterPath path：新建一個(gè)QPainterPath對(duì)象，為畫路徑做準(zhǔn)備。 switch(shape)switch(shape)：使用一個(gè)switch()語(yǔ)句，對(duì)所要畫的形狀做判斷，調(diào)用QPainter的各個(gè)draw()函數(shù)完成圖形的繪制。6.2.2 繪圖區(qū)的實(shí)現(xiàn)（1）利用QPainter繪制圖形（Shape）。Qt為開發(fā)者提供了豐富的繪制基本圖形的d

9、raw函數(shù)，如圖6.6所示。6.2.2 繪圖區(qū)的實(shí)現(xiàn)（2）利用QPainterPath繪制簡(jiǎn)單圖形。利用QPainterPath繪制簡(jiǎn)單圖形，QPainterPath類為QPainter類提供了一個(gè)存儲(chǔ)容器，里面包含了所要繪制的內(nèi)容的集合及繪制的順序，如長(zhǎng)方形、多邊形、曲線等各種任意圖形。cubicTo()函數(shù)繪制的是貝賽爾曲線，如圖6.7所示。6.2.2 繪圖區(qū)的實(shí)現(xiàn)利用QPainterPath類可以實(shí)現(xiàn)QPainter類的draw()函數(shù)能夠?qū)崿F(xiàn)的所有圖形。例如，對(duì)于QPainter:drawRect()函數(shù)，除了可用上面介紹的QPainterPath:addRect()的方式實(shí)現(xiàn)，還可以

10、用如下方式實(shí)現(xiàn)：QPainterPath path;path.moveTo(0,0);path.lineTo(200,0);path.lineTo(200,100);path.lineTo(0,100);path.lineTo(0,0);6.2.3 主窗口的實(shí)現(xiàn)打開“mainwidget.h”頭文件，添加代碼。MainWiget類的構(gòu)造函數(shù)中創(chuàng)建了各參數(shù)選擇控件，打開“mainwiget.cpp”文件，添加代碼。6.2.3 主窗口的實(shí)現(xiàn)其中，其中， shapeComboBox-addItem(tr(Line),PaintArea:Line)shapeComboBox-addItem(tr(Li

11、ne),PaintArea:Line)：QComboBox的addItem()函數(shù)可以僅插入文本，也可同時(shí)插入與文本相對(duì)應(yīng)的具體數(shù)據(jù)，通常為枚舉型數(shù)據(jù)，便于后面操作時(shí)確定選擇的是哪個(gè)數(shù)據(jù)。 penStyleComboBox-penStyleComboBox-addItem(tr(SolidLine),static_cast(Qt:SolidLine)addItem(tr(SolidLine),static_cast(Qt:SolidLine)：選用不同的參數(shù)，對(duì)應(yīng)畫筆的不同風(fēng)格，如圖6.8所示。6.2.3 主窗口的實(shí)現(xiàn) penCapComboBox-addItem(tr(SquareCap),

12、Qt:SquareCap)penCapComboBox-addItem(tr(SquareCap),Qt:SquareCap)：選用不同的參數(shù)，對(duì)應(yīng)畫筆頂帽的不同風(fēng)格，如圖6.9所示。6.2.3 主窗口的實(shí)現(xiàn) penJoinComboBox-addItem(tr(BevelJoin),Qt:BevelJoin)penJoinComboBox-addItem(tr(BevelJoin),Qt:BevelJoin)：選用不同的參數(shù)，對(duì)應(yīng)畫筆連接點(diǎn)的不同風(fēng)格，如圖6.10所示。6.2.3 主窗口的實(shí)現(xiàn) fillRuleComboBox-addItem(tr(Odd Even),Qt:OddEvenF

13、ill)fillRuleComboBox-addItem(tr(Odd Even),Qt:OddEvenFill)：Qt為QPainterPath類提供了兩種填充規(guī)則，分別是Qt:OddEvenFill和Qt:WindingFill，如圖6.11所示。6.2.3 主窗口的實(shí)現(xiàn)其中，Qt:OddEvenFill填充規(guī)則判斷的依據(jù)是從圖形中某一點(diǎn)畫一條水平線到圖形外，若這條水平線與圖形邊線的交點(diǎn)數(shù)目為奇數(shù)，則說(shuō)明此點(diǎn)位于圖形的內(nèi)部；若交點(diǎn)數(shù)目為偶數(shù)，則此點(diǎn)位于圖形的外部，如圖6.12所示。6.2.3 主窗口的實(shí)現(xiàn)而Qt:WindingFill填充規(guī)則的判斷依據(jù)則是從圖形中某一點(diǎn)畫一條水平線到圖形外

14、，每個(gè)交點(diǎn)外邊線的方向可能向上，也可能向下，將這些交點(diǎn)數(shù)累加，方向相反的相互抵消，若最后結(jié)果不為0則說(shuō)明此點(diǎn)在圖形內(nèi)，若最后結(jié)果為0則說(shuō)明在圖形外，如圖6.13所示。6.2.3 主窗口的實(shí)現(xiàn) spreadComboBox-addItem(tr(PadSpread),QGradient:PadSpread)spreadComboBox-addItem(tr(PadSpread),QGradient:PadSpread)：鋪展效果有三種，分別為QGradient:PadSpread、QGradient:RepeatSpread和QGradient:ReflectSpread。其中，PadSprea

15、d是默認(rèn)的鋪展效果，也是最常見的鋪展效果，沒有被漸變覆蓋的區(qū)域填充單一的起始顏色或終止顏色；RepeatSpread效果與ReflectSpread效果只對(duì)線性漸變和圓形漸變起作用，如圖6.14所示。6.2.3 主窗口的實(shí)現(xiàn) brushStyleComboBox-brushStyleComboBox-addItem(tr(SolidPattern),static_caaddItem(tr(SolidPattern),static_cast(Qt:SolidPattern)st(Qt:SolidPattern)：選用不同的參數(shù)，對(duì)應(yīng)畫刷的不同風(fēng)格，如圖6.15所示。6.2.3 主窗口的實(shí)現(xiàn)Sho

16、wShape()槽函數(shù)，根據(jù)當(dāng)前下拉列表框中選擇的選項(xiàng)，調(diào)用PaintArea類的setShape()函數(shù)設(shè)置PaintArea對(duì)象的形狀參數(shù)，具體代碼如下：void MainWidget:ShowShape(int value) PaintArea:Shape shape = PaintArea:Shape(shapeComboBox-itemData( value,Qt:UserRole).toInt(); paintArea-setShape(shape);6.2.3 主窗口的實(shí)現(xiàn)在此函數(shù)中獲得與畫筆相關(guān)的所有屬性值，包括畫筆顏色、畫筆線寬、畫筆風(fēng)格、畫筆頂帽及畫筆連接點(diǎn)，共同構(gòu)成QPe

17、n對(duì)象，并調(diào)用PaintArea對(duì)象的setPen()函數(shù)設(shè)置PaintArea對(duì)象的畫筆屬性。其他與畫筆參數(shù)相關(guān)的響應(yīng)函數(shù)完成的工作與此類似，具體代碼如下：void MainWidget:ShowPenColor() QColor color = QColorDialog:getColor(static_cast(Qt:blue); penColorFrame-setPalette(QPalette(color); int value = penWidthSpinBox-value(); Qt:PenStyle style = Qt:PenStyle(penStyleComboBox-ite

18、mData( penStyleComboBox-currentIndex(),Qt:UserRole).toInt(); Qt:PenCapStyle cap = Qt:PenCapStyle(penCapComboBox-itemData( penCapComboBox-currentIndex(),Qt:UserRole).toInt(); Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData( penJoinComboBox-currentIndex(),Qt:UserRole).toInt(); paintArea-

19、setPen(QPen(color,value,style,cap,join);6.2.3 主窗口的實(shí)現(xiàn)ShowPenWidth()槽函數(shù)的具體實(shí)現(xiàn)代碼如下：void MainWidget:ShowPenWidth(int value) QColor color = penColorFrame-palette().color(QPalette:Window); Qt:PenStyle style = Qt:PenStyle(penStyleComboBox-itemData( penStyleComboBox-currentIndex(),Qt:UserRole).toInt(); Qt:Pe

20、nCapStyle cap = Qt:PenCapStyle(penCapComboBox-itemData( penCapComboBox-currentIndex(),Qt:UserRole).toInt(); Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData( penJoinComboBox-currentIndex(),Qt:UserRole).toInt(); paintArea-setPen(QPen(color,value,style,cap,join);6.2.3 主窗口的實(shí)現(xiàn)ShowPenStyle()

21、槽函數(shù)的具體實(shí)現(xiàn)代碼如下：void MainWidget:ShowPenStyle(int styleValue) QColor color = penColorFrame-palette().color(QPalette:Window); int value = penWidthSpinBox-value(); Qt:PenStyle style = Qt:PenStyle(penStyleComboBox-itemData( styleValue,Qt:UserRole).toInt(); Qt:PenCapStyle cap = Qt:PenCapStyle(penCapComboBox

22、-itemData( penCapComboBox-currentIndex(),Qt:UserRole).toInt(); Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData( penJoinComboBox-currentIndex(),Qt:UserRole).toInt(); paintArea-setPen(QPen(color,value,style,cap,join);6.2.3 主窗口的實(shí)現(xiàn)ShowPenCap()槽函數(shù)的具體實(shí)現(xiàn)代碼如下：void MainWidget:ShowPenCap(int cap

23、Value) QColor color = penColorFrame-palette().color(QPalette:Window); int value = penWidthSpinBox-value(); Qt:PenStyle style = Qt:PenStyle(penStyleComboBox-itemData( penStyleComboBox-currentIndex(),Qt:UserRole).toInt(); Qt:PenCapStyle cap = Qt:PenCapStyle(penCapComboBox-itemData( capValue,Qt:UserRol

24、e).toInt(); Qt:PenJoinStyle join=Qt:PenJoinStyle(penJoinComboBox-itemData( penJoinComboBox-currentIndex(),Qt:UserRole).toInt(); paintArea-setPen(QPen(color,value,style,cap,join);6.2.3 主窗口的實(shí)現(xiàn)ShowPenJoin()槽函數(shù)的具體實(shí)現(xiàn)代碼如下：void MainWidget:ShowPenJoin(int joinValue) QColor color = penColorFrame-palette().co

25、lor(QPalette:Window); int value = penWidthSpinBox-value(); Qt:PenStyle style = Qt:PenStyle(penStyleComboBox-itemData( penStyleComboBox-currentIndex(),Qt:UserRole).toInt(); Qt:PenCapStyle cap = Qt:PenCapStyle(penCapComboBox-itemData( penCapComboBox-currentIndex(),Qt:UserRole).toInt(); Qt:PenJoinStyle

26、 join=Qt:PenJoinStyle(penJoinComboBox-itemData( joinValue,Qt:UserRole).toInt(); paintArea-setPen(QPen(color,value,style,cap,join);6.2.3 主窗口的實(shí)現(xiàn)ShowFillRule()槽函數(shù)的具體實(shí)現(xiàn)代碼如下：void MainWidget:ShowFillRule() Qt:FillRule rule = Qt:FillRule(fillRuleComboBox-itemData( fillRuleComboBox-currentIndex(),Qt:UserRol

27、e).toInt(); paintArea-setFillRule(rule);ShowSpreadStyle()槽函數(shù)的具體實(shí)現(xiàn)代碼如下：void MainWidget:ShowSpreadStyle() spread = QGradient:Spread(spreadComboBox-itemData( spreadComboBox-currentIndex(),Qt:UserRole).toInt();6.2.3 主窗口的實(shí)現(xiàn)ShowBrushColor()槽函數(shù)，與設(shè)置畫筆顏色函數(shù)類似，但選定顏色后并不直接調(diào)用PaintArea對(duì)象的setBrush()函數(shù)，而是調(diào)用ShowBrush

28、()函數(shù)設(shè)置顯示區(qū)的畫刷屬性，具體實(shí)現(xiàn)代碼如下：void MainWidget:ShowBrushColor() QColor color = QColorDialog:getColor(static_cast(Qt:blue); brushColorFrame-setPalette(QPalette(color); ShowBrush(brushStyleComboBox-currentIndex();ShowBrush ()槽函數(shù)的具體實(shí)現(xiàn)代碼。6.2.3 主窗口的實(shí)現(xiàn)其中，其中， QColor color = brushColorFrame-QColor color = brushCol

29、orFrame-palette().color(QPalette:Window)palette().color(QPalette:Window)：獲得畫刷的顏色。 Qt:BrushStyle style = Qt:BrushStyle(brushStyleComboBox-Qt:BrushStyle style = Qt:BrushStyle(brushStyleComboBox-itemData(value, Qt:UserRole).toInt()itemData(value, Qt:UserRole).toInt()：獲得所選的畫刷風(fēng)格，若選擇的是漸變或者紋理圖案，則需要進(jìn)行一定的處理。

30、 主窗口的style變量值為Qt: LinearGradientPattern時(shí)，表明選擇的是線形漸變。 主窗口的style變量值為Qt: RadialGradientPattern時(shí)，表明選擇的是圓形漸變。 主窗口的style變量值為Qt: ConicalGradientPattern時(shí)，表明選擇的是錐形漸變。6.2.3 主窗口的實(shí)現(xiàn)QConicalGradient conicalGradient(startPoint,-(180*angle)/PI)創(chuàng)建錐形漸變類對(duì)象需要兩個(gè)參數(shù)，分別是錐形的頂點(diǎn)位置和漸變分界線與水平方向的夾角，如圖6.16所示。6.2.3 主窗口的實(shí)現(xiàn)打開“main.c

31、pp”文件，添加如下代碼：#include mainwidget.h#include #include int main(int argc, char *argv) QApplication a(argc, argv); QFont f(ZYSong18030,12); a.setFont(f); MainWidget w; w.show(); return a.exec();6.2.3 主窗口的實(shí)現(xiàn)運(yùn)行程序，程序顯示效果如圖6.17所示。6.3 Qt 56.3 Qt 5雙緩沖機(jī)制雙緩沖機(jī)制6.3.1 6.3.1 原理與設(shè)計(jì)原理與設(shè)計(jì)本例實(shí)現(xiàn)的是一個(gè)簡(jiǎn)單的繪圖工具，可以選擇線型、線寬及顏色等基

32、本要素，如圖6.18所示。6.3.1 原理與設(shè)計(jì)QMainWindow對(duì)象作為主窗口，QToolBar對(duì)象作為工具欄，QWidget對(duì)象作為主窗口的中央窗體centralWidget，也就是繪圖區(qū)，如圖6.19所示。6.3.2 繪圖區(qū)的實(shí)現(xiàn)（1）打開“drawwidget.h”頭文件，添加的代碼。（2）打開“drawwidget.cpp”文件，DrawWidget構(gòu)造函數(shù)完成對(duì)窗體參數(shù)及部分功能的初始化工作，具體代碼如下：#include drawwidget.h #include #include DrawWidget:DrawWidget(QWidget *parent) : QWidge

33、t(parent) setAutoFillBackground(true); /對(duì)窗體背景色的設(shè)置 setPalette(QPalette(Qt:white); pix =new QPixmap(size(); /此QPixmap對(duì)象用來(lái)準(zhǔn)備隨時(shí)接收繪制的內(nèi)容 pix-fill(Qt:white); /填充背景色為白色 setMinimumSize(600,400); /設(shè)置繪制區(qū)窗體的最小尺寸6.3.2 繪圖區(qū)的實(shí)現(xiàn)setStyle()函數(shù)接收主窗體傳來(lái)的線型風(fēng)格參數(shù)，setWidth()函數(shù)接收主窗體傳來(lái)的線寬參數(shù)值，setColor()函數(shù)接收主窗體傳來(lái)的畫筆顏色值。具體代碼如下：voi

34、d DrawWidget:setStyle(int s) style = s;void DrawWidget:setWidth(int w) weight = w;void DrawWidget:setColor(QColor c) color = c;6.3.2 繪圖區(qū)的實(shí)現(xiàn)在此事件處理函數(shù)中，完成向QPixmap對(duì)象中繪圖的工作。具體代碼如下：void DrawWidget:mouseMoveEvent(QMouseEvent *e) QPainter *painter = new QPainter; QPen pen; pen.setStyle(Qt:PenStyle)style); p

35、en.setWidth(weight); pen.setColor(color); painter-begin(pix); painter-setPen(pen); painter-drawLine(startPos,e-pos(); painter-end(); startPos =e-pos(); update();6.3.3 主窗口的實(shí)現(xiàn)（1）打開“mainwindow.h”文件，添加代碼。（2）打開“mainwindow.cpp”文件，MainWindow類的構(gòu)造函數(shù)完成初始化工作，各個(gè)功能見注釋說(shuō)明，具體代碼如下：#include mainwindow.h#include #incl

36、ude MainWindow:MainWindow(QWidget *parent) : QMainWindow(parent) drawWidget =new DrawWidget; /新建一個(gè)DrawWidget對(duì)象 setCentralWidget(drawWidget);/新建的DrawWidget對(duì)象作為主窗口的中央窗體 createToolBar(); /實(shí)現(xiàn)一個(gè)工具欄 setMinimumSize(600,400); /設(shè)置主窗口的最小尺寸 ShowStyle(); /初始化線型，設(shè)置控件中的當(dāng)前值作為初始值 drawWidget-setWidth(widthSpinBox-value(); /初始化線寬 dra