QT：利用计时器连续播放图片组成动图效果

程序员文章站 2022-05-22 19:20:21

...

一、效果展示

（该动图完全由jpg图片连续播放构成）

二、步骤（代码解释+注意问题）

1. 配置头文件

头文件我就直接上代码了

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();
    void paintEvent(QPaintEvent * event);//绘图事件，用于绘制图片
    void timerEvent(QTimerEvent * event);//计时器事件，用于更新curIndex索引
    void initPixmap();//通过图片路径将图片存储到pixmap数组中
    int curIndex;//用于充当pixmap容器对应位置的索引
private:
    Ui::Dialog *ui;
    QPixmap pixmap[99];//Qpixmap可以与图片进行绑定，并且将图片用GPU绘制出来
};

#endif // DIALOG_H

2. 创建资源文件，导入图片

（步骤就不用我说了，讲讲注意问题）

因为这里导入的图片数量比较多，我们用到了一种方法，能够快速的将图片绑定至pixmap数组中，而免去了将所有图片路径都敲一遍的困扰。具体方法详见步骤6。
此处需要注意的是，由于这种方法，请确保你的图片名完全是由英文、下划线、数字组成。名字不符合的可以利用Windows批处理指令快速修改。方法大家可以在网上查一下，这里不过多叙述。

3. 主函数部分

startTimer() 方法指定了计时器事件所需要的时间间隔值。也就是说，在本案例中，每经过100毫秒，计时器事件就会被调用一次。

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
    resize(524,475);//指定窗口大小，此处选择和图片相一致
    curIndex=0;//初始化索引
    startTimer(100);
    initPixmap();
}

4. 绘画事件

这里的drawPixmap方法，是QPixmap中的一种方法，可以从硬件层面¹绘制QPixmap所绑定的图片；
通过QRect类型指定图片的尺寸，当做参数传入drawPixmap方法中对所绘制图片的大小予以设定。

void Dialog::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QRect q(0,0,524,475);//根据图片大小进行调整
    painter.drawPixmap(q,pixmap[curIndex],q);
}

5. 计时器事件

通过计时器事件来更新curIndex索引，使得每经历一次指定的时间间隔，索引就会更新一次，并且将图片通过repaint() 方法进行重绘。如果想实现循环播放的效果，只需要在循环到最后时重置索引值为0即可。

void Dialog::timerEvent(QTimerEvent *event)
{
    curIndex++;
    if (curIndex>=99)
        curIndex=0;
    repaint();
}

6.将图片绑定至pixmap数组中

值得注意的是，在头文件中声明Qpixmap数组时，该数组的大小应当是你所用到图片的数量。

具体讲一下快速绑定大批量图片的步骤：
①: 利用QString类型来保存图片路径，将图片名调整至仅一个数字不同，并且该数字可作为图片播放顺序的依据。
②: 将图片路径不同的部分用参数 %1 代替，利用QString的arg方法，将该参数按照指定的形式填充，本案例的arg方法有四个参数，分别是起始填充数字、参数的最大位数、进制、默认填充参数。
③: 以循环的形式更新参数，同时创建和写入新的QPixmap，并存储进QPixmap数组中。

void Dialog::initPixmap()
{
    for(int i=0;i<99;i++)
    {
        QString fileName = QString(":/new/prefix1/chick/res_%1.jpg").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map(fileName);
        pixmap[i]=map;
    }
}

硬件层面：指的是相比于QImage，QPixmap对于图片的绘制利用了GPU，能够有效提升大图片或者数量较多的图片的绘制速度以及绘制质量。 ↩︎