Qt圖形視圖框架實(shí)用教案

1、 圖形(txng)視圖體系結(jié)構(gòu)7.1.1 Graphics View7.1.1 Graphics View的特點(diǎn)的特點(diǎn)（1 1）Graphics ViewGraphics View框架結(jié)構(gòu)中，系統(tǒng)可以利用框架結(jié)構(gòu)中，系統(tǒng)可以利用QtQt繪圖系統(tǒng)的反鋸齒、繪圖系統(tǒng)的反鋸齒、OpenGLOpenGL工具來改善繪圖性能。工具來改善繪圖性能。（2 2）Graphics ViewGraphics View支持事件傳播體系結(jié)構(gòu)，可以使圖元在場(chǎng)景支持事件傳播體系結(jié)構(gòu)，可以使圖元在場(chǎng)景（scenescene）中的交互能力）中的交互能力(nngl)(nngl)提高一倍，圖元能夠處理鍵盤事件和鼠標(biāo)提高一倍，圖元能

2、夠處理鍵盤事件和鼠標(biāo)事件。其中，鼠標(biāo)事件包括鼠標(biāo)按下、移動(dòng)、釋放和雙擊，還可以跟蹤鼠標(biāo)事件。其中，鼠標(biāo)事件包括鼠標(biāo)按下、移動(dòng)、釋放和雙擊，還可以跟蹤鼠標(biāo)的移動(dòng)。的移動(dòng)。（3 3）在）在Graphics ViewGraphics View框架中，通過二元空間劃分樹（框架中，通過二元空間劃分樹（Binary Space Binary Space PartitioningPartitioning，BSPBSP）提供快速的圖元查找，這樣就能夠?qū)崟r(shí)地顯示包含上）提供快速的圖元查找，這樣就能夠?qū)崟r(shí)地顯示包含上百萬個(gè)圖元的大場(chǎng)景。百萬個(gè)圖元的大場(chǎng)景。第1頁/共17頁第一頁，共18頁。7.1.2 Graphi

3、cs View的三元素(yun s)Graphics View框架結(jié)構(gòu)主要包含三個(gè)類，場(chǎng)景類（QGraphicsScene）、視圖類（QGraphicsView）和圖元類（QGraphicsItem），統(tǒng)稱為“三元素(yun s)”。它們?nèi)咧g的關(guān)系如圖所示。第2頁/共17頁第二頁，共18頁。7.1.3 GraphicsView的坐標(biāo)(zubio)系統(tǒng)1 1場(chǎng)景坐標(biāo)場(chǎng)景坐標(biāo)(zubio)(zubio)QGraphicsSceneQGraphicsScene類的坐標(biāo)類的坐標(biāo)(zubio)(zubio)系以中心為原點(diǎn)（系以中心為原點(diǎn)（0,00,0），如圖所示。），如圖所示。第3頁/共17頁第三頁

4、，共18頁。7.1.3 GraphicsView的坐標(biāo)(zubio)系統(tǒng)2 2視圖視圖(sht)(sht)坐標(biāo)坐標(biāo)QGraphicsViewQGraphicsView類繼承自類繼承自QWidgetQWidget類，因此它與其他的類，因此它與其他的QWidgetQWidget類一樣，以窗類一樣，以窗口的左上角作為自己坐標(biāo)系的原點(diǎn)，如圖所示。口的左上角作為自己坐標(biāo)系的原點(diǎn)，如圖所示。第4頁/共17頁第四頁，共18頁。7.1.3 GraphicsView的坐標(biāo)(zubio)系統(tǒng)3 3圖元坐標(biāo)圖元坐標(biāo)(zubio)(zubio)QGraphicsItemQGraphicsItem類的坐標(biāo)類的坐標(biāo)(zu

5、bio)(zubio)系，若在調(diào)用系，若在調(diào)用QGraphicsItemQGraphicsItem類的類的paint()paint()函數(shù)重繪圖元時(shí)，則以此坐標(biāo)函數(shù)重繪圖元時(shí)，則以此坐標(biāo)(zubio)(zubio)系為基準(zhǔn)，如圖所示。系為基準(zhǔn)，如圖所示。第5頁/共17頁第五頁，共18頁。7.1.3 GraphicsView的坐標(biāo)(zubio)系統(tǒng)Graphics View框架提供了多種坐標(biāo)(zubio)變換函數(shù)，見表。第6頁/共17頁第六頁，共18頁。7.2 圖形(txng)視圖示例7.2.1 7.2.1 飛舞的蝴蝶例子飛舞的蝴蝶例子（1 1）新建）新建Qt GuiQt Gui應(yīng)用，項(xiàng)目名為應(yīng)

6、用，項(xiàng)目名為“Butterfly”“Butterfly”，基類選擇，基類選擇“QMainWindow”“QMainWindow”，類名，類名(li mn)(li mn)命名默認(rèn)為命名默認(rèn)為“MainWindow”“MainWindow”，取消，取消“創(chuàng)創(chuàng)建界面建界面”復(fù)選框的選中狀態(tài)。單擊復(fù)選框的選中狀態(tài)。單擊“下一步下一步”按鈕，最后單擊按鈕，最后單擊“完成完成”按鈕，按鈕，完成該項(xiàng)目工程的建立。完成該項(xiàng)目工程的建立。（2 2）在）在“Butterfly”“Butterfly”項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選項(xiàng)目名上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇擇“添加新文件添加新文件.”.

