第6章

Qt5圖形與圖片——Qt5位置相關函數第6章Qt5圖形與圖片——Qt5位置相關函數01區

別

概

述01區別概述2區

別

概

述Qt提供了很多關于獲取窗體位置及顯示區域大小的函數，如x()、y()和pos()、rect()、size()、geometry()等，統稱為“位置相關函數”或“位置函數”。幾種主要位置函數及其之間的區別如圖6.1所示。區別概述Qt提供了很多關于獲取窗體位置及顯示區域3區

別

概

述其中，x()、y()和pos()函數的作用都是獲得整個窗體左上角的坐標位置。frameGeometry()函數與geometry()函數相對應。frameGeometry()函數是獲得整個窗體的左上頂點和長、寬值，而geometry()函數獲得的是窗體內中央區域的左上頂點坐標及長、寬值。

直接調用width()和height()函數獲得的是中央區域的長、寬值。rect()、size()函數獲得的結果也都是對于窗體的中央區域而言的。size()函數獲得的是窗體中央區域的長、寬值。rect()函數與geometry()函數相同，返回一個QRect對象，這兩個函數獲得的長、寬值是相同的，都是窗體中央區域的長、寬值，只是左上頂點的坐標值不一樣。geometry()函數獲得的左上頂點坐標是相對于父窗體而言的坐標，而rect()函數獲得的左上頂點坐標始終為（0,0）。區別概述其中，402“實例”位置函數的應用02“實例”位置函數的應用5“實例”位置函數的應用【例】（難度一般）（CH601）設計界面，當改變對話框的大小或移動對話框時，調用各個函數所獲得的信息也相應地發生變化，從變化中可得知各函數之間的區別。具體實現步驟如下。（1）新建QtWidgetsApplication（詳見1.3.1節），項目名稱為“Geometry”，基類選擇“QDialog”，類名命名為“Geometry”，取消“創建界面”復選框的選中狀態。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項目工程的建立。（2）Geometry類繼承自QDialog類，在頭文件中聲明所需的控件（主要為QLabel類）及所需要的函數。打開“geometry.h”頭文件，添加如下代碼。（3）在構造函數中完成控件的創建及初始化工作，打開“geometry.cpp”文件，添加如下代碼。updateLabel()函數完成獲得各位置函數的信息并顯示功能，具體代碼。“實例”位置函數的應用【例】（難度一般）（CH601）設計界6“實例”位置函數的應用重新定義QWidget的moveEvent()函數，響應對話框的移動事件，使得窗體在被移動時能夠同步更新各函數的顯示結果，具體代碼如下：voidGeometry::moveEvent(QMoveEvent*){updateLabel();}重新定義QWidget的resizeEvent()函數，響應對話框的大小調整事件，使得在窗體大小發生改變時，也能夠同步更新各函數的顯示結果，具體代碼如下：voidGeometry::resizeEvent(QResizeEvent*){updateLabel();}“實例”位置函數的應用重新定義QWidget的moveEve7“實例”位置函數的應用（4）運行程序，效果如圖6.2所示。“實例”位置函數的應用（4）運行程序，效果如圖6.2所示。8第6章

Qt5圖形與圖片——Qt5基礎圖形的繪制第6章Qt5圖形與圖片——Qt5基礎圖形的繪制【例】（難度中等）（CH602）設計界面，區分各種形狀及畫筆顏色、畫筆線寬、畫筆風格、畫筆頂帽、畫筆連接點、填充模式、鋪展效果、畫刷顏色、畫刷風格設置等。【例】（難度中等）（CH602）設計界面，區分各種形狀及畫筆1001繪圖框架設計01繪圖框架設計11繪圖框架設計利用QPainter繪制各種圖形使用的框架的實例如圖6.3所示。繪圖框架設計利用QPainter繪制各種圖形使用的框架的實例12繪圖框架設計此實例的具體實現包含兩個部分的內容：一是用于畫圖的區域PaintArea類，二是主窗口MainWidget類。繪制各種圖形實例的框架如圖6.4所示。繪圖框架設計此實例的具體實現包含兩個部分的內容：一是用于畫圖13繪圖框架設計具體實現步驟如下。（1）新建QtWidgetsApplication（詳見1.3.1節），項目名稱為“PaintEx”，基類選擇“QWidget”，類名命名為“MainWidget”，取消“創建界面”復選框的選中狀態。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項目工程的建立。（2）添加該工程的提供實現繪圖區的函數所在的文件，在“PaintEx”項目名上單擊鼠標右鍵，在彈出的快捷菜單中選擇“添加新文件...”選項，在彈出的對話框中選擇“C++Class”選項。單擊“Choose...”按鈕，在彈出的對話框的“Baseclass”下拉列表框中選擇基類名“QWidget”，在“Classname”文本框中輸入類的名稱“PaintArea”。（3）單擊“下一步”按鈕，單擊“完成”按鈕，添加文件“paintarea.h”和文件“paintarea.cpp”。繪圖框架設計具體實現步驟如下。1402繪圖區的實現02繪圖區的實現15繪圖區的實現打開“paintarea.h”頭文件，添加如下代碼：#include<QPen>#include<QBrush>classPaintArea:publicQWidget{Q_OBJECTpublic:enumShape{Line,Rectangle,RoundRect,Ellipse,Polygon,Polyline,Points,Arc,Path,Text,Pixmap};

