Qt实现图片移动实例(图文教程)
更新时间：2020年4月25日 17:48 点击：1616
这学期实训的时候用MFC做过一个飞机大战，很无聊的东西，一直想用Qt做一个，但是在学校的时候比较颓，回来看了一下。
首先需要解决的问题是图片的移动，怎么说飞机啊子弹啊都是动着的，图片当然要跑起来。
闲话休絮，首先用QtCreator新建一个QtGui程序，命名为PaintWidget，随便起的名字，实验么这不是。
会生成这三个文件，其中呢ui不用管，实验的图片移动需要用的是Event，不是信号槽，所以ui就不管了，放了那就是。
第一步要把图片画出来，参照《Qt学习之路的这段代码》，不难把图画出来，就是重写paintEvent方法，用QPainter对象来画图。
复制代码 代码如下:
void PaintedWidget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QPixmap pixmap("Cat.png");
QBitmap bitmap("Cat.png");
painter.drawPixmap(10, 10, 128, 128, pixmap);
painter.drawPixmap(140, 10, 128, 128, bitmap);
QPixmap pixmap2("Cat2.png");
QBitmap bitmap2("Cat2.png");
painter.drawPixmap(10, 140, 128, 128, pixmap2);
painter.drawPixmap(140, 140, 128, 128, bitmap2);
}
这是他的结果
问题是如何使用图片资源：
在《C++ GUI Qt4 编程 （第二版）》这本书中有例子，直接搜这本书的源代码，在src\chap04有发现，原来Qt引用资源是用的资源文件这个东西，是一个xml，QtCreator中很方便管理。
首先是在项目中添加文件，选择Qt的资源文件：
因为以后可能有很多图片，所以我在工程目录下新建了img这么个文件夹来存放图片。
生成的资源文件里面有个添加前缀，这个是qt中引用资源需要用的，后面再说，添加文件不用啰嗦了。
为了方便说明，先把源代码发上来
mainwindow.h
复制代码 代码如下:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QtGui>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
protected:
void paintEvent (QPaintEvent *event);
void mouseMoveEvent(QMouseEvent *event);
void keyPressEvent(QKeyEvent *event);
private:
Ui::MainWindow *ui;
QPixmap *catImg;
QRect *catImgRect;
protected:
int shrinkMultiple;
int speed;
};
#endif // MAINWINDOW_H
其中 QPixmap*catImg;就是图片对象的指针，因为我的图片是一直猫，所用就起了这么个名字。
QRect*catImgRect;是这个图片的矩形信息，以为图片移动的时候图片的x,y坐标的值会改变，矩形信息会改变，而绘图函数里面有个根据矩形信息和图片指针绘制函数的这么一个函数
painter.drawPixmap(*catImgRect,*catImg);
为了方便起见，用catImgRect来存储这些信息。
而int shrinkMultiple;这个是图片的缩放倍数，我猫的图片有点儿大，把他缩小了一下，当然可以没有
这个int speed;则是图片移动的像素数
ok，下面是mainwindow.cpp
复制代码 代码如下:
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow),
shrinkMultiple(2),speed(10)
{
ui->setupUi(this);
catImg = new QPixmap(":/img/cat.jpg");
int width = catImg->width () / shrinkMultiple;
int height = catImg->height () / shrinkMultiple;
catImgRect = new QRect(10,10,width,height);
QRect rect = this->geometry ();
rect.setWidth (width*4);
rect.setHeight (height*4);
rect.setX (20);
rect.setY (50);
this->setGeometry (rect);
}
void MainWindow::paintEvent (QPaintEvent *event)
{
QPainter painter(this);
painter.drawPixmap(*catImgRect,*catImg);
}
void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
}
void MainWindow::keyPressEvent(QKeyEvent *event)
{
int width = catImgRect->width ();
int height = catImgRect->height ();
switch(event->key ())
{
case Qt::Key_Left:
{
catImgRect->setX (catImgRect->x ()-speed);
break;
}
case Qt::Key_Right:
{
catImgRect->setX (catImgRect->x ()+speed);
break;
}
case Qt::Key_Down:
{
catImgRect->setY (catImgRect->y ()+speed);
break;
}
case Qt::Key_Up:
{
catImgRect->setY (catImgRect->y ()-speed);
break;
}
}
catImgRect->setHeight(height);
catImgRect->setWidth (width);
this->repaint ();
}
MainWindow::~MainWindow()
{
delete catImg;
delete catImgRect;
delete ui;
}
首先看构造函数，其中
复制代码 代码如下:
catImg=new QPixmap(":/img/cat.jpg");
这里是引用资源文件，:/img/cat.jpg，冒号后面的第一个斜杠就是刚刚加的前缀。
下面几行是缩小猫的图片和初始化猫矩形信息，最后一行是把程序窗口大小设这为猫图片大小的4倍。
画图函数就是paintEvent这个函数，没什么特别说的，这个函数只要是窗口一被重绘就会调用的。
关键的移动就是重写
复制代码 代码如下:
voidMainWindow::keyPressEvent(QKeyEvent*event)
这个函数，没什么特别说明的，出了最后一行
复制代码 代码如下:
this->repaint();
只要是键盘被按下，则重绘窗口，如果没有这个函数的话，猫矩形确实变了，但是图片的位置没有变化，除非等到重绘的时候才会调用paintEvent函数，什么时候重绘的，当这部分窗口被遮蔽，最大化最小化，窗口移动的时候（可能还有），repaint函数的作用是立即重绘，所以图片就能马上移动了。
图片移动是没有问题了，关键是不是很流畅，当时用MFC的时候是用定时器来解决的这个问题，Qt中也有定时器，改天再研究，不过可能会出现问题，就是窗口闪烁的问题，这个时候应该会用到双缓冲画图的技术。
贴个最终的图片
相关文章
- 下面小编就为大家分享一篇Qt 使用Poppler实现pdf阅读器的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-25
- 这篇文章主要介绍了将matplotlib绘图嵌入pyqt的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-27
- 在前一篇中我们介绍了键盘和鼠标事件，其实还有一个非常常用的事件，就是定时器事件，如果要对程序实现时间上的控制，那么就要使用到定时器。而随机数也是很常用的一个功能，在我们要想产生一个随机的结果时就要使用到随机数。本文我们就来简单介绍一下定时器和随机数。...2020-04-25
- 这篇文章主要给大家介绍了关于教你3分钟如何发布Qt程序的相关资料，文中通过实例代码结束的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-08-24
- 本文主要介绍了Qt使用windeployqt工具实现程序打包发布方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-11-01
- 这篇文章主要为大家详细介绍了Qt实现闹钟小程序，利用Qt的designer设计需要的闹钟界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-04-25
- 信号和槽是Qt特有的信息传输机制，本文主要介绍了浅谈Qt信号与槽的各种连接方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要介绍了PyQt QMainWindow的使用示例，帮助大家更好的理解和学习使用pyqt，感兴趣的朋友可以了解下...2021-03-20
- 本文主要介绍了Qt实现UDP多线程数据处理及发送的简单实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-21
- 这篇文章主要为大家详细介绍了Qt自定义控件实现线条型加载条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-04-25
- 这篇文章主要为大家详细介绍了Qt自定义控件实现圆圈加载进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-04-25
- 这篇文章主要为大家详细介绍了Qt实现Flappy Bird游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-04-25
- 这篇文章主要为大家详细介绍了Qt使用QPainter绘制3D立方体，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-21
- 这篇文章主要为大家详细介绍了Qt实现进程界面之间的鼠标焦点切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-09-25
- 下面小编就为大家带来一篇QT开发应用程序的欢迎界面实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-04-25
- 本文主要介绍了Qt实现网络聊天室，实现一个在线聊天室, 使用tcp对客户端和服务器端进行通讯。具有一定的参考价值，具有一定的参考价值，...2021-06-23
- 如果用qt写程序作为上位机，然后通过和usb和下位机通信的时候，就需要用到qt中的串口通信了。本文介绍了QT串口通信的实现方法，感兴趣的小伙伴们可以参考一下...2021-05-20
- 本文将介绍Qt之ui在程序中的使用-多继承法，需要的朋友可以参考...2020-04-25
- 下面小编就为大家带来一篇QT网络编程UDP下C/S架构广播通信(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-04-25
- 这篇文章主要个给大家介绍了关于Qt自定义表头实现过滤功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Qt具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-04-25