我的QT Creator学习笔记（二十三）——图形视图

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事件处理与传播

图形视图框架中的事件都是先由视图接收，然后传递给场景，再由场景传递给相应的图形项。对于键盘事件会传递给获得焦点的图形项。