Qt学习之Graphics View框架（实现开机动画）

似末

已于 2022-03-19 21:57:37 修改

阅读量4.3k

点赞数 6

分类专栏： Qt学习文章标签： qt 动画开发语言 c++

于 2022-02-16 09:17:31 首次发布

本文链接：https://blog.csdn.net/wmcy123/article/details/122955644

版权

Qt学习专栏收录该内容

19 篇文章 20 订阅

订阅专栏

1.1 新建一个类myItem继承于QGraphicsItem

1.2 myItem头文件（.h）

1.3 重载构造函数

1.4 boundingRect函数以及paint函数实现

1.5 advance函数实现

1.6 完整代码（.cpp）

2、自定义一个view（视图）

2.1 新建一个类WelcomeWin继承于QGraphicsView

2.2 WelcomeWin头文件（.h）

2.3 WelcomeWin完整代码（.cpp）

四、主函数测试

一、实现效果

图元碰撞，提示开机成功。

二、图元、视图、场景简单介绍

1、相互关系

图元：包含在场景中，一个场景可以有多个图元。

视图：相当于一个小窗口，用来观察场景的，视图可以有多个场景。

场景：相当于一块幕布，里面有好多元素（图元）。

2、头文件

#include <QGraphicsItem>   //图元

#include <QGraphicsView>   //视图

#include <QGraphicsScene>  //场景

3、实现流程

大致流程是：新建图元——>新建场景——>场景添加图元——>新建视图——>视图关联场景。

三、代码实现

1、自定义一个Item（图元）

1.1 新建一个类myItem继承于QGraphicsItem

记得勾上QObject，因为之后会用到信号与槽。

1.2 myItem头文件（.h）

自定义Item类主要重写了boundingRect函数、paint函数以及advance函数。boundingRect用于返回一个碰撞大小的矩形框，对之后碰撞检测有影响。paint函数主要用于图元的绘制，实现自定义图元。advance函数用于图元移动。

以及自定义了一个信号（signals）：void MyItemcolliding()，主要用于两个图元碰撞到了之后发射该信号，然后图元消失，成功开机。

因为用到信号，所以要添加Q_OBJECT宏，并继承与QObject，不然后期可能会出现报错。

#ifndef MYITEM_H
#define MYITEM_H

#include <QObject>
#include <QString>
#include <QGraphicsItem>

class myItem : public QObject, public QGraphicsItem
{
    Q_OBJECT
public:
    myItem();
    myItem(int x,int y,QString file,int pos);
    QRectF boundingRect() const override;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = nullptr) override;

private:
    int x,y,w,h,role;
    QString file;

public slots:
    void advance(int phase) override;

signals:
    void MyItemcolliding();
};

#endif // MYITEM_H

1.3 重载构造函数

int x、int y: 图元的位置（坐标）

QString file：图元所要加载的图片所在的路径

int role：图元的类型，本例主要用于定义警察和小偷

myItem::myItem(int x, int y, QString file, int role)
{
    this->x=x;
    this->y=y;
    this->role=role;
    this->file=file;
    this->w=QImage(this->file).width();
    this->h=QImage(this->file).height();
    this->setPos(this->x,this->y);
}

1.4 boundingRect函数以及paint函数实现

collidingItems()会返回一个碰撞图元链表，也就是说里面存放的是正在发生碰撞的图元，可以用 isEmpty()函数来判断是否图元发生了碰撞。isEmpty()函数返回值为bool类型，为空返回true，否则返回false。

QRectF myItem::boundingRect() const
{
    //qreal penWidth = 1; //不定义画笔宽度了，直接用0取代

    return QRectF(0, 0, this->w, this->h);//返回碰撞的矩形框
}


void myItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    //标明该参数没有使用
    Q_UNUSED(option)
    Q_UNUSED(widget)

    if(collidingItems().isEmpty())//没有与其他图形项碰撞
    {
        //没有碰撞就绘图，碰撞到了图元消失（不绘制）
        painter->drawImage(QRectF(0,0,this->w,this->h),QImage(this->file));
    }

    //可以加个else，图元碰撞到了变成其他图片
}

1.5 advance函数实现

如果collidingItems()不为空，则碰撞到了，就发送自定义信号。

void myItem::advance(int phase)
{
    //如果phase为0，表示将开始移动则返回
    if(!phase)
    {
        return;
    }
    if(!collidingItems().isEmpty())
    {
        emit MyItemcolliding();//碰撞后发射信号
    }
    if(this->role == 1)//警察，移动快
    {
        moveBy(-5,0);//向左移动5
    }
    else if(this->role == -1)//小偷，移动慢
    {
        moveBy(-2,0);//向左移动2
    }

}

