[Qt教程]?第20篇 2D繪圖（十）圖形視圖框架（下）

樓主 ?發表于 2013-5-4 15:43:02?|?查看: 861|?回復: 0

圖形視圖框架（下） 版權聲明 該文章原創于Qter開源社區（www.qter.org），作者yafeilinux，轉載請注明出處！ 導語 環境：Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目錄 三、場景（QGraphicsScene） （一）場景層 （二）索引算法 （三）邊界矩形 （四）圖形項查找 （五）事件處理和傳播 （六）打印 四、視圖（QGraphicsView） （一）縮放與旋轉 （二）場景邊框與場景對齊方式 （三）拖動模式 （四）事件傳遞 （五）背景緩存 （六）OpenGL渲染 （七）圖形項查找與圖形項組 （八）打印 正文 三、場景（QGraphicsScene） QGraphicsScene提供了圖形視圖框架的場景，它有以下功能： 提供了一個管理大量圖形項的快速接口 向每個圖形項傳播事件 管理圖形項的狀態，比如選擇和焦點處理 提供無轉換的渲染功能，主要用于打印 我們新建空的Qt項目，項目名稱為graphicsView03，完成后添加main.cpp文件，更改其內容如下： #include <QtGui> int main(int argc,char* argv[ ]) { QApplication app(argc,argv); QGraphicsScene scene; scene.addText("Hello, world!"); QGraphicsView view(&scene); view.show(); return app.exec(); } 運行程序，效果如下： 這里使用addText()函數添加了一個文本圖形項。執行這條語句就相當于執行了下面兩條語句： QGraphicsTextItem*item = new QGraphicsTextItem("Hello, world!"); scene.addItem(item); 如果要刪除一個圖形項我們可以調用removeItem()函數，如：scene.removeItem(item); （一）場景層 一個場景分為三個層：圖形項層（ItemLayer）、前景層（ForegroundLayer）和背景層（BackgroundLayer）。場景的繪制總是從背景層開始，然后是圖形項層，最后是前景層。看下面的例子： 我們在上面的程序中添加代碼： scene.setForegroundBrush(QColor(255,255,255,100)); scene.setBackgroundBrush(Qt::green); 運行程序，效果如下： 對于前景層，我們一般不進行設置，或者像上面這樣設置為半透明的白色。對于背景層，這里設置為了綠色，當然，我們也可以將一張圖片設置為背景。 scene.setBackgroundBrush(QPixmap("../graphicsView03/yafeilinux.jpg")); 運行程序，我們可以看到，圖片默認是平鋪的。 如果想進一步控制前景和背景層，我們可以重新實現drawForeground()函數和drawBackground()函數。 （二）索引算法 索引算法，是指在場景中進行圖形項查找的算法。QGraphicsScene中提供了兩種選擇，它們在一個枚舉變量QGraphicsScene::ItemIndexMethod中，分別是： QGraphicsSecne::BspTreeIndex?：應用Binary Space Partition tree，適合于大量的靜態圖形項。這個是默認值。 QGraphicsScene::NoIndex?：不用索引，搜索場景中所有的圖形項，適合于經常進行圖形項的添加、移動和刪除等操作的情況。 我們可以使用setItemIndexMethod()函數進行索引算法的更改。 （三）邊界矩形 圖形項可以放到場景的任何位置，場景的大小默認是沒有限制的。而場景的邊界矩形僅用于場景內部進行索引的維護。因為如果沒有邊界矩形，場景就要搜索所有的圖形項，然后確定出其邊界，這是十分費時的。所以如果要操作一個較大的場景，我們應該給出它的邊界矩形。設置邊界矩形，可以使用setSceneRect()函數。 （四）圖形項查找 場景最大的優勢之一就是可以快速的鎖定圖形項的位置，即使有上百萬個圖形項，items()函數也能在數毫秒的時間內鎖定一個圖形項的位置。items()函數有幾個重載函數來方便的進行圖形項的查找。但是有時在場景的一個點可能重疊著幾個圖形項，這時我們可以使用itemAt()函數返回最上面的一個圖形項。對于這些函數的使用，我們到后面講視圖時再舉例講解。 （五）事件處理和傳播 場景可以傳播來自視圖的事件，將事件傳播給該點最頂層的圖形項。但是就像我們在講圖形項時所說的那樣，如果一個圖形項要接收鍵盤事件，那么它必須獲得焦點。而且，如果我們在場景中重寫了事件處理函數，那么在該函數的最后，必須調用場景默認的事件處理函數，只有這樣，圖形項才能接收到該事件。這一點我們也到后面講視圖時再細講。 （六）打印 該部分內容也放到后面和視圖一起講。 四、視圖（QGraphicsView） QGraphicsView 提供了視圖窗口部件，它使場景的內容可視化。你可以給一個場景關聯多個視圖，從而給一個數據集提供多個視口。視圖部件是一個滾動區域，就是說，它可以提供一個滾動條來顯示大型的場景。如果要使用OpenGL，你可以使用QGraphicsView：：setViewport()函數來添加QGLWidget 。 （一）縮放與旋轉 我們新建空的Qt項目，項目名稱為graphicsView04，然后添加main.cpp文件，再新添一個C++?類，類名為MyView，基類為QGraphicsView，類型信息選擇“繼承自QWidget”。 然后在myview.h中添加頭文件：#include <QtGui> 然后聲明事件槽函數： protected: void wheelEvent(QWheelEvent *event); voidmousePressEvent(QMouseEvent *event); 我們到myview.cpp文件中進行函數的定義： MyView::MyView(QWidget *parent) : QGraphicsView(parent) { resize(400,400); setBackgroundBrush(QPixmap("../graphicsView04/01.jpg"));//其實就是設置場景的背景 QGraphicsScene *scene = new QGraphicsScene(this); scene->setSceneRect(0,0,200,200); QGraphicsRectItem *item = new QGraphicsRectItem(0,0,20,20); item->setBrush(Qt::red); scene->addItem(item); setScene(scene); } void MyView::wheelEvent(QWheelEvent*event)??//滾輪事件 { if(event->delta() > 0)??//如果鼠標滾輪遠離使用者，則delta()返回正值 scale(0.5,0.5);??//視圖縮放 else scale(2,2); } void MyView::mousePressEvent(QMouseEvent*event) { rotate(90);??//視圖旋轉順時針90度 } 這里我們定義了鼠標的滾輪事件和按下事件，在滾輪事件中，利用delta()函數返回值的正負來判斷滾輪的移動方向，然后我們讓視圖進行縮放。 最后到main.cpp文件中，更改其內容如下： #include "myview.h" int main(int argc,char *argv[]) { QApplication app(argc,argv); MyView *view = new MyView; view->show(); return app.exec(); } 我們運行程序，效果如下： 上面四幅圖分別是：正常，旋轉90度后，縮小后，放大后的效果。可以看到實現視圖的變換是十分簡單的。 （二）場景邊框與場景對齊方式 我們在上面講場景時就提到了場景邊框(SceneRect)，這里再說說它在視圖中的作用。我們前面說過，視圖是可以提供滾動條的，但是，這只是在視圖窗口小于場景時才自動出現的。如果我們不定義場景邊框，那么當場景中的圖形項移動到視圖可視窗口以外的地方時，視圖就會自動出現滾動條，但是即使是圖形項再次回到可視區域，滾動條也不會消失。為了解決這個問題，我們可以為場景設置邊框，這樣，當圖形項移動到場景邊框以外時，視圖是不會提供額外的滾動區域的。 而當整個場景都可視時，也就是說視圖沒有滾動條時，我們可以通過setAlignment()函數來設置場景在視圖中的對齊方式，如左對齊Qt::AlignLeft?，向上對齊Qt::AlignTop?，中心對齊Qt::AlignCenter。更多的對齊方式，可以查看幫助中Qt::Alignment?關鍵字。默認的對齊方式是Qt::AlignCenter?。而且幾種對齊方式可以通過“按位或”操作一起使用。我們在上面的程序中的myitem.cpp文件中的構造函數最后添加一行代碼： setAlignment(Qt::AlignLeft | Qt::AlignTop); 運行效果如下圖所示。 （三）拖動模式 在QGraphicView中提供了三種拖動模式，分別是： QGraphicsView::NoDrag?：忽略鼠標事件，不可以拖動。 QGraphicsView::ScrollHandDrag?：光標變為手型，可以拖動場景進行移動。 QGraphicsView::RubberBandDrag?：使用橡皮筋效果，進行區域選擇，可以選中一個區域內的所有圖形項。 我們可以利用setDragMode()函數進行相應設置。 下面我們更改上面的程序。在myview.cpp中的構造函數中的最后添加一行代碼： setDragMode(QGraphicsView::ScrollHandDrag);//手型拖動 并將場景外框放大一點： scene->setSceneRect(0,0,800,800); 這時運行程序，雖然出現了小手，但是并不能拖動場景。為什么呢？我們在mousePressEvent()函數中添加一行代碼： QGraphicsView::mousePressEvent(event); 這時再運行程序，發現已經成功了。效果如下： 我們在事件函數的最后添加了一行：QGraphicsView::mousePressEvent(event);這樣程序才能執行默認的事件。這也是我們下面要說的事件傳播的內容的一部分。 （四）事件傳遞 在上面我們看到必須在事件函數的最后將event參數傳遞出去，才能執行默認的事件操作。其實不止上面那一種情況，在圖形視圖框架中，鼠標鍵盤等事件是從視圖進入的，視圖將它們傳遞給場景，場景再將事件傳遞給該點的圖形項，如果該點有多個圖形項，那么就傳給最上面的圖形項。所以要想使這個事件能一直傳播下去，我們就需要在重新實現事件處理函數時，在其最后將event參數傳給默認的事件處理函數。比如我們重寫了場景的鍵盤按下事件處理函數，那么我們就在該函數的最后寫上QGraphicsScene：：keyPressEvent(event);一行代碼。 （五）背景緩存 如果場景的背景需要大量耗時的渲染，可以利用CacheBackground來緩存背景，當下次需要渲染背景時，可以快速進行渲染。它的原理就是，把整個視口先繪制到一個pixmap上。但是這個只適合較小的視口，也就是說，如果視圖窗口很大，而且有滾動條，那么就不再適合緩存背景。我們可以使用setCacheMode(QGraphicsView::CacheBackground);來設置背景緩存。默認設置是沒有緩存QGraphicsView::CacheNone。 （六）OpenGL渲染 QGraphicsView默認使用一個QWidget作為視口部件，如果我們要使用OpenGL進行渲染，可以使用setViewport()函數來添加一個QGLWidget對象。看下面的例子。 我們先在項目文件graphicsView04.pro中加入 QT += opengl 說明要使用OpenGL模塊，然后在myview.cpp文件中添加頭文件： #include <QtOpenGL> 最后在構造函數中加入代碼： QGLWidget *widget =new QGLWidget(this); setViewport(widget); 這樣便使用OpenGL進行渲染了。關于OpenGL，我們在后面的3D繪圖部分再講。 （七）圖形項查找與圖形項組 在前面講場景時，我們就涉及了圖形項查找的內容，當時沒有細講，現在我們把它和圖形項組放到一起來講解。先看一個例子，然后再介紹。 在myview.cpp中的構造函數里將以前那個item改名為item1，然后再加入一個item2和一個圖形項組對象group。更改后構造函數的部分代碼如下： QGraphicsRectItem *item1 = newQGraphicsRectItem(0,0,20,20); item1->setBrush(Qt::red); item1->setPos(10,0); scene->addItem(item1); QGraphicsRectItem *item2 = newQGraphicsRectItem(0,0,20,20); item2->setBrush(Qt::green); item2->setPos(30,0); scene->addItem(item2); QGraphicsItemGroup *group = newQGraphicsItemGroup;??//新建圖形項組 group->addToGroup(item1); group->addToGroup(item2); scene->addItem(group); setScene(scene); qDebug() << "itemAt(10,0) :" <<itemAt(10,0); //輸出(10,0)點的圖形項 qDebug() << "itemAt(30,0) :" <<itemAt(30,0); qDebug() <<"#################################"; //分割線 然后我們到myview.h文件中protected下聲明鍵盤按下事件槽函數： void keyPressEvent(QKeyEvent *event); 再到myview.cpp中定義它，如下： void MyView::keyPressEvent(QKeyEvent*event) { qDebug() << items();??//輸出場景中所有的圖形項 items().at(0)->setPos(100,0); items().at(1)->setPos(0,100); QGraphicsView::keyPressEvent(event); //執行默認的事件處理 } 這時運行程序，當按下鍵盤上任意鍵后，效果如下： 下面是輸出框輸出的信息： 可以看到，itemAt()函數可以輸出場景上任意點的圖形項。而items()函數可以輸出場景上所有的圖形項。這里應該說明，items()函數返回的圖形項列表是按棧的降序排序的，也就是說，items().at(0)返回的是最后加入場景的圖形項。從上面可以看出，最后加入的圖形項是item2，其實，因為我們使用了group，而item1和item2都在group里，所以我們只需將group加入場景中就可以了，前面把item1和item2也加入場景是多余的。我們可以將scene->addItem(item1);和scene->addItem(item2);兩行代碼刪掉。那么這時加入場景的順序就是，先加入group，因為item1先加入group，所以下面將item1加入場景，最后加入場景的是item2，這就是為什么items.at(0)會是item2的原因。 下面再說圖形項組，其實圖形項組也是一個圖形項，它有圖形項所擁有的所有特性。其作用就是，將加入它的所有圖形項作為一個整體，對這個圖形項組進行操作，就相當于對齊中所有圖形項進行操作。圖形項組是加入它的所有圖形項的父圖形項，在上面的輸出的parent信息中我們可以看到這一點。下面我們將程序中的代碼更改如下： void MyView::keyPressEvent(QKeyEvent*event) { items().at(2)->setPos(100,100); QGraphicsView::keyPressEvent(event); //執行默認的事件處理 } 運行程序，按下鍵盤上任意鍵，效果如下： 可以看到，兩個圖形項是同時移動的。我們要從圖形項組中移除一個圖形項，可以使用removeFromGroup()函數，它可以將給定的item從group中刪除，要注意這時item依然存在，它會回到group的父圖形項中，如果group沒有父圖形項，那么item就會回到場景中。我們可以使用場景的removeItme()函數來刪除group，這樣也會將group中所有的圖形項從場景中刪除。還有一種辦法是利用場景的destroyItemGroup()函數，它會刪除group并銷毀它，但是group中的所有圖形項會回到group的父圖形項中，如果它沒有父圖形項，那么所有圖形項就會回到場景中。 （八）打印 圖形視圖框架提供了兩個打印函數render()，一個是在QGraphicsScene中，一個是在QGraphicsView中，并且它們的函數原型是一模一樣的。不過它們實現的效果稍有不同。看一面的例子。 我們更改鼠標按下事件槽函數的內容如下： void MyView::mousePressEvent(QMouseEvent*event) { rotate(90); //視圖旋轉順時針90度 QPixmap pixmap(400,400);??//必須指定大小 QPainter painter(&pixmap); render(&painter,QRectF(0,0,400,400),QRect(0,0,400,400));??//打印視圖指定區域內容 pixmap.save("../graphicsView04/save.png"); QGraphicsView::mousePressEvent(event); } 這里我們使用了視圖的render()函數，其中的QRectF參數是指設備的區域，這里是指pixmap。而QRect參數是指視圖上要打印的區域。我們利用QPixmap類的save()函數，將pixmap圖片保存到我們項目源碼目錄中，文件名為“save.png”。下面是運行程序后，點擊鼠標，生成的圖片的效果： ??? 我們每點擊一次鼠標，就會旋轉視圖，那么生成的圖片就是當前視口的截圖。下面我們使用場景的打印函數，將上面的打印一行的代碼改為： scene()->render(&painter,QRectF(0,0,400,400),QRect(0,0,400,400));//打印場景內容 查看圖片效果： 這時無論視圖怎樣變換，生成的圖片總是一樣的。而且它并沒有打印場景背景的圖片。就像我們看到的，視圖的打印函數是依據視圖的坐標系進行打印的，我們看到的就是打印出來后的效果，它可以看做是程序窗口的截屏。而場景的打印函數，是依據場景的坐標系的，無論視圖怎么轉換，只要場景坐標系沒有變換，它打印出來的圖片都是一樣的。 結語 圖形視圖框架是一個非常強大而且龐雜的系統，我們教程中也只是很籠統的介紹了一些最基本最常用的內容。如果大家想系統學習該部分知識，想學習如何使用該框架輕松搭建一個游戲，可以參考《Qt Creator快速入門》的第11章，以及《Qt 及Qt Quick開發實戰精解》的第二章。 涉及到的源碼：??graphicsView03.zip?(3.73 KB, 下載次數: 11)??graphicsView04.zip?(302.01 KB, 下載次數: 16)?

總結

以上是生活随笔為你收集整理的[Qt教程] 第20篇 2D绘图（十）图形视图框架（下）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。