explicitPaintArea(QWidget*parent=0);voidsetShape(Shape);voidsetPen(QPen);voidsetBrush(QBrush);voidsetFillRule(Qt::FillRule);voidpaintEvent(QPaintEvent*);signals:publicslots:private:Shapeshape;QPenpen;QBrushbrush;Qt::FillRulefillRule;};繪圖區的實現打開“paintarea.h”頭文件，添加如下代16繪圖區的實現PaintArea類的構造函數用于完成初始化工作，設置圖形顯示區域的背景色及最小顯示尺寸，具體代碼如下：#include"paintarea.h"#include<QPainter>PaintArea::PaintArea(QWidget*parent):QWidget(parent){setPalette(QPalette(Qt::white));setAutoFillBackground(true);setMinimumSize(400,400);}其中，setPalette(QPalette(Qt::white))、setAutoFillBackground(true)完成對窗體背景色的設置，與下面的代碼效果一致：QPalettep=palette();p.setColor(QPalette::Window,Qt::white);setPalette(p);繪圖區的實現PaintArea類的構造函數用于完成初始化工作17繪圖區的實現setShape()函數可以設置形狀，setPen()函數可以設置畫筆，setBrush()函數可以設置畫刷，setFillRule()函數可以設置填充模式，具體代碼實現如下：voidPaintArea::setShape(Shapes){shape=s;update();}voidPaintArea::setPen(QPenp){

pen=p;