1.6 完整代码（.cpp）

#include "myitem.h"
#include <QPainter>

myItem::myItem()
{

}

myItem::myItem(int x, int y, QString file, int role)
{
    this->x=x;
    this->y=y;
    this->role=role;
    this->file=file;
    this->w=QImage(this->file).width();
    this->h=QImage(this->file).height();
    this->setPos(this->x,this->y);
}

QRectF myItem::boundingRect() const
{
    //qreal penWidth = 1; //不定义画笔宽度了，直接用0取代
    return QRectF(0, 0, this->w, this->h);
}

void myItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    //标明该参数没有使用
    Q_UNUSED(option)
    Q_UNUSED(widget)

    if(collidingItems().isEmpty())//没有与其他图形项碰撞
    {
        //没有碰撞就绘图，碰撞到了图元消失（不绘制）
        painter->drawImage(QRectF(0,0,this->w,this->h),QImage(this->file));
    }
    //可以加个else，图元碰撞到了变成其他图片
}

void myItem::advance(int phase)
{
    //如果phase为0，表示将开始移动则返回
    if(!phase)
    {
        return;
    }
    if(!collidingItems().isEmpty())
    {
        emit MyItemcolliding();//碰撞后发射信号
    }
    if(this->role == 1)//警察，移动快
    {
        moveBy(-5,0);//向左移动5
    }
    else if(this->role == -1)//小偷，移动慢
    {
        moveBy(-2,0);//向左移动2
    }

}

2、自定义一个view（视图）

2.1 新建一个类WelcomeWin继承于QGraphicsView

记得勾上QObject。

2.2 WelcomeWin头文件（.h）

包括两个自定义图元，一个定时器，一个场景，以及一个槽函数。也要加上Q_OBJECT宏。

#ifndef WELCOMEWIN_H
#define WELCOMEWIN_H

#include <QObject>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QTimer>
#include "myitem.h"

class WelcomeWin : public QGraphicsView
{
    Q_OBJECT
public:
    WelcomeWin();

private:
    myItem *item1, *item2; //添加两个自定义Item
    
    QTimer *timer;  //定时器，用于图元移动
    
    QGraphicsScene *sence;  //场景

public slots:
    void timerStop(); //槽函数，用于关闭定时器，提示开机成功
};

#endif // WELCOMEWIN_H

2.3 WelcomeWin完整代码（.cpp）

#include "welcomewin.h"
#include <QMessageBox>

WelcomeWin::WelcomeWin()
{
    timer=new QTimer;
    //新建图元
    item1=new myItem(this->width()-240,450,"image/thrief.png",-1);//-1代表小偷
    item2=new myItem(this->width()+100,450,"image/police.png",1);//1代表警察

    //新建场景
    sence=new QGraphicsScene;
    sence->setSceneRect(0,0,this->width()+459,this->height()+368);//设置场景位置，可根据自己的背景图调位置

    //场景添加图元
    sence->addItem(item1);
    sence->addItem(item2);

    //视图关联场景
    this->setScene(sence);
    this->setFixedSize(800,550);
    
    this->setWindowTitle("Welcome");
    this->setBackgroundBrush(QBrush(QPixmap("image/start-background.jpeg")));//设置视图背景
    this->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//不要水平滑动条
    this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//不要垂直滑动条

    this->setWindowFlags(Qt::FramelessWindowHint);//设置窗体无边框
    this->setWindowIcon(QIcon("image/警徽.png"));

    //定时器
    connect(timer,SIGNAL(timeout()),sence,SLOT(advance()));//定时器超时会调用图元的advance函数，图元移动
    timer->start(30);//每30毫秒超时

    connect(item2,SIGNAL(MyItemcolliding()),this,SLOT(timerStop()));//图元碰撞会发送MyItemcolliding()信号，并关联槽
}

//槽函数实现
void WelcomeWin::timerStop()
{
    this->timer->stop(); //定时器关闭

    QMessageBox msgBox(this);  //消息提示框

    msgBox.setWindowIcon(QIcon("image/提示.png"));
    msgBox.setWindowTitle("Tip");
    msgBox.setStyleSheet("QMessageBox QLabel{min-width: 400px;"
                         " min-height: 100px;font:16pt; font-family:'楷体';}");

    msgBox.setText("开机成功");
    msgBox.exec();
    this->close();  //开机成功，当前窗口关闭
}

四、主函数测试

测试结果在文章开头。

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    WelcomeWin w;
    
    w.show();

    return a.exec();
}

原创不易，转载请标明出处。

似末

关注

6
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录