本项目的下载地址:戳此访问

这是网易云课堂视频课的一个例子,(原文链接)

这个例子主要用到的QGraphicsView Class,关于这个类的介绍如下:

QGraphicsView   动态2D显示容器

  • 控制一个界面,管理大量定制Item,交互,支持旋转与缩放
  • 包含事件传播结构,对于scene中的items,具有双精度的交互能力
  • Items能够处理键盘事件,鼠标的按,移动,释放,双击事件,也可以跟踪书鼠标移动

框架:

QGraphics容器  ->  QGraphicesScene场景  ->  QGraphicsItem图元

容器可以认为是主窗口,场景是拖拽出来的Graphics View,图元可以是封装的图片

其中QGraphicsItem图元类,是一个虚基类,有8中不同的派生类

  1. QGraphicsEllipseItem 椭圆图元
  2. QGraphicsLineItem 线图元
  3. QGraphicsPathItem 曲线图元
  4. QGraphicsPixmapItem 像素图元
  5. QGraphicsPolygonItem 多边形图元
  6. QGraphicsTextItem 文本浏览器图元
  7. QGraphicsRectItem 矩形图元
  8. QGraphicsSimpleTextItem 文本标签图元 

好了,现在步入正题

一 准备步骤:

1.首先创建新文件,继承选择mainwindow

2.添加两个新类,分别命名myScene和myItem.

其中myScene先让它继承QObject目的在于使用信号与槽的功能,然后在头文件和主文件中修改继承QObject ->QGraphicsScene(QGraphicsScene并不继承QObject)

而myItem直接在下方书写:QGraphicsPixmapItem,并在头文件中包含其头文件

3.新建资源文件(为了便于管理图片以及文件路径问题),将打地鼠的图片分别建立虚拟文件夹并添加对应的图片进去,如图

                                                   

页面布局为:

                      

 

 二 QGraphicsView的使用

1.将图片封装在图元中(封装可以理解成添加,即将图片添加进图元中),查看帮助文档,找到setPixmap

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

myitem::myitem()
{
    this->setPixmap(QPixmap(":/background/bg1.png"));

}

然后将图元再封装在场景之中,先处理头文件myScene.h

#ifndef MYSCENE_H
#define MYSCENE_H

#include <QObject>
#include<QGraphicsScene>
#include"myitem.h"//包含进来myitem

class myScene : public QGraphicsScene
{
    Q_OBJECT
public:
    explicit myScene(QObject *parent = nullptr);

signals:
private:
    myitem* item;//定义myitem指针对象
public slots:
};

#endif // MYSCENE_H

再处理myScene.cpp

#include "myscene.h"

myScene::myScene(QObject *parent) : QGraphicsScene(parent)
{
    this->item = new myitem;//开辟堆空间
    this->addItem(this->item);//将item添加进场景中

}

最后将场景再封装进主窗口,还是先处理头文件

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include"myscene.h"

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    myScene* scene;//定义指针对象
};

#endif // MAINWINDOW_H

最后在mainwindow中编写

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->scene = new myScene;
    this->ui->graphicsView->setScene(scene);//在容器内设置场景
}

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

这时运行程序显示

                   

我们完成了将图片封装在图元,图元封装在场景,最后将场景封装在容器中.

未完待续.....