第7章Qt5圖形視圖框架

1、第7章 Qt 5圖形視圖框架圖形視圖體系結(jié)構(gòu)圖形視圖體系結(jié)構(gòu)7.17.2【實(shí)例】：圖形視圖【實(shí)例】：圖形視圖7.1 圖形視圖體系結(jié)構(gòu)圖形視圖體系結(jié)構(gòu)7.1.1 Graphics View的特點(diǎn)的特點(diǎn)Graphics View框架結(jié)構(gòu)的主要特點(diǎn)如下。（1）Graphics View框架結(jié)構(gòu)中，系統(tǒng)可以利用Qt繪圖系統(tǒng)的反鋸齒、OpenGL工具來改善繪圖性能。（2）Graphics View支持事件傳播體系結(jié)構(gòu)，可以使圖元在場景（scene）中的交互能力提高1倍，圖元能夠處理鍵盤事件和鼠標(biāo)事件。其中，鼠標(biāo)事件包括鼠標(biāo)按下、移動(dòng)、釋放和雙擊，還可以跟蹤鼠標(biāo)的移動(dòng)。（3）在Graphics View框

2、架中，通過二元空間劃分樹（Binary Space Partitioning，BSP）提供快速的圖元查找，這樣就能夠?qū)崟r(shí)地顯示包含上百萬個(gè)圖元的大場景。7.1.2 Graphics View的三元素的三元素它們?nèi)咧g的關(guān)系如圖7.1所示。7.1.2 Graphics View的三元素的三元素1場景類：場景類：QGraphicsScene類類場景類主要完成的工作包括提供對(duì)它包含的圖元的操作接口和傳遞事件、管理各個(gè)圖元的狀態(tài)（如選擇和焦點(diǎn)處理）、提供無變換的繪制功能（如打印）等。事件傳播體系結(jié)構(gòu)將場景事件發(fā)送給圖元，同時(shí)也管理圖元之間的事件傳播。如果場景接收到了在某一點(diǎn)的鼠標(biāo)單擊事件，場景會(huì)將事

3、件傳給在這一點(diǎn)的圖元。管理各個(gè)圖元的狀態(tài)（如選擇和焦點(diǎn)處理）?？梢酝ㄟ^QGraphicsScene: setSelectionArea()函數(shù)選擇圖元，選擇區(qū)域可以是任意的形狀，使用QPainterPath表示。若要得到當(dāng)前選擇的圖元列表，則可以使用函數(shù)QGraphicsScene: selectedItems()?？梢酝ㄟ^QGraphicsScene: setFocusItem()函數(shù)或QGraphicsScene: setFocus()函數(shù)來設(shè)置圖元的焦點(diǎn)，獲得當(dāng)前具有焦點(diǎn)的圖元使用函數(shù)QGraphicsScene:focusItem()。7.1.2 Graphics View的三元素的三

4、元素2視圖類：視圖類：QGraphicsView類類它提供一個(gè)可視的窗口，用于顯示場景中的圖元。在同一個(gè)場景中可以有多個(gè)視圖，也可以為相同的數(shù)據(jù)集提供幾種不同的視圖。QGraphicsView是可滾動(dòng)的窗口部件，可以提供滾動(dòng)條來瀏覽大的場景。如果需要使用OpenGL，則可以使用QGraphicsView:setViewport()將視圖設(shè)置為QGLWidget。視圖接收鍵盤和鼠標(biāo)的輸入事件，并將它們翻譯為場景事件（將坐標(biāo)轉(zhuǎn)換為場景的坐標(biāo)）。使用變換矩陣函數(shù)QGraphicsView:matrix()可以變換場景的坐標(biāo)，實(shí)現(xiàn)場景縮放和旋轉(zhuǎn)。QGraphicsView提供QGraphicsView

