QT图形/视图架构详解（一）

场景、视图与图形项

图形/视图架构主要由 3 个部分组成，即场景、视图和图形项，三者的关系如图所示：

场景（QGraphicsScene 类）

场景不是界面组件，它是不可见的。场景是一个抽象的管理图形项的容器，我们可以向场景添加图形项，可以获取场景中的某个图形项。场景主要具有如下一些功能。

• 提供管理大量图形项的快速接口。

• 将事件传播给每个图形项。

• 管理每个图形项的状态，例如选择状态、焦点状态等。

• 管理未经变换的渲染功能，主要用于打印。

视图（QGraphicsView类）

QGraphicsView 是图形/视图架构中的视图组件。所以它是一个界面组件，用于显示场景中的内容。可以为一个场景设置多个视图，用于对同一个场景提供不同的显示界面。

在上图中，虚线框部分是一个场景，视图 1（场景外部的实线矩形框）比场景大，显示场景的全部内容。默认情况下，当视图大于场景时，场景在视图的中央位置显示，也可以通过设置视图的 Alignment 属性来控制场景在视图中的显示位置。视图 2（场景内部的实线矩形框）比场景小，视图 2 只能显示场景的部分内容，但是会自动提供卷滚条实现在整个场景内移动。

图形项（QGraphicsItem类）

图形项相当于模型中的数据，一个图形项存储了绘制这个图形项的各种参数，场景管理所

有图形项，而视图组件则负责绘制这些图形项。

QGraphicsItem 支持如下一些操作：

• 鼠标事件响应。

• 键盘输入，以及按键事件。

• 拖放操作。

• 支持组合，可以是父子图形项关系组合，也可以通过 QGraphicsItemGroup 类进行组合。

总结：场景是图形项的容器，可以在场景中添加很多图形项，每个图形项就是一个对象。视图是显示场景的全部或部分区域的视口，也就是显示场景中的图形项，这些图形项可以被选择和拖动。

图形/视图架构的坐标系

图形/视图架构有 3 个有效的坐标系：场景坐标系、视图坐标系、图形项坐标系。3 个坐标系的

示意如图所示。

绘图的时候，场景坐标系等价于 QPainter的逻辑坐标系，一般以场景的中心为原点；视图坐标系与绘图设备坐标系相同，是物理坐标系，默认以左上角为原点；图形项坐标系是局部逻辑坐标系，一般以图形项的中心为原点。

图形项坐标系

图形项使用自己的局部坐标系，通常以其中心为原点(0, 0)，这也是各种坐标变换的中心。绘制图形项时只需考虑其局部坐标系，QGraphicsScene 和 QGraphicsView 会自动进行坐标变换。

图形项的位置是指其中心在父对象坐标系中的坐标。其父对象可以是场景或者其他父图形项。

QGraphicsItem 的大多数函数都在其局部坐标系上操作，QGraphicsItem::pos()是仅有的几个例外之一，它返回的是图形项在父图形项坐标系中的坐标，如果是顶层图形项，则返回的是在场景中的坐标。

视图坐标系

视图坐标系就是视图组件的物理坐标系，单位是像素。视图坐标系只与视图组件或视口有关，而与观察的场景无关。QGraphicsView 视口的左上角坐标总是(0,0)。

所有的鼠标事件、拖放事件的坐标首先是由视图坐标系定义的，然后用户需要将这些坐标映射为场景坐标，以便和图形项交互。

场景坐标系

场景坐标系定义了所有图形项的基础坐标，场景坐标系描述了每个顶层图形项的位置。创建场景时可以定义场景矩形区域的坐标范围。

scene= new QGraphicsScene(-400,-300,800,600);

这样定义的 scene 是左上角坐标为(−400,−300)、宽度为 800 像素、高度为 600 像素的矩形区域，单位是像素。

每个图形项在场景里有一个位置坐标，由函数 QGraphicsItem::scenePos()给出，还有一个图形项边界矩形，由函数 QGraphicsItem::sceneBoundingRect()给出。边界矩形可以使场景知道场景的哪个区域发生了变化。场景发生变化时会发射 QGraphicsScene::changed()信号，参数是场景内的矩形区域列表，表示发生变化的矩形区域。

