Qt繪圖，顯示圖片圖像，平移，縮放，旋轉和扭曲圖片的方法

2010-12-28 16:38

轉載自 huangwen2003

最終編輯 huangwen2003

聲明：本文原創於yafeilinux的百度博客，http://hi.baidu.com/yafeilinux 轉載請註明出處。

現在我們來實現在窗口上顯示圖片，並學習怎樣將圖片進行平移，縮放，旋轉和扭曲。這裏我們是利用QPixmap類來實現圖片顯示的。

一、利用QPixmap顯示圖片。

1.將以前的工程文件夾進行復製備份，我們這裏將工程文件夾改名爲painter05。（以前已經說過，經常備份工程目錄，是個很好的習慣）

2.在工程文件夾的debug文件夾中新建文件夾，我這裏命名爲images，用來存放要用的圖片。我這裏放了一張linux.jpg的圖片。如下圖所示。

3.在Qt Creator中打開工程。（即打開工程文件夾中的.pro文件），如圖。

4.將dialog.cpp文件中的paintEvent（）函數更改如下。

void Dialog::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPixmap pix;
pix.load("images/linux.jpg");
painter.drawPixmap(0,0,100,100,pix);
}

這裏新建QPixmap類對象，併爲其添加圖片，然後在以（0，0）點開始的寬和高都爲100的矩形中顯示該圖片。你可以改變矩形的大小，看一下效果啊。最終程序運行效果如下。

（說明：下面的操作都會和座標有關，這裏請先進行操作，我們在下一節將會講解座標系統。）

二、利用更改座標原點實現平移。

Qpainter類中的translate()函數實現座標原點的改變，改變原點後，此點將會成爲新的原點（0，0）；

例如：

void Dialog::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPixmap pix;
pix.load("images/linux.jpg");
painter.drawPixmap(0,0,100,100,pix);

   painter.translate(100,100); //將（100，100）設爲座標原點
    painter.drawPixmap(0,0,100,100,pix);
}

這裏將（100，100）設置爲了新的座標原點，所以下面在（0，0）點貼圖，就相當於在以前的（100，100）點貼圖。效果如下。

三、實現圖片的縮放。

我們可以使用QPixmap類中的scaled()函數來實現圖片的放大和縮小。

例如：

void Dialog::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPixmap pix;
pix.load("images/linux.jpg");
painter.drawPixmap(0,0,100,100,pix);

   qreal width = pix.width(); //獲得以前圖片的寬和高
    qreal height = pix.height();

    pix = pix.scaled(width*2,height*2,Qt::KeepAspectRatio);
    //將圖片的寬和高都擴大兩倍，並且在給定的矩形內保持寬高的比值
    painter.drawPixmap(100,100,pix);
}

或者使用：

void MainWindow::paintEvent( QPaintEvent* )
{

//QPixmap image("/root/usr-huang/palm.bmp");
QPixmap image;
//image.load("hh.png");
//image.load("palm.bmp");
image.load("/root/usr-huang/palm.bmp");
QPainter paint;
paint.begin( this );
//paint.drawRect(20,20,160,160);

//paint.translate(200,10); //讓圖片的中心作爲旋轉的中心
//paint.rotate(90); //順時針旋轉90度
//paint.viewport();

paint.scale(0.65,0.65);  //水平和垂直方向各放大0.65倍
paint.drawPixmap( 10, 30, image );
paint.end();

}

其中參數Qt::KeepAspectRatio，是圖片縮放的方式。我們可以查看其幫助。將鼠標指針放到該代碼上，當出現F1提示時，按下F1鍵，這時就可以查看其幫助了。當然我們也可以直接在幫助裏查找該代碼。

這是個枚舉變量，這裏有三個值，只看其圖片就可大致明 白，Qt::IgnoreAspectRatio是不保持圖片的長寬比，Qt::KeepAspectRatio是在給定的矩形中保持長寬比，最後一個也 是保持長寬比，但可能超出給定的矩形。這裏給定的矩形是由我們顯示圖片時給定的參數決定的，例如 painter.drawPixmap(0,0,100,100,pix);就是在以（0，0）點爲起始點的寬和高都是100的矩形中。

程序運行效果如下。

四、實現圖片的旋轉。

旋轉使用的是QPainter類的rotate()函數，它默認是以原點爲中心進行旋轉的。我們要改變旋轉的中心，可以使用前面講到的translate()函數完成。

例如：

void Dialog::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPixmap pix;
pix.load("images/linux.jpg");
painter.translate(50,50); //讓圖片的中心作爲旋轉的中心
    painter.rotate(90); //順時針旋轉90度
    painter.translate(-50,-50); //使原點復原
    painter.drawPixmap(0,0,100,100,pix);
}

這裏必須先改變旋轉中心，然後再旋轉，然後再將原點復原，才能達到想要的效果。

運行程序，效果如下。

五、實現圖片的扭曲。

實現圖片的扭曲，是使用的QPainter類的shear(qreal sh，qreal sv)函數完成的。它有兩個參數，前面的參數實現橫行變形，後面的參數實現縱向變形。當它們的值爲0時，表示不扭曲。

例如：

void Dialog::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QPixmap pix;
pix.load("images/linux.jpg");
painter.drawPixmap(0,0,100,100,pix);
painter.shear(0.5,0); //橫向扭曲
    painter.drawPixmap(100,0,100,100,pix);
}

效果如下：

其他扭曲效果：

painter.shear(0,0.5); //縱向扭曲                                               painter.shear(0.5,0.5); //橫縱扭曲

                             

圖片形狀的變化，其實就是利用座標系的變化來實現的。我們在下一節中將會講解座標系統。這一節中的幾個函數，我們可以在其幫助文件中查看其詳細解釋。