Graphics view framework for QT learning (to realize startup animation)

Catalog

One 、 Realization effect

Two 、 Primitives 、 View 、 A brief introduction to the scene

1、 interrelation

2、 The header file

         3、 Implementation process

3、 ... and 、 Code implementation

1、 Customize a Item（ Primitives ）

1.1  Create a new class myItem Inherited from QGraphicsItem

1.2  myItem The header file （.h）

1.3  overloaded constructor

1.4  boundingRect Function and paint Function implementation

1.5  advance Function implementation

1.6  Complete code （.cpp）

2、 Customize a view（ View ）

2.1  Create a new class WelcomeWin Inherited from QGraphicsView

2.2  WelcomeWin The header file （.h）

2.3  WelcomeWin Complete code （.cpp）

Four 、 Main function test

---

One 、 Realization effect

         Element collision , Prompt that the boot is successful .

Two 、 Primitives 、 View 、 A brief introduction to the scene

1、 interrelation

Primitives ： Included in the scene , A scene can have multiple primitives .

View ： It is equivalent to a small window , Used to observe the scene , A view can have multiple scenes .

scene ： Equivalent to a curtain , There are many elements in it （ Primitives ）.

2、 The header file

#include <QGraphicsItem>   // Primitives 

#include <QGraphicsView>   // View 

#include <QGraphicsScene>  // scene 

3、 Implementation process

The general process is ： New element ——> New scene ——> Add elements to the scene ——> New view ——> The view is associated with the scene .

3、 ... and 、 Code implementation

1、 Customize a Item（ Primitives ）

1.1  Create a new class myItem Inherited from QGraphicsItem

         Remember to tick on QObject, Because signals and slots will be used later .

1.2  myItem The header file （.h）

         Customize Item Class mainly overrides boundingRect function 、paint Function and advance function .boundingRect Rectangle used to return a collision size , It has an impact on subsequent collision detection .paint Function is mainly used for drawing primitive , Implement custom elements .advance The function is used to move elements .

        And customized a signal （signals）：void MyItemcolliding(), It is mainly used to transmit the signal after two primitives collide , Then the element disappears , Boot successfully .

         Because signals are used , So add Q_OBJECT macro , And inherit with QObject, Otherwise, errors may be reported later .

#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  overloaded constructor

int  x、int  y:        The location of the element （ coordinate ）

QString file：        The path of the image to be loaded by the element

int role：        The type of element , This example is mainly used to define police and thieves

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 Function and paint Function implementation

        collidingItems() A collision entity linked list will be returned , That is to say, the collision elements are stored inside , It can be used  isEmpty() Function to determine whether an element collides .isEmpty() The return value of the function is bool type , Empty return true, Otherwise return to false.

QRectF myItem::boundingRect() const
{
    //qreal penWidth = 1; // The brush width is not defined , Direct use 0 replace 

    return QRectF(0, 0, this->w, this->h);// Returns the collision rectangle 
}


void myItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    // Indicates that the parameter is not used 
    Q_UNUSED(option)
    Q_UNUSED(widget)

    if(collidingItems().isEmpty())// No collision with other drawing items 
    {
        // Draw without collision , Collided with the element and disappeared （ No drawing ）
        painter->drawImage(QRectF(0,0,this->w,this->h),QImage(this->file));
    }

    // You can add else, The primitive collides with other pictures 
}

1.5  advance Function implementation

         If collidingItems() Not empty , Then it collides with , Just send a custom signal .

void myItem::advance(int phase)
{
    // If phase by 0, Indicates that it will start moving, then it returns 
    if(!phase)
    {
        return;
    }
    if(!collidingItems().isEmpty())
    {
        emit MyItemcolliding();// After the collision, the signal is transmitted 
    }
    if(this->role == 1)// The police , Move fast 
    {
        moveBy(-5,0);// Move to the left 5
    }
    else if(this->role == -1)// Thief , Move slowly 
    {
        moveBy(-2,0);// Move to the left 2
    }

}

1.6  Complete code （.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; // The brush width is not defined , Direct use 0 replace 
    return QRectF(0, 0, this->w, this->h);
}

void myItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    // Indicates that the parameter is not used 
    Q_UNUSED(option)
    Q_UNUSED(widget)

    if(collidingItems().isEmpty())// No collision with other drawing items 
    {
        // Draw without collision , Collided with the element and disappeared （ No drawing ）
        painter->drawImage(QRectF(0,0,this->w,this->h),QImage(this->file));
    }
    // You can add else, The primitive collides with other pictures 
}

void myItem::advance(int phase)
{
    // If phase by 0, Indicates that it will start moving, then it returns 
    if(!phase)
    {
        return;
    }
    if(!collidingItems().isEmpty())
    {
        emit MyItemcolliding();// After the collision, the signal is transmitted 
    }
    if(this->role == 1)// The police , Move fast 
    {
        moveBy(-5,0);// Move to the left 5
    }
    else if(this->role == -1)// Thief , Move slowly 
    {
        moveBy(-2,0);// Move to the left 2
    }

}

2、 Customize a view（ View ）

2.1  Create a new class WelcomeWin Inherited from QGraphicsView

         Remember to tick on QObject.

 

2.2  WelcomeWin The header file （.h）

         Includes two custom elements , A timer , A scene , And a slot function . Plus Q_OBJECT macro .

#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; // Add two custom Item
    
    QTimer *timer;  // Timer , For element movement 
    
    QGraphicsScene *sence;  // scene 

public slots:
    void timerStop(); // Slot function , Used to turn off the timer , Prompt that the boot is successful 
};

#endif // WELCOMEWIN_H

2.3  WelcomeWin Complete code （.cpp）

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

WelcomeWin::WelcomeWin()
{
    timer=new QTimer;
    // New element 
    item1=new myItem(this->width()-240,450,"image/thrief.png",-1);//-1 For thieves 
    item2=new myItem(this->width()+100,450,"image/police.png",1);//1 On behalf of the police 

    // New scene 
    sence=new QGraphicsScene;
    sence->setSceneRect(0,0,this->width()+459,this->height()+368);// Set the scene position , You can adjust the position according to your own background 

    // Add elements to the scene 
    sence->addItem(item1);
    sence->addItem(item2);

    // The view is associated with the scene 
    this->setScene(sence);
    this->setFixedSize(800,550);
    
    this->setWindowTitle("Welcome");
    this->setBackgroundBrush(QBrush(QPixmap("image/start-background.jpeg")));// Set the view background 
    this->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);// Do not slide the bar horizontally 
    this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);// Do not slide the bar vertically 

    this->setWindowFlags(Qt::FramelessWindowHint);// Set form borderless 
    this->setWindowIcon(QIcon("image/ police badge .png"));

    // Timer 
    connect(timer,SIGNAL(timeout()),sence,SLOT(advance()));// When the timer times out, the... Of the element will be called advance function , Element movement 
    timer->start(30);// Every time 30 MS timeout 

    connect(item2,SIGNAL(MyItemcolliding()),this,SLOT(timerStop()));// Element collisions send MyItemcolliding() The signal , And associate slots 
}

// Slot function implementation 
void WelcomeWin::timerStop()
{
    this->timer->stop(); // Timer off 

    QMessageBox msgBox(this);  // Message box 

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

    msgBox.setText(" Boot successful ");
    msgBox.exec();
    this->close();  // Boot successful , The current window closes 
}

Four 、 Main function test

         The test results are at the beginning of the article .

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

    WelcomeWin w;
    
    w.show();

    return a.exec();
}

Originality is not easy. , Reprint please indicate the source .