坐标映射

在场景中操作图形项时，会进行场景到图形项、图形项到图形项或视图到场景的坐标变换。例如，在 QGraphicsView 的视口上点击鼠标时，通过函数 QGraphicsView::mapToScene() 可以将视图坐标映射为场景坐标，然后用 QGraphicsScene::itemAt()函数可以获取场景中鼠标光标处的图形项。

示例程序解读

该程序的主要功能：

• 工作区是一个 TGraphicsView 组件，其作为绘图的视图组件。

• 程序中创建了一个 QGraphicsScene 场景，场景的大小就是下图中的实线矩形框的大小。

• 若改变窗口大小，当视图大于场景时，矩形框总是居于视图的中央；当视图小于场景时，在视图窗口中会自动出现卷滚条。

• 椭圆正好处于场景的中央，圆位于场景的右下角。当图形项位置不在场景的矩形框中时，图形项也是可以显示的。

• 当鼠标光标在窗口上移动时，状态栏上会显示当前光标位置在视图中的坐标和在场景中的坐标。在某个图形项上点击鼠标时，状态栏上还会显示图形项中的局部坐标。

自定义QGraphicsView视图组件

为了实现一些定制化功能，从 QGraphicsView 继承定义了一个类 TGraphicsView ，重新实现事件处理函数mouseMoveEvent()和 mousePressEvent()，把鼠标事件转换为自定义信号，这样就可以在使用TGraphicsView 组件的主窗口里设计槽函数响应这些鼠标事件。

类声明与定义如下：

//.h文件
#ifndef TGRAPHICSVIEW_H
#define TGRAPHICSVIEW_H#include <QObject>
#include <QGraphicsView>//自定义TGraphicsView类继承QGraphicsView类
class TGraphicsView : public QGraphicsView
{Q_OBJECTprotected:    //重新实现下面两个函数void mouseMoveEvent(QMouseEvent *event);void mousePressEvent(QMouseEvent *event);public:TGraphicsView(QWidget *parent = nullptr);signals://信号会附带发送当前鼠标坐标void mouseMovePoint(QPoint point);void mouseClicked(QPoint point);
};#endif // TGRAPHICSVIEW_H///.cpp文件
#include    "tgraphicsview.h"
#include    <QMouseEvent>
#include    <QPoint>void TGraphicsView::mouseMoveEvent(QMouseEvent *event)
{//鼠标移动事件QPoint point=event->pos();      //QGraphicsView的坐标emit mouseMovePoint(point);     //释放信号QGraphicsView::mouseMoveEvent(event);   //调用父类的事件函数
}void TGraphicsView::mousePressEvent(QMouseEvent *event)
{ //鼠标左键按下事件if (event->button()==Qt::LeftButton){QPoint point=event->pos();  //QGraphicsView的坐标emit mouseClicked(point);   //释放信号}QGraphicsView::mousePressEvent(event);  //父类事件
}//构造函数
TGraphicsView::TGraphicsView(QWidget *parent):QGraphicsView(parent)
{}

这两个事件处理函数 mouseMoveEvent()和 mousePressEvent()，并定义了两个信号 mouseMovePoint()和 mouseClicked()。这两个函数的参数 event 都是 QMouseEvent 类型，如果鼠标发生相应的事件会将将发生的event传入事件处理函数。

通过 event->pos()可以获取鼠标光标在视图中的坐标 point，在发射自定义信号 mouseMovePoint()和 mouseClicked()时将 point 作为信号的参数。在其他地方可以使用connect()将该信号与相应的槽函数连接后就可以实现相应的功能。

主窗口