5、:mapToScene()和QGraphicsView: mapFromScene()用于與場景的坐標(biāo)進(jìn)行轉(zhuǎn)換。7.1.2 Graphics View的三元素的三元素3圖元類：圖元類：QGraphicsItem類類QGraphicsItem主要有以下幾點(diǎn)功能。 處理鼠標(biāo)按下、移動(dòng)、釋放、雙擊、懸停、滾輪和右鍵菜單事件。 處理鍵盤輸入事件。 處理拖曳事件。 分組。 碰撞檢測。7.1.3 GraphicsView的坐標(biāo)系統(tǒng)的坐標(biāo)系統(tǒng)1場景坐標(biāo)場景坐標(biāo)場景坐標(biāo)是所有圖元的基礎(chǔ)坐標(biāo)系統(tǒng)。場景坐標(biāo)系統(tǒng)描述了頂層的圖元，每個(gè)圖元都有場景坐標(biāo)和相應(yīng)的包容框。場景坐標(biāo)的原點(diǎn)在場景中心，坐標(biāo)原點(diǎn)是X軸正方向向右

6、，Y軸正方向向下。QGraphicsScene類的坐標(biāo)系以中心為原點(diǎn)（0,0），如圖7.2所示。7.1.3 GraphicsView的坐標(biāo)系統(tǒng)的坐標(biāo)系統(tǒng)2視圖坐標(biāo)視圖坐標(biāo)視圖坐標(biāo)是窗口部件的坐標(biāo)。視圖坐標(biāo)的單位是像素。QGraphicsView視圖的左上角是（0,0），X軸正方向向右，Y軸正方向向下。所有的鼠標(biāo)事件最開始都是使用視圖坐標(biāo)。QGraphicsView類繼承自QWidget類，因此它與其他的QWidget類一樣，以窗口的左上角作為自己坐標(biāo)系的原點(diǎn)，如圖7.3所示。7.1.3 GraphicsView的坐標(biāo)系統(tǒng)的坐標(biāo)系統(tǒng)3圖元坐標(biāo)圖元坐標(biāo)圖元使用自己的本地坐標(biāo)，這個(gè)坐標(biāo)系統(tǒng)通常以圖元

7、中心為原點(diǎn)，這也是所有變換的原點(diǎn)。圖元坐標(biāo)方向是X軸正方向向右，Y軸正方向向下。創(chuàng)建圖元后，只需注意圖元坐標(biāo)就可以了，QGraphicsScene和QGraphicsView會(huì)完成所有的變換。QgraphicsItem類的坐標(biāo)系，若在調(diào)用QgraphicsItem類的paint()函數(shù)重繪圖元時(shí)，則以此坐標(biāo)系為基準(zhǔn)，如圖7.4所示。7.1.3 GraphicsView的坐標(biāo)系統(tǒng)的坐標(biāo)系統(tǒng)Graphics View框架提供了多種坐標(biāo)變換函數(shù)，見表7.1。映 射 函 數(shù)轉(zhuǎn) 換 類 型QgraphicsView:mapToScene()視圖到場景QgraphicsView:mapFromScene(

8、)場景到視圖QgraphicsItem: mapFromScene()場景到圖元QGraphicsItem: mapToScene()圖元到場景QGraphicsItem: mapToParent()子圖元到父圖元QGraphicsItem: mapFromParent()父圖元到子圖元QGraphicsItem: mapToItem()本圖元到其他圖元QGraphicsItem: mapFromItem()其他圖元到本圖元7.2 【實(shí)例】：圖形視圖【實(shí)例】：圖形視圖7.2.1 飛舞的蝴蝶飛舞的蝴蝶以下是實(shí)現(xiàn)上述例子的具體操作步驟。（1）新建Qt Widgets Application（詳見1

9、.3.1節(jié)），項(xiàng)目名為“Butterfly”，基類選擇“QMainWindow”，類名命名默認(rèn)為“MainWindow”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項(xiàng)目工程的建立。（2）在“Butterfly”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加新文件.”菜單項(xiàng)，在彈出的對(duì)話框中選擇“C+ Class”選項(xiàng)。單擊“Choose.”按鈕，彈出對(duì)話框，在“Base class”后面的下拉列表框中選擇基類名“QObject”，在“Class name”后面的文本框中輸入類的名稱“Butterfly”。（3）單擊“下一步”按鈕，單擊“完成”按鈕，添

