首页 > 代码库 > Qt 显示图片 放大 缩小 移动(都是QT直接提供的功能)

Qt 显示图片 放大 缩小 移动(都是QT直接提供的功能)

本文章原创于www.yafeilinux.com 转载请注明出处。

现在我们来实现在窗口上显示图片,并学习怎样将图片进行平移,缩放,旋转和扭曲。这里我们是利用QPixmap类来实现图片显示的。

一、利用QPixmap显示图片。

1.将以前的工程文件夹进行复制备份,我们这里将工程文件夹改名为painter05。(以前已经说过,经常备份工程目录,是个很好的习惯)

2.在工程文件夹的debug文件夹中新建文件夹,我这里命名为images,用来存放要用的图片。我这里放了一张linux.jpg的图片。如下图所示。

<iframe id="iframe_0.23077941200538854" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/0114-300x173.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.23077941200538854‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

 

3.在Qt Creator中打开工程。(即打开工程文件夹中的.pro文件),如图。

<iframe id="iframe_0.3224740199710605" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/0214.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.3224740199710605‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

<iframe id="iframe_0.11096047947385879" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/0314-300x218.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.11096047947385879‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

 

 

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的矩形中显示该图片。你可以改变矩形的大小,看一下效果啊。最终程序运行效果如下。

 

<iframe id="iframe_0.5721830990787635" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/0412-300x215.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.5721830990787635‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
(说明:下面的操作都会和坐标有关,这里请先进行操作,我们在下一节将会讲解坐标系统。)

二、利用更改坐标原点实现平移。

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)点贴图。效果如下。

 <iframe id="iframe_0.05466810766088481" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/0512-291x300.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.05466810766088481‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
三、实现图片的缩放。

我们可以使用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);
}

其中参数Qt::KeepAspectRatio,是图片缩放的方式。我们可以查看其帮助。将鼠标指针放到该代码上,当出现F1提示时,按下F1键,这时就可以查看其帮助了。当然我们也可以直接在帮助里查找该代码。

<iframe id="iframe_0.5923260292706127" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/0610-300x169.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.5923260292706127‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

这是个枚举变量,这里有三个值,只看其图片就可大致明 白,Qt::IgnoreAspectRatio是不保持图片的长宽比,Qt::KeepAspectRatio是在给定的矩形中保持长宽比,最后一个也 是保持长宽比,但可能超出给定的矩形。这里给定的矩形是由我们显示图片时给定的参数决定的,例如 painter.drawPixmap(0,0,100,100,pix);就是在以(0,0)点为起始点的宽和高都是100的矩形中。

程序运行效果如下。

<iframe id="iframe_0.34977050779516583" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/0710-300x292.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.34977050779516583‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

四、实现图片的旋转。

旋转使用的是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);
}

这里必须先改变旋转中心,然后再旋转,然后再将原点复原,才能达到想要的效果。

运行程序,效果如下。

 

<iframe id="iframe_0.8326617372842489" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/0810.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.8326617372842489‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
五、实现图片的扭曲。

实现图片的扭曲,是使用的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);
}

效果如下:

<iframe id="iframe_0.31759955043329025" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/098.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.31759955043329025‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

 

其他扭曲效果:

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

painter.shear(0.5,0.5); //横纵扭曲

<iframe id="iframe_0.8631330280811378" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/106.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.8631330280811378‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>             

<iframe id="iframe_0.8411748098221581" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.yafeilinux.com/wp-content/uploads/2010/04/116.jpg?_=2055766%22%20style=%22border:none;max-width:973px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.8411748098221581‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

 图片形状的变化,其实就是利用坐标系的变化来实现的。我们在下一节中将会讲解坐标系统。这一节中的几个函数,我们可以在其帮助文件中查看其详细解释。

http://www.cnblogs.com/hnrainll/archive/2011/05/24/2055766.html

Qt 显示图片 放大 缩小 移动(都是QT直接提供的功能)