7、”菜單項(xiàng)，在彈出的對(duì)話框中選擇菜單項(xiàng)，在彈出的對(duì)話框中選擇“C+ “C+ 類類”選項(xiàng)。單選項(xiàng)。單擊擊“選擇選擇”按鈕，彈出按鈕，彈出“C+ “C+ 類向?qū)ь愊驅(qū)А睂?duì)話框，在對(duì)話框，在“基類基類”后面的下拉列表后面的下拉列表框中選擇基類名框中選擇基類名(li mn)“QObject”(li mn)“QObject”，在，在“類名類名(li mn)”(li mn)”后面的文后面的文本框中輸入類的名稱本框中輸入類的名稱“Butterfly”“Butterfly”。（3 3）單擊）單擊“下一步下一步”按鈕，單擊按鈕，單擊“完成完成”按鈕，添加文件按鈕，添加文件“”“”和和“butterfly. cpp

8、”“butterfly. cpp”。（4 4）ButterflyButterfly類繼承自類繼承自QObjectQObject類、類、QGraphicsItemQGraphicsItem類，在頭文件類，在頭文件“”“”中完成的代碼具體內(nèi)容。中完成的代碼具體內(nèi)容。第7頁/共17頁第七頁，共18頁。7.2.1 飛舞的蝴蝶(hdi)例子（5）在源文件“butterfly. cpp”中完成(wn chng)的代碼具體內(nèi)容如下：#include butterfly.h#include const static double PI=3.1416;Butterfly:Butterfly(QObject *p

9、arent) up = true; pix_up.load(up.png); pix_down.load(down.png); startTimer(100);第8頁/共17頁第八頁，共18頁。7.2.1 飛舞的蝴蝶(hdi)例子boundingRect()函數(shù)為圖元限定區(qū)域范圍。此范圍是以圖元自身的坐標(biāo)系為基礎(chǔ)設(shè)定的。具體實(shí)現(xiàn)代碼內(nèi)容(nirng)如下：QRectF Butterfly:boundingRect() const qreal adjust =2; return QRectF(-pix_up.width()/2-adjust,-pix_up.height()/2-adjust,

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

11、 painter-drawPixmap(boundingRect().topLeft(),pix_up); up=!up; else painter-drawPixmap(boundingRect().topLeft(),pix_down); up=!up; 第10頁/共17頁第十頁，共18頁。7.2.1 飛舞(fiw)的蝴蝶例子定時(shí)器的timerEvent()函數(shù)實(shí)現(xiàn)蝴蝶的飛舞(fiw)，具體實(shí)現(xiàn)代碼內(nèi)容如下：void Butterfly:timerEvent(QTimerEvent *) /邊界控制 qreal edgex=scene()-sceneRect().right()+bound

12、ingRect().width()/2; qreal edgetop=scene()-sceneRect().top()+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

13、(),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);第11頁/共17頁第十一頁，共18頁。7.2.1 飛舞的蝴蝶(hdi)例子（6）完成了蝴蝶圖元的實(shí)現(xiàn)后，在源文件“”中將它加載到場(chǎng)景中，并關(guān)聯(lián)一個(gè)視圖，具體實(shí)現(xiàn)代碼內(nèi)容(nirng)如下：#include #include butterfly.h#include int main(int argc,char*

14、 argv) QApplication 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); v

15、iew-show(); return a.exec();第12頁/共17頁第十二頁，共18頁。7.2.1 飛舞的蝴蝶(hdi)例子（7）運(yùn)行(ynxng)程序，將程序中用到的圖片保存到該工程的D:QtCH7CH701build-Butterfly- Desktop_Qt_5_0_2_MinGW_32bit-Debug文件夾中，運(yùn)行(ynxng)結(jié)果如圖所示。第13頁/共17頁第十三頁，共18頁。7.2.2 地圖(dt)瀏覽器例子通過實(shí)現(xiàn)一個(gè)地圖瀏覽器的基本功能（包括(boku)地圖的瀏覽、放大、縮小，以及顯示各點(diǎn)的坐標(biāo)等）的例子，如圖所示。第14頁/共17頁第十四頁，共18頁。7.2.3 各種

16、( zhn)圖元（GraphicsItem）的創(chuàng)建通過實(shí)現(xiàn)(shxin)一個(gè)在其中顯示各種類型QGraphicsItem的窗體例子（如圖所示）。介紹如何使用Qt預(yù)定義的各種標(biāo)準(zhǔn)的QGraphicsItem類型（如QGraphicsEllipseItem、QGraphicsRectItem等），以及自定義的QGraphicsItem類型（如本例中不停閃爍的圓及來回移動(dòng)的星星等）來創(chuàng)建圖元（詳細(xì)內(nèi)容見代碼CH703）。第15頁/共17頁第十五頁，共18頁。7.2.4 圖元的旋轉(zhuǎn)、縮放、切變(qi bin)和位移通過此實(shí)例介紹如何實(shí)現(xiàn)圖元（QGraphicsItem）的旋轉(zhuǎn)(xunzhun)、縮放、切變及位移等各種變形操作，如圖所示（詳細(xì)內(nèi)容見代碼CH704）。第16