update();}voidPaintArea::setBrush(QBrushb){

brush=b;

update();}voidPaintArea::setFillRule(Qt::FillRulerule){

fillRule=rule;

update(); //重畫繪制區窗體}繪圖區的實現setShape()函數可以設置形狀，setPe18PaintArea類的重畫函數代碼。其中，(a)QRectrect(50,100,300,200)：設定一個方形區域，為畫長方形、圓角方形、橢圓等做準備。(b)staticconstQPointpoints[4]={…}：創建一個QPoint的數組，包含四個點，為畫多邊形、多邊線及點做準備。(c)intstartAngle=30*16、intspanAngle=120*16：其中，參數startAngle表示起始角，為弧形的起始點與圓心之間連線與水平方向的夾角；參數spanAngle表示的是跨度角，為弧形起點、終點分別與圓心連線之間的夾角，如圖6.5所示。(d)switch(shape){…}：使用一個switch()語句，對所要畫的形狀做判斷，調用QPainter的各個draw()函數完成圖形的繪制。繪圖區的實現PaintArea類的重畫函數代碼。繪圖區的實現19繪圖區的實現（1）利用QPainter繪制圖形（Shape）。Qt為開發者提供了豐富的繪制基本圖形的draw()函數，如圖6.6所示。繪圖區的實現（1）利用QPainter繪制圖形（Shape）20繪圖區的實現（2）利用QPainterPath繪制簡單圖形。利用QPainterPath繪制簡單圖形，QPainterPath類為QPainter類提供了一個存儲容器，里面包含了所要繪制的內容的集合及繪制的順序，如長方形、多邊形、曲線等各種任意圖形。當需要繪制此預先存儲在QPainterPath對象中的內容時，只需調用QPainter類的drawPath()函數即可。QPainterPath類提供了許多函數接口，可以很方便地加入一些規則圖形。例如，addRect()加入一個方形，addEllipse()函數加入一個橢圓形，addText()函數加入一個字符串，addPolygon()函數加入一個多邊形等。同時，QPainterPath類還提供了addPath()函數，用于加入另一個QPainterPath對象中保存的內容。QPainterPath對象的當前點自動處在上一部分圖形內容的結束點上，若下一部分圖形的起點不在此結束點，則需調用moveTo()函數將當前點移動到下一部分圖形的起點。cubicTo()函數繪制的是貝賽爾曲線，如圖6.7所示。繪圖區的實現（2）利用QPainterPath繪制簡單圖形。21繪圖區的實現利用QPainterPath類可以實現QPainter類的draw()函數能夠實現的所有圖形。例如，對于QPainter::drawRect()函數，除可用上面介紹的QPainterPath::addRect()的方式實現外，還可以用如下方式實現：QPainterPathpath;path.moveTo(0,0);path.lineTo(200,0);path.lineTo(200,100);path.lineTo(0,100);path.lineTo(0,0);這是一個更通用的方法，其他（如多邊形等）圖形都能夠使用這種方式實現。繪圖區的實現利用QPainterPath類可以實現QPain2203主窗口的實現03主窗口的實現23主窗口的實現主窗口類MainWiget繼承自QWidget類，包含完成各種圖形參數選擇的控制區的聲明、一系列設置與畫圖相關參數的槽函數的聲明，以及一個繪圖區PaintArea對象的聲明。打開“mainwidget.h”頭文件，添加如下代碼。MainWiget類的構造函數中創建了各參數選擇控件，打開“mainwiget.cpp”文件，添加如下代碼。其中，(a)shapeComboBox->addItem(tr("Line"),PaintArea::Line)：QComboBox的addItem()函數可以僅插入文本，也可同時插入與文本相對應的具體數據，通常為枚舉型數據，便于后面操作時確定選擇的是哪個數據。(b)penStyleComboBox->addItem(tr("SolidLine"),static_cast<int>(Qt::SolidLine))：選用不同的參數，對應畫筆的不同風格，如圖6.8所示。主窗口的實現主窗口類MainWiget繼承自QWidget類24主窗口的實現(c)penCapComboBox->addItem(tr("SquareCap"),Qt::SquareCap)：選用不同的參數，對應畫筆頂帽的不同風格，如圖6.9所示。其中，Qt::SquareCap表示在線條的頂點處是方形的，且線條繪制的區域包括了端點，并且再往外延伸半個線寬的長度；Qt::FlatCap表示在線條的頂點處是方形的，但線條繪制區域不包括端點在內；Qt::RoundCap表示在線條的頂點處是圓形的，且線條繪制區域包含了端點。主窗口的實現(c)penCapComboBox->addI25主窗口的實現(d)penJoinComboBox->addItem(tr("BevelJoin"),Qt::BevelJoin)：選用不同的參數，對應畫筆連接點的不同風格，如圖6.10所示。其中，Qt::BevelJoin風格連接點是指兩條線的中心線頂點相匯，相連處依然保留線條各自的方形頂端；Qt::MiterJoin風格連接點是指兩條線的中心線頂點相匯，相連處線條延長到線的外側匯集至點，形成一個尖頂的連接；Qt::RoundJoin風格連接點是指兩條線的中心線頂點相匯，相連處以圓弧形連接。主窗口的實現(d)penJoinComboBox->add26主窗口的實現(e)fillRuleComboBox->addItem(tr("OddEven"),Qt::OddEvenFill)：Qt為QPainterPath類提供了兩種填充規則，分別是Qt::OddEvenFill和Qt::WindingFill，如圖6.11所示。主窗口的實現(e)fillRuleComboBox->ad27其中，Qt::OddEvenFill填充規則判斷的依據是從圖形中某一點畫一條水平線到圖形外。若這條水平線與圖形邊線的交點數目為奇數，則說明此點位于圖形的內部；若交點數目為偶數，則此點位于圖形的外部，如圖6.12所示。而Qt::WindingFill填充規則的判斷依據則是從圖形中某一點畫一條水平線到圖形外，每個交點外邊線的方向可能向上，也可能向下，將這些交點數累加，方向相反的相互抵消，若最后結果不為0則說明此點在圖形內，若最后結果為0則說明在圖形外，如圖6.13所示。

主窗口的實現其中，Qt::OddEvenFill填充規則判斷的依據是從圖28主窗口的實現(f)spreadComboBox->addItem(tr(“PadSpread”),QGradient::PadSpread)：鋪展效果有三種，分別為QGradient::PadSpread、QGradient::RepeatSpread和QGradient::ReflectSpread。其中，PadSpread是默認的鋪展效果，也是最常見的鋪展效果，沒有被漸變覆蓋的區域填充單一的起始顏色或終止顏色；RepeatSpread效果與ReflectSpread效果只對線性漸變和圓形漸變起作用，如圖6.14所示。主窗口的實現(f)spreadComboBox->addI29主窗口的實現

(g)brushStyleComboBox->addItem(tr("SolidPattern"),static_cast<int>(Qt::SolidPattern))：選用不同的參數，對應畫刷的不同風格，如圖6.15所示。主窗口的實現(g)brushStyleComboBox->30主窗口的實現ShowShape()槽函數，根據當前下拉列表框中選擇的選項，調用PaintArea類的setShape()函數設置PaintArea對象的形狀參數，具體代碼如下：voidMainWidget::ShowShape(intvalue){PaintArea::Shapeshape=PaintArea::Shape(shapeComboBox->itemData(value,Qt::UserRole).toInt());paintArea->setShape(shape);}其中，QComboBox類的itemData方法返回當前顯示的下拉列表框數據，是一個QVariant對象，此對象與控件初始化時插入的枚舉型數據相關，調用QVariant類的toInt()函數獲得此數據在枚舉型數據集合中的序號。主窗口的實現ShowShape()槽函數，根據當前下拉列表框31主窗口的實現在此函數中獲得與畫筆相關的所有屬性值，包括畫筆顏色、畫筆線寬、畫筆風格、畫筆頂帽及畫筆連接點，共同構成QPen對象，并調用PaintArea對象的setPen()函數設置PaintArea對象的畫筆屬性。其他與畫筆參數相關的響應函數完成的工作與此類似，具體代碼如下：voidMainWidget::ShowPenColor(){QColorcolor=QColorDialog::getColor(static_cast<int>(Qt::blue));penColorFrame->setPalette(QPalette(color));intvalue=penWidthSpinBox->value();Qt::PenStylestyle=Qt::PenStyle(penStyleComboBox->itemData(penStyleComboBox->currentIndex(),Qt::UserRole).toInt());Qt::PenCapStylecap=Qt::PenCapStyle(penCapComboBox->itemData(penCapComboBox->currentIndex(),Qt::UserRole).toInt());Qt::PenJoinStylejoin=Qt::PenJoinStyle(penJoinComboBox->itemData(penJoinComboBox->currentIndex(),Qt::UserRole).toInt());paintArea->setPen(QPen(color,value,style,cap,join));}主窗口的實現在此函數中獲得與畫筆相關的所有屬性值，包括畫筆顏32主窗口的實現ShowPenWidth()槽函數的具體實現代碼如下：voidMainWidget::ShowPenWidth(intvalue){QColorcolor=penColorFrame->palette().color(QPalette::Window);Qt::PenStylestyle=Qt::PenStyle(penStyleComboBox->itemData(penStyleComboBox->currentIndex(),Qt::UserRole).toInt());Qt::PenCapStylecap=Qt::PenCapStyle(penCapComboBox->itemData(penCapComboBox->currentIndex(),Qt::UserRole).toInt());Qt::PenJoinStylejoin=Qt::PenJoinStyle(penJoinComboBox->itemData(penJoinComboBox->currentIndex(),Qt::UserRole).toInt());paintArea->setPen(QPen(color,value,style,cap,join));}主窗口的實現ShowPenWidth()槽函數的具體實現代碼33主窗口的實現ShowPenStyle()槽函數的具體實現代碼如下：voidMainWidget::ShowPenStyle(intstyleValue){QColorcolor=penColorFrame->palette().color(QPalette::Window);intvalue=penWidthSpinBox->value();Qt::PenStylestyle=Qt::PenStyle(penStyleComboBox->itemData(styleValue,Qt::UserRole).toInt());Qt::PenCapStylecap=Qt::PenCapStyle(penCapComboBox->itemData(penCapComboBox->currentIndex(),Qt::UserRole).toInt());Qt::PenJoinStylejoin=Qt::PenJoinStyle(penJoinComboBox->itemData(penJoinComboBox->currentIndex(),Qt::UserRole).toInt());paintArea->setPen(QPen(color,value,style,cap,join));}主窗口的實現ShowPenStyle()槽函數的具體實現代碼34主窗口的實現ShowPenCap()槽函數的具體實現代碼如下：voidMainWidget::ShowPenCap(intcapValue){QColorcolor=penColorFrame->palette().color(QPalette::Window);intvalue=penWidthSpinBox->value();Qt::PenStylestyle=Qt::PenStyle(penStyleComboBox->itemData(penStyleComboBox->currentIndex(),Qt::UserRole).toInt());Qt::PenCapStylecap=Qt::PenCapStyle(penCapComboBox->itemData(capValue,Qt::UserRole).toInt());Qt::PenJoinStylejoin=Qt::PenJoinStyle(penJoinComboBox->itemData(penJoinComboBox->currentIndex(),Qt::UserRole).toInt());paintArea->setPen(QPen(color,value,style,cap,join));}主窗口的實現ShowPenCap()槽函數的具體實現代碼如下35主窗口的實現ShowPenJoin()槽函數的具體實現代碼如下：voidMainWidget::ShowPenJoin(intjoinValue){QColorcolor=penColorFrame->palette().color(QPalette::Window);intvalue=penWidthSpinBox->value();Qt::PenStylestyle=Qt::PenStyle(penStyleComboBox->itemData(penStyleComboBox->currentIndex(),Qt::UserRole).toInt());Qt::PenCapStylecap=Qt::PenCapStyle(penCapComboBox->itemData(penCapComboBox->currentIndex(),Qt::UserRole).toInt());Qt::PenJoinStylejoin=Qt::PenJoinStyle(penJoinComboBox->itemData(joinValue,Qt::UserRole).toInt());paintArea->setPen(QPen(color,value,style,cap,join));}主窗口的實現ShowPenJoin()槽函數的具體實現代碼如36主窗口的實現ShowFillRule()槽函數的具體實現代碼如下：voidMainWidget::ShowFillRule(){Qt::FillRulerule=Qt::FillRule(fillRuleComboBox->itemData(fillRuleComboBox->currentIndex(),Qt::UserRole).toInt());paintArea->setFillRule(rule);}ShowSpreadStyle()槽函數的具體實現代碼如下：voidMainWidget::ShowSpreadStyle(){spread=QGradient::Spread(spreadComboBox->itemData(spreadComboBox->currentIndex(),Qt::UserRole).toInt());}主窗口的實現ShowFillRule()槽函數的具體實現代碼37主窗口的實現ShowBrushColor()槽函數，與設置畫筆顏色函數類似，但選定顏色后并不直接調用PaintArea對象的setBrush()函數，而是調用ShowBrush()函數設置顯示區的畫刷屬性，具體實現代碼如下：voidMainWidget::ShowBrushColor(){QColorcolor=QColorDialog::getColor(static_cast<int>(Qt::blue));brushColorFrame->setPalette(QPalette(color));ShowBrush(brushStyleComboBox->currentIndex());}ShowBrush()槽函數的具體實現代碼。其中，(a)Qt::BrushStylestyle=Qt::BrushStyle(brushStyleComboBox->itemData(value,Qt::UserRole).toInt())：獲得所選的畫刷風格，若選擇的是漸變或者紋理圖案，則需要進行一定的處理。(b)主窗口的style變量值為Qt::LinearGradientPattern時，表明選擇的是線形漸變。QLinearGradientlinearGradient(startPoint,endPoint)創建線形漸變類對象需要兩個參數，分別表示起止點位置。(c)主窗口的style變量值為Qt::RadialGradientPattern時，表明選擇的是圓形漸變。(d)主窗口的style變量值為Qt::ConicalGradientPattern時，表明選擇的是錐形漸變。主窗口的實現ShowBrushColor()槽函數，與設置畫38主窗口的實現QConicalGradientconicalGradient(startPoint,-(180*angle)/PI)創建錐形漸變類對象需要兩個參數，分別是錐形的頂點位置和漸變分界線與水平方向的夾角，如圖6.16所示。錐形漸變不需要設置鋪展效果，它的鋪展效果只能是QGradient::PadSpread。主窗口的實現QConicalGradientconical39主窗口的實現打開“main.cpp”文件，添加如下代碼：#include"mainwidget.h"#include<QApplication>#include<QFont>intmain(intargc,char*argv[]){QApplicationa(argc,argv);QFontf("ZYSong18030",12);a.setFont(f);MainWidgetw;w.show();returna.exec();}主窗口的實現打開“main.cpp”文件，添加如下代碼：#i40主窗口的實現運行程序，效果如圖6.17所示。主窗口的實現運行程序，效果如圖6.17所示。41第6章

Qt5圖形與圖片——Qt5雙緩沖機制第6章Qt5圖形與圖片——Qt5雙緩沖機制01原理與設計01原理與設計43原理與設計【例】（難度中等）（CH603）實現一個簡單的繪圖工具，可以選擇線型、線寬、顏色等基本要素，如圖6.18所示。QMainWindow對象作為主窗口，QToolBar對象作為工具欄，QWidget對象作為主窗口的中央窗體，也就是繪圖區，如圖6.19所示。原理與設計【例】（難度中等）（CH603）實現一個簡單的繪圖44原理與設計具體實現步驟如下。（1）新建QtWidgetsApplication（詳見1.3.1節），項目名稱為“DrawWidget”，基類選擇“QMainWindow”，類名命名默認為“MainWindow”，取消“創建界面”復選框的選中狀態。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項目工程的建立。（2）添加該工程的提供實現繪圖區的函數所在的文件。在“DrawWidget”項目名上單擊鼠標右鍵，在彈出的快捷菜單中選擇“添加新文件...”選項，在彈出的對話框中選擇“C++Class”選項。單擊“Choose...”按鈕，在彈出的對話框的“Baseclass”下拉列表框中選擇基類名“QWidget”，在“Classname”文本框中輸入類的名稱“DrawWidget”。（3）單擊“下一步”按鈕，單擊“完成”按鈕，添加文件“drawwidget.h”和文件“drawwidget.cpp”。原理與設計具體實現步驟如下。4502繪圖區的實現02繪圖區的實現46繪圖區的實現DrawWidget類繼承自QWidget類，在類聲明中對鼠標事件mousePressEvent()和mouseMoveEvent()、重畫事件paintEvent()、尺寸變化事件resizeEvent()進行了重定義。setStyle()、setWidth()及setColor()函數主要用于為主窗口傳遞各種與繪圖有關的參數。（1）打開“drawwidget.h”頭文件，添加的代碼。（2）打開“drawwidget.cpp”文件，DrawWidget構造函數完成對窗體參數及部分功能的初始化工作，具體代碼如下：#include"drawwidget.h"#include<QtGui>#include<QPen>DrawWidget::DrawWidget(QWidget*parent):QWidget(parent){setAutoFillBackground(true); //對窗體背景色的設置setPalette(QPalette(Qt::white));pix=newQPixmap(size()); //此QPixmap對象用于準備隨時接收繪制的內容pix->fill(Qt::white); //填充背景色為白色setMinimumSize(600,400); //設置繪制區窗體的最小尺寸}繪圖區的實現DrawWidget類繼承自QWidget類，在47繪圖區的實現setStyle()函數接收主窗口傳來的線型風格參數，setWidth()函數接收主窗口傳來的線寬參數值，setColor()函數接收主窗口傳來的畫筆顏色值。具體代碼如下：voidDrawWidget::setStyle(ints){style=s;}voidDrawWidget::setWidth(intw){weight=w;}voidDrawWidget::setColor(QColorc){color=c;}重定義鼠標按下事件mousePressEvent()，在按下鼠標按鍵時，記錄當前的鼠標位置值startPos。voidDrawWidget::mousePressEvent(QMouseEvent*e){startPos=e->pos();}繪圖區的實現setStyle()函數接收主窗口傳來的線型風格48繪圖區的實現QWidget的mouseTracking屬性指示窗體是否追蹤鼠標，默認為false（不追蹤），即在至少有一個鼠標按鍵被按下的前提下移動鼠標才觸發mouseMoveEvent()事件，可以通過setMouseTracking(boolenable)方法對該屬性值進行設置。如果設置為追蹤，則無論鼠標按鍵是否被按下，只要鼠標移動，就會觸發mouseMoveEvent()事件。在此事件處理函數中，完成向QPixmap對象中繪圖的工作。具體代碼如下：voidDrawWidget::mouseMoveEvent(QMouseEvent*e){QPainter*painter=newQPainter; //新建一個QPainter對象QPenpen; //新建一個QPen對象pen.setStyle((Qt::PenStyle)style); //(a)pen.setWidth(weight); //設置畫筆的線寬值pen.setColor(color); //設置畫筆的顏色painter->begin(pix); //(b)painter->setPen(pen); //將QPen對象應用到繪制對象中

//繪制從startPos到鼠標當前位置的直線painter->drawLine(startPos,e->pos());painter->end();startPos=e->pos(); //更新鼠標的當前位置，為下次繪制做準備update(); //重繪繪制區窗體}繪圖區的實現QWidget的mouseTracking屬性指49繪圖區的實現下面是使用begin()和end()函數的一個例子：voidMyWidget::paintEvent(QPaintEvent*){QPainterp;p.begin(this);p.drawLine(...);p.end();}類似于下面的形式：voidMyWidget::paintEvent(QPaintEvent*){QPainterp(this);p.drawLine(...);}繪圖區的實現下面是使用begin()和end()函數的一個例50繪圖區的實現重畫函數paintEvent()完成繪制區窗體的更新工作，只需調用drawPixmap()函數將用于接收圖形繪制的QPixmap對象繪制在繪制區窗體控件上即可。具體代碼如下：voidDrawWidget::paintEvent(QPaintEvent*){QPainterpainter(this);painter.drawPixmap(QPoint(0,0),*pix);}調整繪制區大小函數resizeEvent()，當窗體的大小發生改變時，效果看起來雖然像是繪制區大小改變了，但實際能夠進行繪制的區域仍然沒有改變。因為繪圖的大小并沒有改變，還是原來繪制區窗口的大小，所以在窗體尺寸變化時應及時調整用于繪制的QPixmap對象的大小。具體代碼如下：voidDrawWidget::resizeEvent(QResizeEvent*event){if(height()>pix->height()||width()>pix->width()) //(a){QPixmap*newPix=newQPixmap(size()); //創建一個新的QPixmap對象newPix->fill(Qt::white); //填充新QPixmap對象newPix的顏色為白色背景色QPainterp(newPix);p.drawPixmap(QPoint(0,0),*pix); //在newPix中繪制原pix中的內容pix=newPix;

//將newPix賦值給pix作為新的繪制圖形接收對象}QWidget::resizeEvent(event); //完成其余的工作}繪圖區的實現重畫函數paintEvent()完成繪制區窗體的51繪圖區的實現clear()函數完成繪制區的清除工作，只需調用一個新的、干凈的QPixmap對象來代替pix，并調用update()函數重繪即可。具體代碼如下：voidDrawWidget::clear(){QPixmap*clearPix=newQPixmap(size());clearPix->fill(Qt::white);pix=clearPix;update();}繪圖區的實現clear()函數完成繪制區的清除工作，只需調用5203主窗口的實現03主窗口的實現53主窗口的實現主窗口類MainWindow繼承自QMainWindow類，只包含一個工具欄和一個中央窗體。首先，聲明一個構造函數、一個用于創建工具欄的函數createToolBar()、一個用于進行選擇線型風格的槽函數ShowStyle()和一個用于進行顏色選擇的槽函數ShowColor()。然后，聲明一個DrawWidget類對象作為主窗口的私有變量，以及聲明代表線型風格、線寬選擇、顏色選擇及清除按鈕的私有變量。（1）打開“mainwindow.h”文件，添加如下代碼。主窗口的實現主窗口類MainWindow繼承自QMainWi54主窗口的實現（2）打開“mainwindow.cpp”文件，MainWindow類的構造函數完成初始化工作，各個功能見注釋說明，具體代碼如下：#include"mainwindow.h"#include<QToolBar>#include<QColorDialog>MainWindow::MainWindow(QWidget*parent):QMainWindow(parent){drawWidget=newDrawWidget; //新建一個DrawWidget對象setCentralWidget(drawWidget); //新建的DrawWidget對象作為主窗口的中央窗體createToolBar(); //實現一個工具欄setMinimumSize(600,400); //設置主窗口的最小尺寸ShowStyle(); //初始化線型，設置控件中的當前值作為初始值drawWidget->setWidth(widthSpinBox->value());//初始化線寬drawWidget->setColor(Qt::black); //初始化顏色}createToolBar()函數完成工具欄的創建。主窗口的實現（2）打開“mainwindow.cpp”文件，55主窗口的實現改變線型參數的槽函數ShowStyle()，通過調用DrawWidget類的setStyle()函數將當前線型選擇控件中的線型參數傳給繪制區；設置畫筆顏色的槽函數ShowColor()，通過調用DrawWidget類的setColor()函數將用戶在標準顏色對話框中選擇的顏色值傳給繪制區。這兩個函數的具體代碼如下：voidMainWindow::ShowStyle(){drawWidget->setStyle(styleComboBox->itemData(styleComboBox->currentIndex(),Qt::UserRole).toInt());}voidMainWindow::ShowColor(){QColorcolor=QColorDialog::getColor(static_cast<int>(Qt::black),this); //使用標準顏色對話框QColorDialog獲得一個顏色值if(color.isValid()){ //將新選擇的顏色傳給繪制區，用于改變畫筆的顏色值drawWidget->setColor(color); QPixmapp(20,20);p.fill(color);colorBtn->setIcon(QIcon(p)); //更新顏色選擇按鈕上的顏色顯示}}主窗口的實現改變線型參數的槽函數ShowStyle()，通過56主窗口的實現（3）打開“main.cpp”文件，添加如下代碼：#include<QFont>intmain(intargc,char*argv[]){QApplicationa(argc,argv);QFontfont("ZYSong18030",12);a.setFont(font);MainWindoww;w.show();returna.exec();}（4）運行程序，顯示效果如圖6.18所示。主窗口的實現（3）打開“main.cpp”文件，添加如下代碼57第6章

Qt5圖形與圖片——顯示Qt5SVG格式圖片第6章Qt5圖形與圖片——顯示Qt5SVG格式圖片顯示Qt5SVG格式圖片SVG的英文全稱是ScalableVectorGraphics，即可縮放的矢量圖形。它是由萬維網聯盟（WorldWideWebConsortium，W3C）在2000年8月制定的一種新的二維矢量圖形格式，也是規范中的網格矢量圖形標準，是一個開放的圖形標準。SVG格式的特點如下。（1）基于XML。（2）采用文本來描述對象。（3）具有交互性和動態性。（4）完全支持DOM。顯示Qt5SVG格式圖片SVG的英文全稱是Scalabl59顯示Qt5SVG格式圖片【例】（難度一般）（CH604）通過利用QSvgWidget類和QSvgRender類實現一個SVG圖片瀏覽器，顯示以“.svg”結尾的文件以介紹SVG格式圖片顯示的方法，如圖6.20所示。此實例由三個層次的窗體構成，如圖6.21所示。在完成此功能的程序中使用與SVG相關的類，必須在程序中包含SVG相關的頭文件：

#include<QtSvg>由于Qt默認生成的Makefile中只加入了QtGui、QtCore模塊的庫，所以必須在工程文件“.pro”中加入一行代碼：

QT+=svg這樣才可在編譯時加入QtSvg的庫。顯示Qt5SVG格式圖片【例】（難度一般）（CH604）60顯示Qt5SVG格式圖片具體實現步驟如下。（1）新建QtWidgetsApplication（詳見1.3.1節），項目名稱為“SVGTest”，基類選擇“QMainWindow”，類名命名默認為“MainWindow”，取消“創建界面”復選框的選中狀態。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項目工程的建立。（2）下面添加該工程的提供實現一個帶滾動條顯示區域的函數所在的文件。在“SVGTest”項目名上單擊鼠標右鍵，在彈出的快捷菜單中選擇“添加新文件...”選項，在彈出的對話框中選擇“C++Class”選項。單擊“Choose...”按鈕，在彈出的對話框的“Baseclass”文本框中輸入基類名“QScrollArea”（手工添加），在“Classname”文本框中輸入類的名稱“SvgWindow”。（3）單擊“下一步”按鈕，單擊“完成”按鈕，添加文件“svgwindow.h”和文件“svgwindow.cpp”。（4）添加該工程的提供實現顯示SVG圖片的函數所在的文件。在“SVGTest”項目名上單擊鼠標右鍵，在彈出的快捷菜單中選擇“添加新文件...”選項，在彈出的對話框中選擇“C++Class”選項。單擊“Choose...”按鈕，在彈出的對話框的“Baseclass”文本框中輸入基類名“QSvgWidget”（手工添加），在“Classname”文本框中輸入類的名稱“SvgWidget”。顯示Qt5SVG格式圖片具體實現步驟如下。61顯示Qt5SVG格式圖片（5）單擊“下一步”按鈕，單擊“完成”按鈕，添加文件“svgwidget.h”和文件“svgwidget.cpp”。（6）打開“svgwidget.h”頭文件。SvgWidget類繼承自QSvgWidget類，主要顯示SVG圖片。具體代碼如下：#include<QtSvg>#include<QSvgWidget>#include<QSvgRenderer>classSvgWidget:publicQSvgWidget{Q_OBJECTpublic:SvgWidget(QWidget*parent=0);voidwheelEvent(QWheelEvent*);//響應鼠標的滾輪事件，使SVG圖片能夠通過鼠標滾輪的滾動進行縮放private:QSvgRenderer*render; //用于圖片顯示尺寸的確定};顯示Qt5SVG格式圖片（5）單擊“下一步”按鈕，單擊“62顯示Qt5SVG格式圖片（7）打開“svgwidget.cpp”文件，SvgWidget構造函數獲得本窗體的QSvgRenderer對象。具體代碼如下：SvgWidget::SvgWidget(QWidget*parent):QSvgWidget(parent){render=renderer();}顯示Qt5SVG格式圖片（7）打開“svgwidget.63顯示Qt5SVG格式圖片以下是鼠標滾輪的響應事件，使SVG圖片能夠通過鼠標滾輪的滾動進行縮放。具體代碼如下：voidSvgWidget::wheelEvent(QWheelEvent*e){ constdoublediff=0.1; //(a) QSizesize=render->defaultSize();

//(b) intwidth=size.width(); intheight=size.height(); if(e->delta()>0) //(c) {//對圖片的長、寬值進行處理，放大一定的比例width=int(this->width()+this->width()*diff);height=int(this->height()+this->height()*diff); } else { //對圖片的長、寬值進行處理，縮小一定的比例width=int(this->width()-this->width()*diff);height=int(this->height()-this->height()*diff); } resize(width,height); //利用新的長、寬值對圖片進行resize()操作}顯示Qt5SVG格式圖片以下是鼠標滾輪的響應事件，使SV64顯示Qt5SVG格式圖片其中，(a)constdoublediff=0.1：diff的值表示每次滾輪滾動一定的值，圖片大小改變的比例。(b)QSizesize=render->defaultSize()：該行代碼及下面兩行代碼用于獲取圖片顯示區的尺寸，以便進行下一步的縮放操作。(c)if(e->delta()>0)：利用QWheelEvent的delta()函數獲得滾輪滾動的距離值，通過此值來判斷滾輪滾動的方向。若delta()值大于零，則表示滾輪向前（遠離用戶的方向）滾動；若小于零則表示向后（靠近用戶的方向）滾動。顯示Qt5SVG格式圖片其中，65顯示Qt5SVG格式圖片（8）SvgWindow類繼承自QScrollArea類，是一個帶滾動條的顯示區域。在SvgWindow實現中包含SvgWidget類的頭文件。SvgWindow類使圖片在放大到超過主窗口大小時，能夠通過拖曳滾動條的方式進行查看。打開“svgwindow.h”頭文件，具體代碼如下：#include<QScrollArea>#include"svgwidget.h"classSvgWindow:publicQScrollArea{Q_OBJECTpublic:SvgWindow(QWidget*parent=0);voidsetFile(QString);voidmousePressEvent(QMouseEvent*);voidmouseMoveEvent(QMouseEvent*);private:SvgWidget*svgWidget;QPointmousePressPos;QPointscrollBarValuesOnMousePress;};顯示Qt5SVG格式圖片（8）SvgWindow類繼承自66顯示Qt5SVG格式圖片（9）SvgWindow類的構造函數，構造SvgWidget對象，并調用QScrollArea類的setWidget()函數設置滾動區的窗體，使svgWidget成為SvgWindow的子窗口。打開“svgwindow.cpp”文件，具體代碼如下：SvgWindow::SvgWindow(QWidget*parent):QScrollArea(parent){svgWidget=newSvgWidget;setWidget(svgWidget);}當主窗口中對文件進行了選擇或修改時，將調用setFile()函數設置新的文件，具體代碼如下：voidSvgWindow::setFile(QStringfileName){svgWidget->load(fileName); //(a)QSvgRenderer*render=svgWidget->renderer();svgWidget->resize(render->defaultSize()); //(b)}其中，(a)svgWidget->load(fileName)：將新的SVG文件加載到svgWidget中進行顯示。(b)svgWidget->resize(render->defaultSize())：使svgWidget窗體按SVG圖片的默認尺寸進行顯示。顯示Qt5SVG格式圖片（9）SvgWindow類的構造67顯示Qt5SVG格式圖片當鼠標鍵被按下時，對mousePressPos和scrollBarValuesOnMousePress進行初始化，QScrollArea類的horizontalScrollBar()和verticalScrollBar()函數可以分別獲得svgWindow的水平滾動條和垂直滾動條。具體代碼如下：voidSvgWindow::mousePressEvent(QMouseEvent*event){mousePressPos=event->pos();scrollBarValuesOnMousePress.rx()=horizontalScrollBar()->value();scrollBarValuesOnMousePress.ry()=verticalScrollBar()->value();event->accept();}當鼠標鍵被按下并拖曳鼠標時觸發mouseMoveEvent()函數，通過滾動條的位置設置實現圖片拖曳的效果，具體代碼如下：voidSvgWindow::mouseMoveEvent(QMouseEvent*event){horizontalScrollBar()->setValue(scrollBarValuesOnMousePress.x()-event->pos().x()+mousePressPos.x()); //對水平滾動條的新位置進行設置verticalScrollBar()->setValue(scrollBarValuesOnMousePress.y()-event->pos().y()+mousePressPos.y()); //對垂直滾動條的新位置進行設置horizontalScrollBar()->update();verticalScrollBar()->update();event->accept();}顯示Qt5SVG格式圖片當鼠標鍵被按下時，對mouseP68顯示Qt5SVG格式圖片（10）主窗口MainWindow繼承自QMainWindow類，包含一個菜單欄，其中有一個“文件”菜單條，包含一個“打開”菜單項。打開“mainwindow.h”頭文件，具體代碼如下：#include<QMainWindow>#include"svgwindow.h"classMainWindow:publicQMainWindow{Q_OBJECTpublic:MainWindow(QWidget*parent=0);~MainWindow();voidcreateMenu();publicslots:voidslotOpenFile();private:SvgWindow*svgWindow; //用于調用相關函數傳遞選擇的文件名};顯示Qt5SVG格式圖片（10）主窗口MainWindo69顯示Qt5SVG格式圖片（11）在MainWindow構造函數中，創建一個SvgWindow對象作為主窗口的中央窗體。打開“mainwindow.cpp”文件，具體代碼如下：MainWindow::MainWindow(QWidget*parent):QMainWindow(parent){setWindowTitle(tr("SVGViewer"));createMenu();svgWindow=newSvgWindow;setCentralWidget(svgWindow);}創建菜單欄，具體代碼如下：voidMainWindow::createMenu(){QMenu*fileMenu=menuBar()->addMenu(tr("文件"));QAction*openAct=newQAction(tr("打開"),this);connect(openAct,SIGNAL(triggered()),this,SLOT(slotOpenFile()));fileMenu->addAction(openAct);}顯示Qt5SVG格式圖片（11）在MainWindow構70顯示Qt5SVG格式圖片通過標準文件對話框選擇SVG文件，并調用SvgWindow的setFile()函數將選擇的文件名傳遞給svgWindow進行顯示，具體代碼如下：voidMainWindow::slotOpenFile(){QStringname=QFileDialog::getOpenFileName(this,"打開","/","svgfiles(*.svg)");svgWindow->setFile(name);}（12）運行程序，打開一張SVG圖片，查看預覽效果，如圖6.20所示。顯示Qt5SVG格式圖片通過標準文件對話框選擇SVG文件71第6章

Qt5圖形與圖片——Qt5SVG格式圖片顯示：概念解析第6章Qt5圖形與圖片——Qt5SVG格式圖片顯示00XML00XML73XML文檔對象模型（DocumentObjectModel，DOM）是W3C開發的獨立于平臺和語言的接口，它可以使程序和腳本動態地存取和更新XML文檔的內容、結構和風格。DOM在內存中將XML文件表示為一棵樹，用戶通過API可以隨意地訪問樹的任意節點內容。在Qt中，XML文檔自身用QDomDocument表示，所有的節點類都從QDomNode繼承。SVG文件是利用XML表示的矢量圖形文件，每種圖形都用XML標簽表示。例如，在SVG中畫折線的標簽如下：<polylinefill="none"stroke="#888888"stroke-width="2"points="100,200,100,100"/>其中，polyline：表示繪制折線。fill：屬性表示填充。stroke：表示畫筆顏色。stroke-width：表示畫筆寬度。points：表示折線的點。XML文檔對象模型（DocumentObjectMode74第6章

Qt5圖形與圖片——Qt5位置相關函數第6章Qt5圖形與圖片——Qt5位置相關函數01區

別

概

述01區別概述76區

別

概

述Qt提供了很多關于獲取窗體位置及顯示區域大小的函數，如x()、y()和pos()、rect()、size()、geometry()等，統稱為“位置相關函數”或“位置函數”。幾種主要位置函數及其之間的區別如圖6.1所示。區別概述Qt提供了很多關于獲取窗體位置及顯示區域77區

別

概

述其中，x()、y()和pos()函數的作用都是獲得整個窗體左上角的坐標位置。frameGeometry()函數與geometry()函數相對應。frameGeometry()函數是獲得整個窗體的左上頂點和長、寬值，而geometry()函數獲得的是窗體內中央區域的左上頂點坐標及長、寬值。

直接調用width()和height()函數獲得的是中央區域的長、寬值。rect()、size()函數獲得