10、加文件“butterfly.h”和“butterfly. cpp”。7.2.1 飛舞的蝴蝶飛舞的蝴蝶（4）Butterfly類繼承自QObject類、QGraphicsItem類，在頭文件“butterfly.h”中完成的代碼具體內(nèi)容。（5）在源文件“butterfly. cpp”中完成的代碼具體內(nèi)容如下：#include butterfly.h#include const static double PI=3.1416;Butterfly:Butterfly(QObject *parent) up = true;/給標(biāo)志蝴蝶翅膀位置的變量賦初值 pix_up.load(up.png);/調(diào)用

11、QPixmap的load()函數(shù)加載所用到的圖片 pix_down.load(down.png); startTimer(100);/啟動(dòng)定時(shí)器，并設(shè)置時(shí)間間隔為100毫秒7.2.1 飛舞的蝴蝶飛舞的蝴蝶boundingRect()函數(shù)為圖元限定區(qū)域范圍。此范圍是以圖元自身的坐標(biāo)系為基礎(chǔ)設(shè)定的。具體實(shí)現(xiàn)代碼內(nèi)容如下：QRectF Butterfly:boundingRect() const qreal adjust =2; return QRectF(-pix_up.width()/2-adjust,-pix_up.height()/2-adjust, pix_up.width()+adjus

12、t*2,pix_up.height()+adjust*2);7.2.1 飛舞的蝴蝶飛舞的蝴蝶在重畫函數(shù)paint()中，首先判斷當(dāng)前已顯示的圖片是pix_up還是pix_down。實(shí)現(xiàn)蝴蝶翅膀上下飛舞效果時(shí)，若當(dāng)前顯示的是pix_up圖片，則重繪pix_down圖片，反之亦然。具體實(shí)現(xiàn)代碼內(nèi)容如下：void Butterfly:paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) if(up) painter-drawPixmap(boundingRect().topLeft(),pi

13、x_up); up=!up; else painter-drawPixmap(boundingRect().topLeft(),pix_down); up=!up; 7.2.1 飛舞的蝴蝶飛舞的蝴蝶定時(shí)器的timerEvent()函數(shù)實(shí)現(xiàn)蝴蝶的飛舞，具體實(shí)現(xiàn)代碼內(nèi)容如下：void Butterfly:timerEvent(QTimerEvent *) /邊界控制 qreal edgex=scene()-sceneRect().right()+boundingRect().width()/2;/限定蝴蝶飛舞的右邊界 qreal edgetop=scene()-sceneRect().top()+

