Qt提供了图形视图框架（Graphics View Framework)、动画框架（The Animation Framework)和
参考文献：《Qt Creator 快速入门》第三版 霍亚飞编著
状态机框架（The State Machine Framework)来实现更加高级的图形和动画应用。
一、图形视图框架的结构
图形视图框架提供了一个居于图形项的模型视图编程方法，主要由场景、视图和图形项三部分组成，这三部分分别由QGraphicsScene、QGraphicsView和QGraphicsItem这3个类来表示。多视图可以看成一个场景，场景中包含各种各样几何形状的图形项。
1.1场景QGraphicsScene
QGraphicsScene提供了图形视图框架中的场景，场景有以下功能：
- 提供用于管理大量图形的告诉接口；
- 传播事件到某一个图形项
- 管理图形项的状态，比如选择和处理焦点
- 提供五变换的渲染功能，主要用于打印
场景是图形项QGraphicsItem对象的容器，可以调用QgraphicsScenen::addItem()函数将图形项添加到场景中，然后调用任意一个图形项发现函数（QgraphicsScenen::items()、QgraphicsScenen::itemAt()、QgraphicsScenen::foucusItem()等）来检索添加的图形项，调用QgraphicsScenen::removeItem()函数删除图形项。
1.2视图QGraphicsView
QGraphicsView提供了视图部件，它用来使场景中的内容可视化。默认的QGraphicsView提供了一个QWidget作为视口部件，如果要使用OpenGL进行渲染，则可以调用QGraphicsView::setViewPort()函数设置QOpenGLWidget作为视口。可以对视图设置前景色和背景色（也可以对整个场景设置）。
场景和视图的示例代码如下
#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QGraphicsView>
#include <QDebug>
int main(int argc,char* argv[])
{
QApplication app(argc,argv);
//新建场景
QGraphicsScene scene;
//创建矩形图形项
QGraphicsItem* item=new QGraphicsRectItem(0,0,100,100);
//将图形添加到场景中
scene.addItem(item);
//输出（50，50）点处的图形项
qDebug()<<scene.itemAt(50,50,QTransform());
//为场景创建视图
QGraphicsView view(&scene);
//设置场景的前景色
view.setForegroundBrush(QColor(255,255,0,100));
//设置场景的背景图片
view.setBackgroundBrush(QPixmap("../myscene/background.jpg"));
view.resize(400,300);
view.show();
return app.exec();
}
运行效果
1.3图形项
QGraphicsItem是图形项的基类，主要支持如下功能：
- 鼠标按下、移动、释放、双击、悬停、滚轮和右键菜单。
- 键盘输入焦点和键盘事件。
- 拖放事件。
- 分组，使用QGraphicsItemGroup通过parent-child关系来实现。
- 碰撞检测。
- 使用setData()和data接口进行数据存储和获取。
要实现自定义的图形项，首先定义一个QGraphicsItem的子类，然后重新实现它的两个纯虚公共函数boundingRect()和paint(),前者用来返回要绘制图形项的矩形区域，后者用来执行实际的绘图操作。
实列代码如下，类头文件
#ifndef MYITEM_H
#define MYITEM_H
#include <QGraphicsItem>
class MyItem:public QGraphicsItem
{
public:
MyItem();
QRectF boundingRect() const;
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = Q_NULLPTR);
};
#endif // MYITEM_H
类实现
#include "myitem.h"
#include <QPainter>
MyItem::MyItem()
{
}
QRectF MyItem::boundingRect() const
{
qreal penWidth=1;
return QRectF(0-penWidth/2,0-penWidth/2.0,200+penWidth,200+penWidth);
}
void MyItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
painter->setBrush(Qt::red);
painter->drawRect(0,0,200,200);
}
二、图形视图框架的坐标系统和事件处理
2.1图形项坐标
图形项使用自己的本地坐标系统，坐标通常是以它们的中心为原点（0，0），而这也是所有变换的中心。图形项默认位置是父图形项或者场景的原点处，可以使用setPos函数指定其位置。使用setZvalue设置显示层级，Z越大显示层级越高。
2.2场景坐标
场景坐标是所有图形项的基础坐标吸引。描述了每一个顶层图形项的位置，也用于处理所有从视图传到场景上的事件。场景坐标的原点在场景的中心，x和y坐标分别向右和下增大。
2.3视图坐标
视图的坐标就是部件的坐标。视图坐标的每一个单位对应一个像素，原点（0，0）在QGraphicsView视口的左上角。所有的鼠标事件和拖放事件最初都是使用视图坐标接收的。
2.4坐标映射
| 映射函数 | 描述 |
| QGraphicsView::mapToScene() | 从视图坐标系统映射到场景坐标系统 |
| QGraphicsView::mapFromScene() | 从场景坐标系统映射到视图坐标系统 |
| QGraphicsItem::mapToScene() | 从图形项的坐标系统映射到场景的坐标系统 |
| QGraphicsItem::mapFromScene() | 从场景的坐标系统映射到图形项的坐标系统 |
| QGraphicsItem::mapToParent() | 从本图形项的坐标系统映射到父图形项的坐标系统 |
| QGraphicsItem::mapFromParent() | 从父图形项的坐标系统映射到本图形项的坐标系统 |
| QGraphicsItem::mapToItem() | 从本图形项的坐标系统映射到另一个图形项的坐标系统 |
| QGraphicsItem::mapFromItem() | 从另一个图形项的坐标系统映射到本图形项的坐标系统 |
示例代码
myView类定义及实现
#ifndef MYVIEW_H
#define MYVIEW_H
#include <QGraphicsView>
class MyView:public QGraphicsView
{
Q_OBJECT
public:
explicit MyView(QWidget* parent=0);
protected:
void mousePressEvent(QMouseEvent *event);
};
#endif // MYVIEW_H
#include "myview.h"
#include <QMouseEvent>
#include <QGraphicsItem>
#include <QDebug>
MyView::MyView(QWidget *parent):QGraphicsView(parent)
{
}
void MyView::mousePressEvent(QMouseEvent *event)
{
//分别获取单击处在视图、场景和图形中的坐标，并输出
QPoint viewPos=event->pos();
qDebug()<<"viewPos:"<<viewPos;
QPointF scenePos=mapToScene(viewPos);
qDebug()<<"scenePos:"<<scenePos;
QGraphicsItem* item=scene()->itemAt(scenePos,QTransform());
if(item)
{
QPointF itemPos = item->mapFromScene(scenePos);
qDebug()<<"itemPos:"<<itemPos;
}
}
mian函数
#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QGraphicsView>
#include <QDebug>
#include "myitem.h"
#include "myview.h"
int main(int argc,char* argv[])
{
QApplication app(argc,argv);
//新建场景
QGraphicsScene scene;
//创建自定义图形项
QGraphicsItem* item=new MyItem;
//将图形添加到场景中
scene.addItem(item);
item->setPos(10,10);
QGraphicsItem* rectItem=scene.addRect(QRect(0,0,100,100),QPen(Qt::blue),QBrush(Qt::green));
rectItem->setPos(20,20);
rectItem->setParentItem(item);
rectItem->setRotation(45);
MyView view;
view.setScene(&scene);
view.setForegroundBrush(QColor(255,255,0,100));
view.setBackgroundBrush(QPixmap("../myscene/background.jpg"));
view.resize(400,300);
view.show();
return app.exec();
}
运行，点击图标输出信息
2.5事件处理与传播
图形视图框架中的事件都是先由视图接收，然后传递给场景，再由场景传递给相应的图形项。对于键盘事件会传递给获得焦点的图形项。