在主窗口函数中，设置视图的属性，连接视图的鼠标事件与槽函数，然后在视图中创建场景并将其与界面上的视图组件 view 关联起来，在场景中添加图形项，这里需要注意图形项的一些属性设置。若不调用函数 setPos()设置图形项在场景中的位置，默认位置为(0, 0)。

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{ui->setupUi(this);//状态栏设计labViewCord=new QLabel("View 坐标：", this);labViewCord->setMinimumWidth(150);ui->statusBar->addWidget(labViewCord);labSceneCord=new QLabel("Scene 坐标：", this);labSceneCord->setMinimumWidth(150);ui->statusBar->addWidget(labSceneCord);labItemCord=new QLabel("Item 坐标：", this);labItemCord->setMinimumWidth(150);ui->statusBar->addWidget(labItemCord);ui->view->setCursor(Qt::CrossCursor);   //十字光标ui->view->setMouseTracking(true);       //鼠标跟踪ui->view->setDragMode(QGraphicsView::RubberBandDrag);   //矩形选择框// ui->view->setDragMode(QGraphicsView::ScrollHandDrag);connect(ui->view,SIGNAL(mouseMovePoint(QPoint)),this, SLOT(do_mouseMovePoint(QPoint)));connect(ui->view,SIGNAL(mouseClicked(QPoint)),this, SLOT(do_mouseClicked(QPoint)));iniGraphicsSystem();    //Graphics View结构初始化
}//创建Graphics View结构中的各项
void MainWindow::iniGraphicsSystem()
{QRectF   rect(-200,-100,400,200);  //该坐标是在view中的坐标scene=new QGraphicsScene(rect,this); //scene逻辑坐标系定义ui->view->setScene(scene);      //为视图设置场景//画一个矩形框，大小等于sceneQGraphicsRectItem   *item=new QGraphicsRectItem(rect);  //矩形框正好等于scene的大小//    item->setFlag(QGraphicsItem::ItemIsSelectable);         //可选中//    item->setFlag(QGraphicsItem::ItemIsFocusable);          //可以获得焦点//    item->setFlag(QGraphicsItem::ItemIsMovable,false);      //不能移动//可选，可以有焦点，但是不能移动item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsFocusable);QPen    pen;pen.setWidth(2);item->setPen(pen);//    item->setPos(500,0);//缺省位置在scene的（0,0）scene->addItem(item);//一个位于scene中心的椭圆，测试局部坐标QGraphicsEllipseItem   *item2=new QGraphicsEllipseItem(-100,-50,200,100); //矩形框内创建椭圆,绘图项的局部坐标，左上角(-100,-50)，宽200，高100item2->setPos(0,0);     //图形项在场景中的坐标item2->setBrush(QBrush(Qt::blue));item2->setFlag(QGraphicsItem::ItemIsMovable);      //能移动item2->setFlag(QGraphicsItem::ItemIsSelectable);   //可选中item2->setFlag(QGraphicsItem::ItemIsFocusable);    //可以获得焦点//    item2->setFlags(QGraphicsItem::ItemIsMovable//                    | QGraphicsItem::ItemIsSelectable//                    | QGraphicsItem::ItemIsFocusable);scene->addItem(item2);//一个圆，中心位于scene的边缘QGraphicsEllipseItem   *item3=new QGraphicsEllipseItem(-50,-50,100,100); //矩形框内创建椭圆,绘图项的局部坐标，左上角(-100,-50)，宽200，高100item3->setPos(rect.right(),rect.bottom());        //图形项在场景中的坐标item3->setBrush(QBrush(Qt::red));item3->setFlag(QGraphicsItem::ItemIsMovable);      //能移动item3->setFlag(QGraphicsItem::ItemIsSelectable);   //可选中item3->setFlag(QGraphicsItem::ItemIsFocusable);    //可以获得焦点//    item3->setFlags(QGraphicsItem::ItemIsMovable//                    | QGraphicsItem::ItemIsSelectable//                    | QGraphicsItem::ItemIsFocusable);scene->addItem(item3);scene->clearSelection();
}

对于视图属性的设置：

• setCursor(Qt::CrossCursor)：将鼠标光标设置为十字形。

• setMouseTracking(true)：开启鼠标跟踪，在鼠标移动时就会产生 mouseMove 事件。默认是不开启鼠标跟踪的，那么只有在按下鼠标某个键时才会产生 mouseMove 事件。

• setDragMode(QGraphicsView::RubberBandDrag)：在场景的背景上点击并拖动鼠标时，显示一个矩形框。默认是不响应（QGraphicsView::NoDrag），其值还可以设置为 QGraphicsView:: ScrollHandDrag，拖动鼠标时鼠标光标变成手形，拖动鼠标就会使卷滚条移动。