14、boundingRect(). height()/2;/限定蝴蝶飛舞的上邊界 qreal edgebottom=scene()-sceneRect().bottom()+boundingRect(). height()/2;/限定蝴蝶飛舞的下邊界 if(pos().x()=edgex)/若超過了右邊界，則水平移回左邊界處 setPos(scene()-sceneRect().left(),pos().y(); if(pos().y()sceneRect().bottom(); if(pos().y()=edgebottom)/若超過了下邊界，則垂直移回上邊界處 setPos(pos().x()

15、,scene()-sceneRect().top(); angle+=(qrand()%10)/20.0; qreal dx=fabs(sin(angle*PI)*10.0); qreal dy=(qrand()%20)-10.0; setPos(mapToParent(dx,dy);/(a)7.2.1 飛舞的蝴蝶飛舞的蝴蝶（6）完成了蝴蝶圖元的實(shí)現(xiàn)后，在源文件“main.cpp”中將它加載到場景中，并關(guān)聯(lián)一個(gè)視圖，具體實(shí)現(xiàn)代碼內(nèi)容如下：#include #include butterfly.h#include int main(int argc,char* argv) QApplicatio

16、n a(argc,argv); QGraphicsScene *scene = new QGraphicsScene; scene-setSceneRect(QRectF(-200,-200,400,400); Butterfly *butterfly = new Butterfly; butterfly-setPos(-100,0); scene-addItem(butterfly); QGraphicsView *view = new QGraphicsView; view-setScene(scene); view-resize(400,400); view-show(); return

17、 a.exec();7.2.1 飛舞的蝴蝶飛舞的蝴蝶（7）運(yùn)行程序，將程序中用到的圖片保存到該工程的D:QtCH7CH701 build-Butterfly-Desktop_Qt_5_4_0_MinGW_32bit-Debug文件夾中，運(yùn)行結(jié)果如圖7.5所示。7.2.2 地圖瀏覽器地圖瀏覽器 通過實(shí)現(xiàn)一個(gè)地圖瀏覽器的基本功能（包括地圖的瀏覽、放大、縮小，以及顯示各點(diǎn)的坐標(biāo)等）的例子，如圖7.6所示，介紹如何使用Graphics View框架。實(shí)例文件見光盤CH702。7.2.2 地圖瀏覽器地圖瀏覽器 以下是實(shí)現(xiàn)這個(gè)例子的具體操作步驟。（1）新建Qt Widgets Application （詳

18、見1.3.1節(jié)），項(xiàng)目名稱為“MapWidget”，基類選擇“QMainWindow”，類名命名默認(rèn)為“MainWindow”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項(xiàng)目工程的建立。（2）在“MapWidget”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加新文件.”菜單項(xiàng)，在彈出的對(duì)話框中選擇“C+ Class”選項(xiàng)。單擊“Choose.”按鈕，彈出對(duì)話框，在“Base class”后面的下拉列表框中輸入基類名“QGraphicsView”（手工添加），在“Class name”后面的文本框中輸入類的名稱“MapWidget”。7.2.2 地圖

19、瀏覽器地圖瀏覽器 （3）單擊“下一步”按鈕，單擊“完成”按鈕，添加文件“mapwidget.h”和文件“mapwidget.cpp”。（4）MapWidget類繼承自QGraphicsView類，作為地圖瀏覽器的主窗體。在頭文件“mapwidget.h”中完成的代碼。（5）在源文件“mapwidget.cpp”中完成的代碼。（6）新建一個(gè)文本文件“maps.txt”，利用該文本文件描述與地圖相關(guān)的信息，將該文件保存在該工程下的D:QtCH7CH702 build-MapWidget-Desktop_Qt_5_ 4_0_ MinGW_32bit-Debug文件中，文件內(nèi)容為：China.jpg

20、114.4665527 35.96022297 119.9597168 31.39115757.2.2 地圖瀏覽器地圖瀏覽器 （7）打開“mapwidget.cpp”文件，添加讀取地圖信息readMap()函數(shù)的具體實(shí)現(xiàn)代碼如下：void MapWidget:readMap() /讀取地圖信息 QString mapName; QFile mapFile(maps.txt);/(a) int ok = mapFile.open(QIODevice:ReadOnly);/以“只讀”方式打開此文件 if(ok)/分別讀取地圖的名稱和四個(gè)經(jīng)緯度信息 QTextStream ts(&mapFi

21、le); if(!ts.atEnd() tsmapName; tsx1y1x2y2; map.load(mapName);/將地圖讀取至私有變量map中7.2.2 地圖瀏覽器地圖瀏覽器 根據(jù)縮放滑動(dòng)條的當(dāng)前值，確定縮放的比例，調(diào)用scale()函數(shù)實(shí)現(xiàn)地圖縮放。完成地圖縮放功能的slotZoom()函數(shù)的具體實(shí)現(xiàn)代碼內(nèi)容如下：void MapWidget:slotZoom(int value) /地圖縮放 qreal s; if(valuezoom) /放大 s=pow(1.01,(value-zoom); else /縮小 s=pow(1/1.01,(zoom-value); scale(s

22、,s); zoom = value;7.2.2 地圖瀏覽器地圖瀏覽器 QGraphicsView類的drawBackground()函數(shù)中以地圖圖片重繪場景的背景來實(shí)現(xiàn)地圖顯示。具體實(shí)現(xiàn)代碼。void MapWidget:drawBackground(QPainter *painter, const QRectF &rect) painter-drawPixmap(int(sceneRect().left(),int(sceneRect(). top(), map);7.2.2 地圖瀏覽器地圖瀏覽器 響應(yīng)鼠標(biāo)移動(dòng)事件mouseMoveEvent()函數(shù)，完成某點(diǎn)在各層坐標(biāo)中的映射及顯示

23、。具體實(shí)現(xiàn)代碼如下：void MapWidget:mouseMoveEvent(QMouseEvent *event) /QGraphicsView 坐標(biāo) QPoint viewPoint = event-pos(); viewCoord-setText(QString:number(viewPoint.x()+,+ QString:number(viewPoint.y(); /QGraphicsScene 坐標(biāo) QPointF scenePoint = mapToScene(viewPoint); sceneCoord-setText(QString:number(scenePoint.x(

24、)+,+ QString:number(scenePoint.y(); /地圖坐標(biāo)(經(jīng)、緯度值) QPointF latLon = mapToMap(scenePoint); mapCoord-setText(QString:number(latLon.x()+,+ QString:number(latLon.y();7.2.2 地圖瀏覽器地圖瀏覽器 完成從場景坐標(biāo)至地圖坐標(biāo)的轉(zhuǎn)換mapToMap()函數(shù)。具體實(shí)現(xiàn)代碼如下：QPointF MapWidget:mapToMap(QPointF p) QPointF latLon; qreal w =sceneRect().width(); qr

25、eal h =sceneRect().height(); qreal lon = y1-(h/2+p.y()*abs(y1-y2)/h); qreal lat = x1+(w/2+p.x()*abs(x1-x2)/w); latLon.setX(lat); latLon.setY(lon); return latLon;7.2.2 地圖瀏覽器地圖瀏覽器 （8）下面是文件“main.cpp”的具體代碼：#include #include mapwidget.h#include int main(int argc, char *argv) QApplication a(argc, argv); Q

26、Font font(ARPL KaitiM GB,12); font.setBold(true); a.setFont(font); MapWidget mapWidget; mapWidget.show(); return a.exec();（9）將程序用到的圖片保存到該工程的D:QtCH7CH702 build-MapWidget- Desktop_Qt_5_4_0_MinGW_32bit-Debug文件夾中，運(yùn)行結(jié)果如圖7.6所示。7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建通過實(shí)現(xiàn)一個(gè)在其中顯示各種類型QGraphicsItem的窗體例子（如圖7.7所示），介紹如何使用Qt預(yù)定義的各種標(biāo)準(zhǔn)的QGrap

27、hicsItem類型（如QGraphicsEllipseItem、QGraphicsRectItem等），以及自定義的QGraphicsItem類型（如本例中不停閃爍的圓及來回移動(dòng)的星星等）來創(chuàng)建圖元。實(shí)例文件見光盤CH703。7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建以下是實(shí)現(xiàn)這個(gè)例子的具體操作步驟。（1）新建Qt Widgets Application（詳見1.3.1節(jié)），項(xiàng)目名稱為“GraphicsItem”，基類選擇“QMainWindow”，類名命名默認(rèn)為“MainWindow”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項(xiàng)目工程的建立。（2）MainWin

28、dow類繼承自QMainWindow作為主窗體，包含一個(gè)加入圖元的各種操作的菜單欄，以及一個(gè)顯示各種類型圖元的QGraphicsView作為主窗體的centralWidget?！癿ainwindow.h”文件的具體代碼實(shí)現(xiàn)內(nèi)容。（3）“mainwindow.cpp”文件中的代碼。7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（4）將程序中所用圖片保存到該工程的D:QtCH7CH703build-GraphicsItem- Desktop_Qt_5_4_0_MinGW_32bit-Debug文件夾下，此時(shí)運(yùn)行效果如圖7.8所示。7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建以上完成了主窗體的顯示工作，下面介紹如何實(shí)現(xiàn)圓的閃爍功能。

29、 （1）在“GraphicsItem”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加新文件.”菜單項(xiàng)，在彈出的對(duì)話框中選擇“C+ Class”選項(xiàng)。單擊“Choose.”按鈕，彈出對(duì)話框，在“Base class”后面的下拉列表框中選擇基類名“QObject”，在“Class name”后面的文本框中輸入類的名稱“FlashItem”。FlashItem類繼承自QGraphicsItem類和QObject類，閃爍效果是通過利用定時(shí)器的timerEvent()函數(shù)定時(shí)重畫圓的顏色來實(shí)現(xiàn)的。（2）單擊“下一步”按鈕，單擊“完成”按鈕，添加文件“flashitem.h”和文件“flashitem

30、.cpp”。7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（3）“flashitem.h”文件的具體代碼如下：#include #include class FlashItem : public QObject,public QGraphicsItem Q_OBJECTpublic: explicit FlashItem(QObject *parent = 0); QRectF boundingRect() const; void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget); void tim

31、erEvent(QTimerEvent *);private: bool flash; QTimer *timer;signals:public slots:;7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（4）“flashitem.cpp”文件的具體代碼如下：#include flashitem.hFlashItem:FlashItem(QObject *parent) : QObject(parent) flash=true;/為顏色切換標(biāo)識(shí)賦初值 setFlag(ItemIsMovable);/(a) startTimer(1000);/啟動(dòng)一個(gè)定時(shí)器，以1000毫秒為時(shí)間間隔7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建

32、定義圖元邊界的函數(shù)boundingRect()，完成以圖元坐標(biāo)系為基礎(chǔ)，增加兩個(gè)像素點(diǎn)的冗余工作。具體實(shí)現(xiàn)代碼如下：QRectF FlashItem:boundingRect() const qreal adjust = 2; return QRectF(-10-adjust,-10-adjust,43+adjust,43+adjust);7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建為自定義圖元重繪的函數(shù)paint()具體實(shí)現(xiàn)代碼如下：void FlashItem:paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget

33、*widget) painter-setPen(Qt:NoPen);/閃爍圖元的陰影區(qū)不繪制邊線 painter-setBrush(Qt:darkGray);/閃爍圖元的陰影區(qū)的陰影畫刷顏色為深灰 painter-drawEllipse(-7,-7,40,40); /繪制陰影區(qū) painter-setPen(QPen(Qt:black,0);/閃爍區(qū)的橢圓邊線顏色為黑色、線寬為0 painter-setBrush(flash?(Qt:red):(Qt:yellow);/(a) painter-drawEllipse(-10,-10,40,40);/(b)7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建定時(shí)器響應(yīng)函

34、數(shù)timerEvent()完成顏色切換標(biāo)識(shí)的反置，并在每次反置后調(diào)用update()函數(shù)重繪圖元以實(shí)現(xiàn)閃爍的效果。具體實(shí)現(xiàn)代碼如下：void FlashItem:timerEvent(QTimerEvent *) flash=!flash; update();7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（5）在“mainwindow.h”文件中添加代碼如下：public slots: void slotAddFlashItem();private: QAction *addFlashItemAct;7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（6）在“mainwindow.cpp”文件中添加代碼如下：#include fla

35、shitem.h其中，其中，在createActions()函數(shù)中添加代碼如下：addFlashItemAct = new QAction(tr(加入閃爍圓),this);connect(addFlashItemAct,SIGNAL(triggered(),this,SLOT(slotAddFlashItem();在createMenus()函數(shù)中添加代碼如下：itemsMenu-addAction(addFlashItemAct);在initScene()函數(shù)中添加代碼如下：for(i=0;iaddItem(item); item-setPos(qrand()%int(scene-scene

36、Rect().width()-200, (qrand()%int(scene-sceneRect().height()-200);7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（7）運(yùn)行效果如圖7.9所示。7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建下面將接著完成實(shí)現(xiàn)星星移動(dòng)的功能。（1）向項(xiàng)目中添加一個(gè)新的C+類，類名命名為“StartItem”，操作步驟同前。StartItem類繼承自QGraphicsItem類，實(shí)際上是一個(gè)圖片圖元?！皊tartitem.h”文件的具體代碼如下：#include #include class StartItem : public QGraphicsItempublic: StartIte

37、m(); QRectF boundingRect() const; void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);private: QPixmap pix;7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（2）StartItem構(gòu)造函數(shù)中僅完成讀取圖片信息的工作?！皊tartitem.cpp”文件中的具體代碼如下：#include startitem.hStartItem:StartItem() pix.load(star.png);定義圖元的邊界函數(shù)boundingRect()，所有自

38、定義圖元均必須實(shí)現(xiàn)的函數(shù)，代碼如下：QRectF StartItem:boundingRect() const return QRectF(-pix.width()/2,-pix.height()/2,pix.width(),pix. height();自定義圖元重繪函數(shù)paint()，代碼如下：void StartItem:paint(QPainter *painter, const QStyleOptionGraphicsItem *option,QWidget *widget) painter-drawPixmap(boundingRect().topLeft(),pix);7.2.3

39、圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（3）在“mainwindow.h”文件中添加代碼如下：public slots: void slotAddAnimationItem();private: QAction *addAnimItemAct;7.2.3 圖元?jiǎng)?chuàng)建圖元?jiǎng)?chuàng)建（4）在“mainwindow.cpp”文件中添加代碼如下：#include startitem.h#include #include 其中，其中，在createActions()函數(shù)中添加代碼如下：addAnimItemAct = new QAction(tr(加入 星星),this);connect(addAnimItemAct,SIGNAL(

40、triggered(),this,SLOT(slotAddAnimationItem();在createMenus()函數(shù)中添加代碼如下：itemsMenu-addAction(addAnimItemAct);在initScene()函數(shù)中添加代碼如下：for(i=0;isetItem(item); QTimeLine *timeLine = new QTimeLine(4000); timeLine-setCurveShape(QTimeLine:SineCurve); timeLine-setLoopCount(0); anim-setTimeLine(timeLine); int y =

41、(qrand()%400)-200; for(int i=0;isetPosAt(i/400.0,QPointF(i-200,y); timeLine-start(); scene-addItem(item);（5）最終運(yùn)行結(jié)果如圖7.7所示，圖中的小星星會(huì)不停地左右移動(dòng)。7.2.4 圖元的旋轉(zhuǎn)、縮放、切變和位移圖元的旋轉(zhuǎn)、縮放、切變和位移通過此實(shí)例介紹如何實(shí)現(xiàn)圖元（QGraphicsItem）的旋轉(zhuǎn)、縮放、切變及位移等各種變形操作，如圖7.10所示。實(shí)例文件見光盤CH704。7.2.4 圖元的旋轉(zhuǎn)、縮放、切變和位移圖元的旋轉(zhuǎn)、縮放、切變和位移（1）新建Qt Widgets Applicati

42、on（詳見1.3.1節(jié)），項(xiàng)目名稱為“ItemWidget”，基類選擇“QWidget”，類名命名為“MainWidget”，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。單擊“下一步”按鈕，最后單擊“完成”按鈕，完成該項(xiàng)目工程的建立。（2）MainWidget類繼承自QWidget，作為主窗體類，用于對(duì)圖元的顯示，包含一個(gè)控制面板區(qū)及一個(gè)顯示區(qū)。7.2.4 圖元的旋轉(zhuǎn)、縮放、切變和位移圖元的旋轉(zhuǎn)、縮放、切變和位移“mainwidget.h”文件中的代碼如下：#include #include #include #include class MainWidget : public QWidget Q_OB

43、JECTpublic: MainWidget(QWidget *parent = 0); MainWidget(); void createControlFrame();private: int angle; qreal scaleValue; qreal shearValue; qreal translateValue; QGraphicsView *view; QFrame *ctrlFrame;7.2.4 圖元的旋轉(zhuǎn)、縮放、切變和位移圖元的旋轉(zhuǎn)、縮放、切變和位移（3）“mainwidget.cpp”文件中的具體代碼。右側(cè)的控制面板區(qū)分為旋轉(zhuǎn)控制區(qū)、縮放控制區(qū)、切變控制區(qū)及位移控制區(qū)，每個(gè)

44、區(qū)均由包含一個(gè)QSlider對(duì)象的QGroupBox對(duì)象實(shí)現(xiàn)，具體實(shí)現(xiàn)代碼。（4）運(yùn)行效果如圖7.11所示。7.2.4 圖元的旋轉(zhuǎn)、縮放、切變和位移圖元的旋轉(zhuǎn)、縮放、切變和位移上面完成的是主窗體的功能，下面介紹用于變形顯示的圖元的制作。（1）在“ItemWidget”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加新文件.”菜單項(xiàng)，在彈出的對(duì)話框中選擇“C+ Class”選項(xiàng)。單擊“Choose.”按鈕，彈出對(duì)話框，在“Base class”后面的下拉列表框中輸入基類名“QGraphicsItem”（手工添加），在“Class name”后面的文本框中輸入類的名稱“PixItem”。（2）單

45、擊“下一步”按鈕，單擊“完成”按鈕，添加文件“pixitem.h”和文件“pixitem.cpp”。7.2.4 圖元的旋轉(zhuǎn)、縮放、切變和位移圖元的旋轉(zhuǎn)、縮放、切變和位移（3）自定義PixItem類繼承自QGraphicsItem類?！皃ixitem.h”文件中的具體代碼如下：#include #include #include class PixItem : public QGraphicsItempublic: PixItem(QPixmap *pixmap); QRectF boundingRect() const; void paint(QPainter *painter, const

46、QStyleOptionGraphicsItem *option, QWidget *widget);private: QPixmap pix; /作為圖元顯示的圖片;7.2.4 圖元的旋轉(zhuǎn)、縮放、切變和位移圖元的旋轉(zhuǎn)、縮放、切變和位移（4）PixItem的構(gòu)造函數(shù)只是初始化了變量pix。“pixitem.cpp”文件中的具體內(nèi)容如下：#include pixitem.hPixItem:PixItem(QPixmap *pixmap) pix = *pixmap;定義圖元邊界的函數(shù)boundingRect()，完成以圖元坐標(biāo)系為基礎(chǔ)增加兩個(gè)像素點(diǎn)的冗余的工作。具體實(shí)現(xiàn)代碼如下：QRectF P

47、ixItem:boundingRect() const return QRectF(-2-pix.width()/2,-2-pix.height()/2,pix.width()+4, pix. height()+4);重畫函數(shù)只需QPainter的drawPixmap()函數(shù)將圖元圖片繪出即可。具體代碼如下：void PixItem:paint(QPainter *painter, const QStyleOptionGraphicsItem *option,QWidget *widget) painter-drawPixmap(-pix.width()/2,-pix.height()/2,p

48、ix);7.2.4 圖元的旋轉(zhuǎn)、縮放、切變和位移圖元的旋轉(zhuǎn)、縮放、切變和位移（5）在“mainwidget.h”文件中添加代碼如下：#include pixitem.hprivate:PixItem *pixItem;（6）打開“mainwidget.cpp”文件，在語句scene-setSceneRect(-200,-200,400,400)與view = new QGraphicsView之間添加如下代碼：QPixmap *pixmap = new QPixmap(image.png);pixItem = new PixItem(pixmap);scene-addItem(pixItem);pixItem-setPos(0,0);7.2.4 圖元的旋轉(zhuǎn)、縮