[Qt教程]?第15篇 2D繪圖（五）繪制圖片

樓主 ?發表于 2013-5-2 17:59:00?|?查看: 886|?回復: 3

繪制圖片 版權聲明 該文章原創于Qter開源社區（www.qter.org），作者yafeilinux，轉載請注明出處！ 導語 Qt提供了四個類來處理圖像數據：QImage、QPixmap、QBitmap和QPicture，它們也都是常用的繪圖設備。其中QImage主要用來進行I/O處理，它對I/O處理操作進行了優化，而且也可以用來直接訪問和操作像素；QPixmap主要用來在屏幕上顯示圖像，它對在屏幕上顯示圖像進行了優化；QBitmap是QPixmap的子類，它是一個便捷類，用來處理顏色深度為1的圖像，即只能顯示黑白兩種顏色；QPicture用來記錄并重演QPainter命令。這一節我們只講解QPixmap。 環境：Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目錄 一、簡單繪制圖片 二、平移圖片 三、縮放圖片 四、旋轉圖片 五、扭曲圖片 正文 一、簡單繪制圖片 1.這次我們重新創建一個Qt Gui應用，項目名稱為painter_2，在類信息頁面，將基類更改為QDialog，類名使用默認的Dialog即可。 2.然后在源碼目錄中復制一張圖片，比如這里是一張背景透明的logo.png圖片，如下圖所示。 3.在dialog.h文件中添加重繪事件處理函數的聲明： protected: ? ??void?paintEvent(QPaintEvent?*); 4.到dialog.cpp文件中先添加頭文件包含#include?<QPainter>，然后添加函數的定義： void?Dialog::paintEvent(QPaintEvent?*) { ? ??QPainter?painter(this); ? ??QPixmap?pix; ? ??pix.load("../painter_2/logo.png"); ? ??painter.drawPixmap(0,?0,?129,?66,?pix); } ? ??這里使用了相對路徑，因為Qt Creator默認是使用影子構建，即編譯生成的文件在painter_2-build-desktop-Debug這樣的目錄里面，而這個目錄就是當前目錄，所以源碼目錄就是其上級目錄了。大家可以根據自己的實際情況來更改路徑，也可以使用絕對路徑，不過最好使用資源文件來存放圖片。drawPixmap()函數在給定的矩形中來繪制圖片，這里矩形的左上角頂點為(0, 0)點，寬129，高66，如果這個跟圖片的大小不相同，默認會拉伸圖片。運行效果如下圖所示。 （注意：下面的操作涉及到了坐標系統，這里不再詳細講解，大家先進行操作查看效果，具體的坐標內容將在下一節講解。） 二、平移圖片 QPainter類中的translate()函數實現坐標原點的改變，改變原點后，此點將會成為新的原點（0，0）。下面來看一個例子。 在paintEvent()函數里面繼續添加如下代碼： painter.translate(100, 100); //將（100，100）設為坐標原點 painter.drawPixmap(0, 0, 129, 66, pix); 運行程序，效果如下圖所示。 這里將（100，100）設置為了新的坐標原點，所以下面在（0，0）點貼圖，就相當于在以前的（100，100）點貼圖。 三、縮放圖片 我們可以使用QPixmap類中的scaled()函數來實現圖片的放大和縮小。 在paintEvent()函數中繼續添加代碼： qreal?width = pix.width(); //獲得以前圖片的寬和高 qreal?height = pix.height(); //將圖片的寬和高都擴大兩倍，并且在給定的矩形內保持寬高的比值不變 pix = pix.scaled(width*2, height*2, Qt::KeepAspectRatio); painter.drawPixmap(70, 70,pix); 其中參數Qt::KeepAspectRatio，是圖片縮放的方式。我們可以查看其幫助。將鼠標指針放到該代碼上，當出現F1提示時，按下F1鍵，這時就可以查看其幫助了。當然我們也可以直接在幫助里查找該關鍵字。如下圖所示。 ? 這里有三個值，只看其圖片就可大致明白，Qt::IgnoreAspectRatio是不保持圖片的寬高比，Qt::KeepAspectRatio是在給定的矩形中保持寬高比，最后一個也是保持寬高比，但可能超出給定的矩形。這里給定的矩形是由我們顯示圖片時給定的參數決定的，例如painter.drawPixmap(0,0,100,100,pix);就是在以（0，0）點為起始點的寬和高都是100的矩形中。 運行程序效果如下圖所示。 四、旋轉圖片 旋轉使用的是QPainter類的rotate()函數，它默認是以原點為中心進行旋轉的。我們要改變旋轉的中心，可以使用前面講到的translate()函數完成。 在paintEvent()函數中繼續添加如下代碼： painter.translate(64, 33); //讓圖片的中心作為旋轉的中心painter.rotate(90); //順時針旋轉90度painter.translate(-64,-33); //使原點復原painter.drawPixmap(100, 100, 129, 66, pix); 這里必須先改變旋轉中心，然后再旋轉，然后再將原點復原，才能達到想要的效果。 運行程序，效果如圖所示。 五、扭曲圖片 實現圖片的扭曲，是使用的QPainter類的shear(qreal sh，qreal sv)函數完成的。它有兩個參數，前面的參數實現橫行變形，后面的參數實現縱向變形。當它們的值為0時，表示不扭曲。 在paintEvent()中繼續添加如下代碼： painter.shear(0.5, 0); //橫向扭曲 painter.drawPixmap(100, 0, 129, 66, pix); 運行效果如下圖所示。 結語 ?這一節中只講解了QPixmap類的簡單應用。對于后面講到的圖片變形的應用，細心的讀者可能已經發現了，旋轉了坐標系統以后再繪制圖片都是縱向的，這就是因為旋轉了坐標系統而沒有進行恢復造成的。具體的坐標操作我們會在下一節講解。 ? ?? ??如果大家還想系統的學習其他繪圖類的應用，可以參考《Qt Creator快速入門》第10章的相關內容。 涉及到的源碼：??painter_2.zip?(6.91 KB, 下載次數: 20)?

總結

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

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