关联信号与槽函数

连接的两个自定义槽函数用于与界面上的 TGraphicsView 组件的两个信号关联，在鼠标移动时显示视图中的坐标和场景中的坐标，在点击鼠标时显示图形项的局部坐标。

槽函数定义如下所示：


//鼠标移动，point是 GraphicsView的坐标,物理坐标
void MainWindow::do_mouseMovePoint(QPoint point)
{labViewCord->setText(QString::asprintf("View 坐标：%d,%d",point.x(),point.y()));QPointF pointScene=ui->view->mapToScene(point);     //转换到Scene坐标labSceneCord->setText(QString::asprintf("Scene 坐标：%.0f,%.0f", pointScene.x(),pointScene.y()));
}//鼠标单击
void MainWindow::do_mouseClicked(QPoint point)
{QPointF pointScene=ui->view->mapToScene(point);         //转换到Scene坐标QGraphicsItem  *item=NULL;item=scene->itemAt(pointScene,ui->view->transform());   //获取光标下的绘图项if (item != NULL)   //有绘图项{QPointF pointItem=item->mapFromScene(pointScene);   //转换为绘图项的局部坐标labItemCord->setText(QString::asprintf("Item 坐标：%.0f,%.0f", pointItem.x(),pointItem.y()));}
}

鼠标事件中，参数 point 是鼠标在视图中的坐标，使用 QGraphicsView 的 mapToScene()函数可以将此坐标变换为场景中的坐标。先用 QGraphicsView 的mapToScene()函数将此坐标变换为场景中的坐标 pointScene，然后用 QGraphicsScene 的 itemAt()函数获得光标处的图形项。如果鼠标光标处有图形项，就用图形项的 mapFromScene()函数将pointScene 变换为图形项的局部坐标 pointItem。

自定义TGraphicsView的UI提升

我们使用时需要的是TGraphicsView，但是QT可选组件中只有GraphicsView，因此需要将视图组件升级为 TGraphicsView 类。升级方法如下所示，之前在QT界面设计中添加的是QGraphicsView，右键该组件点击提升为----->TGraphicView即可。这是使用自定义界面组件的一种方法。

为了测试视图与场景的尺寸变化，主窗口还重定义了事件处理函数 resizeEvent()，以便在窗口大小变化时，显示视图区域和场景的大小信息。其代码如下：

//窗口变化大小时的事件
void MainWindow::resizeEvent(QResizeEvent *event)
{//    Q_UNUSED(event);//Graphics View坐标，左上角总是（0,0），宽度=，长度=QString str=QString::asprintf("Graphics View坐标，左上角总是（0,0），宽度=%d，高度=%d",ui->view->width(),ui->view->height());ui->labViewSize->setText(str);//    ui->labViewSize->setText(QString::asprintf("Graphics View坐标，左上角总是（0,0），宽度=%d，高度=%d",//                             ui->view->width(),ui->view->height()));QRectF  rectF=ui->view->sceneRect(); //场景的矩形区QString str2=QString::asprintf("QGraphicsView::sceneRect=(Left,Top,Width,Height)""=%.0f,%.0f,%.0f,%.0f", rectF.left(),rectF.top(),rectF.width(),rectF.height());ui->labSceneRect->setText(str2);//    ui->labSceneRect->setText(QString::asprintf("QGraphicsView::sceneRect=(Left,Top,Width,Height)=%.0f,%.0f,%.0f,%.0f",//                              rectF.left(),rectF.top(),rectF.width(),rectF.height()));event->accept();
}

通过测试，程序在窗口大小改变时，labViewSize 显示的视图宽度和高度是随窗口大小变化而变化的，而 labSceneRect 显示的场景的矩形区大小是固定的，总是(−200, −100, 400, 200)。

如下图，将程序窗口缩小，视图也会变小，显示的内容也会被隐藏一部分，但是场景是尺寸是不变的，所以视图是用来“看”的，而场景是用“存”的，视图中虽然有些组件看不见了，但是这些组件确确实实还在场景中，这也是为什么在视图和图形项中要套一层场景，这样更方便管理。