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

• 鼠标事件响应。

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

• 拖放操作。

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

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

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

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

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

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);      //为视图设置场景

//画一个矩形框，大小等于scene
QGraphicsRectItem   *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，高100
item2->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，高100
item3->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，拖动鼠标时鼠标光标变成手形，拖动鼠标就会使卷滚条移动。

//鼠标移动，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即可。这是使用自定义界面组件的一种方法。

//窗口变化大小时的事件
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)。

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