欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用QT制作动态图

程序员文章站 2022-05-30 09:26:23
...

利用QT来制作动态图

利用QT将静态图片绘制成动态图,借用QT中的计时器,实现图片的变换。
绘制喷火龙和动态跑步小人的gif图

首先在dialog.cpp中所用到头文件

#include "dialog.h"
#include "ui_dialog.h"
#include <QPainter>
#include <QPixmap>

首先定时器的使用需要用到QTimer类
QTimer类通用方法有

//创建定时器
QTimer *testTimer=new QTimer(this);
//将定时器超时信号与槽练习起来
connect(testTimer,SIGNAL(timeout()),this,SLOT(testFunction()));
//开始运行定时器,时间间隔为100ms
testTimer->start(100);


或者直接定义一个计时器。
eventID=startTimer(100);//计时器函数,每个100毫秒变换事件

首先将所要结合的图片放入一个数组中,每跳跃一次调用一次图片。

void Dialog::InitPixmap()
{
    for(int i=0;i<24;i++)
    {
        QString fileName1=QString(":/b/phl/%1.png").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map1(fileName1);
        pixmap[i]=map1;//喷火龙图片存放
    }
    for(int i=0;i<24;i++)
    {
        QString fileName2=QString(":/b/phl/1_%1.png").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map2(fileName2);
        pixmap1[i]=map2;//动态小人存放
    }
}

其中的QString(“图片所在地址”).arg(i+1,2,10,QLatinchar(‘0’));
其中此代码的喷火龙静态图片的名称为01~~24这里面变化的是01~24,所以在变化的数字处进行改变用“%1”来待替需要改变的数字。
在右边的arg( i+1,地址最高位数,变换地址的进制数,空余的位置所来填充的数字)用来变换图片的地址来储存。

然后是painterEvent()与timerEvent()函数


void Dialog::paintEvent(QPaintEvent *event)
{
   QPainter painter(this);
   for(int i=0;i<3;i++)
   {
     QRect q(0,0,500,200);
     QRect q1(230,0,500,200);
     QRect q2(0,0,80,91);
     QRect q3(230+i*160,200,160,182);
     painter.drawPixmap(q1,pixmap[curIndex],q);//喷火龙的图
     painter.drawPixmap(q3,pixmap1[curIndex1+8*i],q2);//动态小人图
  }
}


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

计时器每进行一次跳转则这需要函数调用一次,则调用repaint()函数一直重复调用timerEvent(),在timerEvent()中进行对图片数组的变换。
在painterEvent()中调用图片,painter.drawPixmap(展示图片的位置与大小比例,图片,抽取原图片的位置与大小比例)。前面QRect定义的就是q(x初始,y初始,x方向长度,y方向长度)

dialog.cpp完整代码:

#include "dialog.h"
#include "ui_dialog.h"
#include<QPainter>
#include<QPixmap>


Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::Dialog)
{
    ui->setupUi(this);
    setWindowTitle("我的应用程序");
    
    resize(1024,512);
    eventID=startTimer(100);

    curIndex =0;
    curIndex1 =0;
    InitPixmap();
}


Dialog::~Dialog()
{
    delete ui;
}


void Dialog::paintEvent(QPaintEvent *event)
{
   QPainter painter(this);
   for(int i=0;i<3;i++)
   {
     QRect q(0,0,500,200);
     QRect q1(230,0,500,200);
     QRect q2(0,0,80,91);
     QRect q3(230+i*160,200,160,182);
     painter.drawPixmap(q1,pixmap[curIndex],q);//喷火龙的图
     painter.drawPixmap(q3,pixmap1[curIndex1+8*i],q2);//动态小人图
  }
}


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


void Dialog::InitPixmap()
{
    for(int i=0;i<24;i++)
    {
        QString fileName1=QString(":/b/phl/%1.png").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map1(fileName1);


        pixmap[i]=map1;
    }
    for(int i=0;i<24;i++)
    {
        QString fileName2=QString(":/b/phl/1_%1.png").arg(i+1,2,10,QLatin1Char('0'));
        QPixmap map2(fileName2);


        pixmap1[i]=map2;
    }
}

dialog.h完整代码

#ifndef DIALOG_H
#define DIALOG_H


#include <QDialog>


QT_BEGIN_NAMESPACE
namespace Ui { class Dialog; }
QT_END_NAMESPACE


class Dialog : public QDialog
{
    Q_OBJECT


public:
    Dialog(QWidget *parent = nullptr);
    ~Dialog();


    void paintEvent(QPaintEvent*event);
    void timerEvent(QTimerEvent*event);
    int eventID;


    int curIndex;


    int curIndex1;
    void InitPixmap();
private:
    QPixmap pixmap[24];
    QPixmap pixmap1[24];
    Ui::Dialog *ui;
};
#endif // DIALOG_H

最终结果图片展示:
利用QT制作动态图