[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章的相關內容。
涉及到的源碼: ![]() |
最後更新:2017-04-03 14:54:15