Qt_5图形视图框架
Qt5MVC模式（一）
Qt5MVC模式（⼀）Qt5MVC模式(⼀)：概述上By Xchen 20160627MVC设计模式起源于smalltalk的⼀种与⽤户界⾯设计相关的设计模式。
作⽤：有效的分离数据和⽤户界⾯。
组成：模型model（表⽰数据）、视图view（表⽰⽤户界⾯）、控制controller（定义⽤户在界⾯上的操作）。
interView框架Qt的MVC区别：将视图与控制结合在⼀起，同时添加了代理delegate能够⾃定义数据条⽬item的显⽰与编辑⽅式。
组成：模型model（表⽰数据）、视图view（表⽰⽤户界⾯）、代理delegate（⾃定义数据条⽬item的显⽰与编辑⽅式）。
模型与视图结构：模型与数据通信，并提供接⼝视图从模型中获取数据条⽬索引代理绘制数据条⽬通信⽅式：信号&槽⼯作过程：数据改变时，模型发出信号通知视图；⽤户对界⾯操作时，视图发出信号；代理发出信号告知模型和视图编辑器⽬前的状态；模型model（表⽰数据）抽象基类QAbstractItemModel列表的抽象基类QAbstractListModel、表格的抽象基类QAbstractTableModelQDirModel类是⽂件与⽬录的存储模型QStandardItemModel类QStringListModel类视图view（表⽰⽤户界⾯）抽象基类QAbstractItemViewQListView—QListWidget\QUndoViewQTableView—QTableWidgetQTreeView—QTreeWidgetQColumnViewQHeaderView实际上：QListWidget、QTableWidget、QTreeWidget已经包含数据，是模型与视图集成的类代理delegate（⾃定义数据条⽬item的显⽰与编辑⽅式）抽象基类QAbstractItemDelegateQItemDelegate/QStyleItemDelegate类QItemDelegate 由类QSqlRelationDelegate继承实例⼀：⽂件⽬录浏览器截图：创建过程：1. 声明⼀个QDirModel对象model；2. 分别声明三个视图对象QTreeView、QTableView、QListView；3. 设置视图对象的模型为setModel(model)；4. 设置视图的选择模式setSelectionMode(QAbstractItemView::MultiSelection)；5. 信号槽的连接6. 分隔窗体的设置头⽂件：#include <QApplication>#include <QAbstractItemModel>#include <QAbstractItemView>#include <QItemSelectionModel>#include <QDirModel>#include <QTreeView>#include <QListView>#include <QTableView>#include <QSplitter>QItemSelectionModel类：⽤来设置模型的选择模式的。
pythonGUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
pythonGUI库图形界⾯开发之PyQt5树形结构控件QTreeWidget详细使⽤⽅法与实例PyQt5树形结构控件QTreeWidget简介QTreeWidget 类根据预设的模型提供树形显⽰控件。
QTreeWidget 使⽤类似于 QListView 类的⽅式提供⼀种典型的基于 item 的树形交互⽅法类，该类基于QT的“模型/视图”结构，提供了默认的模型来⽀撑 item 的显⽰，这些 item 类为 QTreeWidgetItem 类。
如果不需要灵活的“模型/视图”框架，可以使⽤QTreeWidget 来创建有层级关系的树形结构。
当把标准 item 模型结合QTreeView 使⽤时，可以得到更灵活的使⽤⽅法，从⽽把“数据”和“显⽰”分离开。
QTreeWidget类中的常⽤⽅法⽅法描述setColumnWidth(int column,int width)将指定列的宽度设置为给定的值Column：指定的列width：指定的宽度insertTopLevelItems()在视图的顶层索引中引⼊项⽬的列表expandAll()展开所有节点的树形节点invisibleRootItem()返回树形控件中不可见的根选项（Root Item）selectionItems()返回所有选定的⾮隐藏项⽬的列表内QTreeWidgetItem类中常⽤的⽅法⽅法描述addChild()将⼦项追加到⼦列表中setText()设置显⽰的节点⽂本Text()返回显⽰的节点⽂本setCheckState(column.state)设置指定列的选中状态：Qt.Checked:节点选中Qt.Unchecked:节点没有选中setIcon(column,icon)在指定的列中显⽰图标QTreeWidget树形结构控件的实例树形结构是通过QTreeWidget和QTreeWidgetItem类实现的，其中QTreeWidgetItem类实现了节点的添加，其完整代码如下import sysfrom PyQt5.QtWidgets import *from PyQt5.QtGui import QIcon, QBrush, QColorfrom PyQt5.QtCore import Qtclass TreeWidgetDemo(QMainWindow):def __init__(self, parent=None):super(TreeWidgetDemo, self).__init__(parent)self.setWindowTitle('TreeWidget 例⼦')self.tree=QTreeWidget()#设置列数self.tree.setColumnCount(2)#设置树形控件头部的标题self.tree.setHeaderLabels(['Key','Value'])#设置根节点root=QTreeWidgetItem(self.tree)root.setText(0,'Root')root.setIcon(0,QIcon('./images/root.png'))# todo 优化2 设置根节点的背景颜⾊brush_red=QBrush(Qt.red)root.setBackground(0,brush_red)brush_blue=QBrush(Qt.blue)root.setBackground(1,brush_blue)#设置树形控件的列的宽度self.tree.setColumnWidth(0,150)#设置⼦节点1child1=QTreeWidgetItem()child1.setText(0,'child1')child1.setText(1,'ios')child1.setIcon(0,QIcon('./images/IOS.png'))#todo 优化1 设置节点的状态child1.setCheckState(0,Qt.Checked)root.addChild(child1)#设置⼦节点2child2=QTreeWidgetItem(root)child2.setText(0,'child2')child2.setText(1,'')child2.setIcon(0,QIcon('./images/android.png'))#设置⼦节点3child3=QTreeWidgetItem(child2)child3.setText(0,'child3')child3.setText(1,'android')child3.setIcon(0,QIcon('./images/music.png'))#加载根节点的所有属性与⼦控件self.tree.addTopLevelItem(root)#TODO 优化3 给节点添加响应事件self.tree.clicked.connect(self.onClicked)#节点全部展开self.tree.expandAll()self.setCentralWidget(self.tree)def onClicked(self,qmodeLindex):item=self.tree.currentItem()print('Key=%s,value=%s'%(item.text(0),item.text(1))) if __name__ == '__main__':app = QApplication(sys.argv)tree = TreeWidgetDemo()tree.show()sys.exit(app.exec_())初始运⾏图如下优化⼀：设置节点的状态这⾥添加了child1的选中状态child1.setCheckState(0,Qt.Checked)优化⼆：设置节点的背景颜⾊这⾥设置了根节点的背景颜⾊brush_red=QBrush(Qt.red)root.setBackground(0,brush_red)brush_blue=QBrush(Qt.blue)root.setBackground(1,brush_blue)优化三：给节点添加响应事件点击，会在控制台输出当前地key值与value值self.tree.clicked.connect(self.onClicked)def onClicked(self,qmodeLindex):item=self.tree.currentItem()print('Key=%s,value=%s'%(item.text(0),item.text(1)))系统定制模式实例在上⾯的例⼦中，QTreeWidgetItem类的节点是⼀个个添加上去的，这样有时很不⽅便，特别是窗⼝产⽣⽐较复杂的树形结构时，⼀般都是通过QTreeView类来实现的，⽽不是QTreeWidget类，QTreeView和QTreeWidget类最⼤的区别就是，QTreeView类可以使⽤操作系统提供的定制模式，⽐如⽂件系统盘的树列表import sysfrom PyQt5.QtWidgets import *from PyQt5.QtGui import *if __name__ == '__main__':app=QApplication(sys.argv)#window系统提供的模式model=QDirModel()#创建⼀个QTreeView的控件tree=QTreeView()#为控件添加模式tree.setModel(model)tree.setWindowTitle('QTreeView例⼦')tree.resize(640,480)tree.show()sys.exit(app.exec_())本⽂主要讲解了PyQt5树形结构控件QTreeWidget详细使⽤⽅法与实例，更多关于PyQt5控件使⽤知识请查看下⾯的相关链接。
Qt图形视图、动画、状态机框架
Graphics View的坐标系统
3．图形项坐标
QGraphicsItem类的坐标系，若在调用QGraphicsItem类的paint()函数重绘图元 时，则以此坐标系为基准。它的坐标都以点(0,0)为中心点，这也是所有变换的中 心点。 图形项位置指的是图形项的中心点在它父亲的坐标系中的坐标。如无父亲图 形项，则选场景坐标系。以这种思想来看，场景指的就是那些祖先最少的图形项 的“父亲”。最上级的图形项位置就是在场景中的位置。 子图形项会随着父图形项的变换而变换。（一起缩放，一起旋转等）。
e
Graphics View的坐标系统
2．视图坐标
QGraphicsView类继承自QWidget类，因此它与其他的QWidget类一样，以窗口 的左上角作为自己坐标系的原点，如图所示。 视图坐标是widget的坐标，视图坐标中每个单位对应一个像素。这种坐标的 特殊之处在于它是相对于widget或是视口的，不会被所观察的场景所影响。 QGraphicsView的视口的左上角总是（0，0），右下角总是(视口宽，视口高）。 所有的鼠标事件与拖拽事件，最初以视图坐标表示，需要把这些坐标映射到场景 坐标以便与图形项交互。
Graphics View的坐标系统
1．场景坐标
QGraphicsScene类的坐标系以中心为原点（0,0），如图所示。 场景坐标系统描述了每个最顶级图形项的位置，也是从视图向场景投递场景 事件的基础。场景中的每个图形项有场景位置与包围矩形 （QGraphicsItem ::scenePos(), QGraphicsItem::sceneBoundingRect()), 另外，它有 自己本地图形项位置与包围矩形。场景位置描述了图形项在场景坐标下的位置， 它的场景包围矩形则用于QGraphicsScene决定场景中哪块区域发生了变化。场景 中的变化通过QGraphicsScene::changed ()信号来通知，它的参数是场景矩形列表。
QT图形视图框架
QT图形视图框架使⽤QPushButton、QLabel、QCheckBox等构成GUI的控件或⾃定义图形时，开发应⽤程序会变得很简单。
但是如果想在GUI中使⽤数⼗个或者数百个图形对象,向⽤户完美展⽰控制场景，则会受到很多的限制。
图形视图框架⽤来管理2D图形项，⽀持绘制、缩放、事件响应等等。
1、快速提供并管理⼤量对象2、将事件传递到每⼀个对象3、管理焦点处理或对象选择等状态图形视图框架是按照MVC设计模式绘图， MVC设计模式包括三个元素：数据的模型(Model)，⽤户界⾯的视图(View) ，⽤户再界⾯上的操作控制Controller。
QGraphicsViewQGraphicsView 是为了在场景上显⽰图元⽽提供的类。
QGraphicsView包括可视控件区域和⽤于显⽰⼤场景滚动区域,可以接受⽤户输⼊事件。
QGraphicsView间接继承⾄QWidget。
QGraphicsSceneQGraphicsScene类可以保存图元，也可以处理⽤户输⼊事件。
是图形对象QGraphicsItem的容器，为管理⼤量的items提供⼀个快速的接⼝。
QGraphicsScene只继承⾃QObject，所以本⾝是不可见的，必须通过与之相连的视图类QGraphicsView来显⽰.QGraphicsItemQGraphicsItem是为了在图形视图上实现图形对象⽽提供的类。
⽀持⿏标、键盘、焦点事件，⽀持拖放，在它的基础上可以继承出各种图元类。
⽀持碰撞检测collision detection.1 QGraphicsScene的常⽤函数常⽤添加图元函数QGraphicsScene::setBackgroundBrush //填充背景⾊QGraphicsScene::setForegroundBrush //填充前景⾊QGraphicsScene::addSimpleText //添加简单⽂本QGraphicsScene::addLine //添加直线QGraphicsScene::addRect //添加矩形QGraphicsScene::addEllipse //添加椭圆QGraphicsScene::addWidget //添加窗⼝QGraphicsScene::addPixmap //添加图⽚例如:#include <QApplication>#include <QGraphicsView>#include <QGraphicsRectItem>#include <QLabel>int main(int argc, char** argv){QApplication app(argc, argv);QGraphicsView view;QGraphicsScene scene;view.setScene(&scene);view.show();view.resize(400, 400);/*设置场景的背景⾊前景⾊*/scene.setBackgroundBrush(QBrush(Qt::red));scene.setForegroundBrush(QBrush(QColor(0, 255, 0, 50)));/*添加线*/scene.addLine(0, 0, 100, 100, QPen(Qt::black));/*添加矩形*/scene.addRect(0, 100, 100, 100, QPen(Qt::yellow), QBrush(Qt::blue));/*添加椭圆*/scene.addEllipse(100, 0, 100, 100, QPen(Qt::red), QBrush(Qt::green));/*添加简单⽂本,并且设置⽂本字体,并且描边*/scene.addSimpleText("hello", QFont("system", 40))->setPen(QPen(QBrush(Qt::yellow), 3));/*添加图⽚,并且移动位置*/scene.addPixmap(QPixmap("E:\\qt_workspace\\pic\\wallet.png"))->setPos(200, 200);/*添加⼀个窗⼝*/QLabel label("widget");scene.addWidget(&label);return app.exec();}操作图元函数QGraphicsScene::itemAt //查找场景某个中最表层的itemQGraphicsScene::setSelectionArea //设置选定区域QGraphicsScene::setSceneRect //设置场景的区域⼤⼩QGraphicsScene::itemsBoundingRect //根据所有的item计算区域⼤⼩QGraphicsScene:: selectedItems //获取被选中的item,item必须为可选QGraphicsItem::ItemIsSelectable 2 QGraphicsItem的常⽤函数QGraphicsItem::rect //不带边框的图形区域QGraphicsItem::boundingRect //带边框的图形区域QGraphicsItem::collidesWithItem //碰撞检测QGraphicsItem::setScale //缩放QGraphicsItem::setRotation //旋转QGraphicsItem::setZValue //设置z坐标,图元的叠加先后顺序可以⽤它来设置QGraphicsItem::setPos //设置位置坐标设置item的属性void QGraphicsItem::setFlags(GraphicsItemFlags flags);/**参数GraphicsItemFlags flags 为枚举类型，可以以下值* QGraphicsItem::ItemIsMovable 是否可以移动* QGraphicsItem::ItemIsSelectable 是否可以被选中* QGraphicsItem::ItemIsFocusable 是否可以设置为焦点item*/3 图形视图的坐标系3.1 QGraphscItem图元坐标系图元对象都有⾃⾝的坐标系，坐标系以(0,0)为坐标原点，⾃左向右递增是x轴，⾃上⽽下递增是y轴，⽽且所有图元对象的移动转换作⽤点都是(0, 0)，坐标值可以是浮点型数值。
第8章 图形视图(GraphicsView)框架
1．场景坐标 场景坐标是所有图元的基础坐标系统。场景坐标系统描述了顶层的图元， 每个图元都有场景坐标和相应的包容框。场景坐标的原点在场景中心，坐标原 点是X轴正方向向右，Y轴正方向向下。 QGraphicsScene类的坐标系是以中心为原点（0,0），如图8.2所示。
2．视图坐标 视图坐标是窗口部件的坐标。视图坐标的单位是像素。QGraphicsView视口 的左上角是（0,0），X轴正方向向右，Y轴正方向向下。所有的鼠标事件最开始 都是使用视图坐标。 QGraphicsView类继承自QWidget类，因此它和其他的QWidget类一样以窗口 的左上角作为自己坐标系的原点，如图8.3所示。
3．图元坐标 图元使用自己的本地坐标，这个坐标系统通常以图元中心为原点，这也是所 有变换的原点。图元坐标方向是X轴正方向向右，Y轴正方向向下。创建图元后， 只需要注意图元坐标就可以了，QGraphicsScene和QGraphicsView会完成所有的变 换。 QGraphicsItem类的坐标系，在调用QGraphicsItem类的paint()函数重画图元时 则以此坐标系为基准，如图8.4所示。
Graphics View框架结构主要包含了场景类（QGraphicsScene）、视图类 （QGraphicsView）和图元类（QGraphicsItem）。场景类提供了一个用于管理位 于其中的众多图元容器，视图类用于显示场景中的图元，一个场景可以通过多 个视图表现，一个场景包括多个几何图形。它们三者之间的关系可用图8.1表示。
场景类：QGraphicsScene类 它是一个用于放置图元的容器，本身是不可见的，必须通过与之相连的视图 类来显示及与外界进行互操作。通过QGraphicsScene::addItem()可以加入一个图 元到场景中。图元可以通过多个函数进行检索。QGraphicsScene::items()和一些重 载函数可以返回和点、矩形、多边形或向量路径相交的所有图元。 QGraphicsScene::itemAt()返回指定点的最顶层图元。 视图类：QGraphicsView类 它提供一个可视的窗口，用于显示场景中的图元。在同一个场景中可以有多 个视口，也可以为相同的数据集提供几种不同的视口。 QGraphicsView是可滚动的窗口部件，可以提供滚动条来浏览大的场景。如 果需要使用OpenGL，可以使用QGraphicsView::setViewport()将视口设置为 QGLWidget。
QTQGraphicsProxyWidget对象可选择或移动的一些tricks
QTQGraphicsProxyWidget 对象可选择或移动的⼀些tricks 我在QT 图形视图框架中使⽤QGraphicsProxyWidget 嵌⼊widget ，但是⽆法使其和其它的QGraphicsItem ⼀样可以选择或移动，使⽤如下语句⽆效：C++ Code123456789101112 // Create new QGraphicsScene and assign to graphicsViewscene = new QGraphicsScene(this );ui->graphicsView->setScene(scene);// Create widget and add to sceneMyWidget *widget = new MyWidget;QGraphicsProxyWidget *proxy = scene->addWidget(widget);// Make selectableproxy->setFlag(QGraphicsItem::ItemIsSelectable, true );// Make movableproxy->setFlag(QGraphicsItem::ItemIsMovable, true );于是，我尝试继承QGraphicsProxyWidget 获得⾃⼰的ProxyWidget ，并通过重写⿏标事件响应函数来实现，在具体的实现中我尝试过调⽤QGraphicsProxyWidget 的⿏标事件函数，也尝试过调⽤，但是仅仅能捕获⿏标按下事件（mousePressEvent ）,其它诸如移动和释放均⽆法响应。
紧接着，我去Stack Overflow 上查找解决⽅案，倒是有⼀些⽅案，纯属tricks 性的现在总结如下：实例1：给代理widget 设置⼀个⽐其⼤⼀点的⽗类QGraphicsWidget 充当拖拽处理效果C++ Code1234567891011121314151617181920212223int main(int argc, char *argv[]){QApplication a(argc, argv);QGraphicsScene scene;QGraphicsView view(&scene);QGraphicsProxyWidget *proxy = scene.addWidget(new QPushButton("MOVE IT"));// make parent widget larger that buttonQGraphicsWidget* parentWidget = new QGraphicsWidget();parentWidget->setMinimumSize(QSizeF(proxy->widget()->width(), proxy->widget()->height()));parentWidget->setFlags(QGraphicsItem::ItemIsMovable); //默认灰⾊，不设置则为背景⾊//parentWidget->setAutoFillBackground(true);scene.addItem(parentWidget);// put your wrapped button onto the parent graphics widgetproxy->setParentItem(parentWidget);view.setFixedSize(QSize(600, 400));view.show();return a.exec();}实例2：给代理widget 设置⼀个⽐其⼤⼀点的QGraphicsRectItem 充当窗⼝标题栏样式的拖拽处理效果C++ Code12345678910111213141516171819202122 int main(int argc, char *argv[]){QApplication a(argc, argv);QGraphicsScene scene;QGraphicsView view(&scene);auto *item = new QGraphicsRectItem(0, 0, 75, 40);auto *proxy = new QGraphicsProxyWidget(item);auto *btn = new QPushButton(QObject::tr("Click me"));btn->setGeometry(0, 0, 77, 26); item->setFlag(QGraphicsItem::ItemIsMovable);item->setBrush(Qt::darkYellow);proxy->setWidget(btn);proxy->setPos(0, 15);scene.addItem(item);view.setFixedSize(QSize(600, 400));view.show();return a.exec();}实例3：给代理widget 设置⼀个⽐其⼤⼀点的QGraphicsRectItem 充当边缘的拖拽处理效果 C++ Code12345int main(int argc, char *argv[]){ QApplication a(argc, argv); QGraphicsScene scene;6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 QGraphicsView view(&scene);auto *dial= new QDial(); // The widgetauto *handle = new QGraphicsRectItem(QRect(0, 0, 120, 120)); // Created to move and select on scene auto *proxy2 = new QGraphicsProxyWidget(handle); // Adding the widget through the proxydial->setGeometry(0, 0, 100, 100);dial->move(10, 10);proxy2->setWidget(dial);handle->setPen(QPen(Qt::transparent));handle->setBrush(Qt::gray);//handle->setFlags(QGraphicsItem::ItemIsMovable | QGraphicsItem::ItemIsSelectable);scene.addItem(handle); // adding to sceneview.setFixedSize(QSize(600, 400));view.show();return a.exec();}勉勉强强可以实现拖拽的效果吧！更直接的效果请期待后续博⽂深⼊研究！。
基于Qt的飞行器通用上位机软件设计
基于Qt的飞行器通用上位机软件设计作者：吕伟龙向豪杨雨昕来源：《电子技术与软件工程》2017年第07期摘要针对飞行器上位机控制器的应用需求，设计了一个适用于桌面、移动端、嵌入式平台等的跨平台飞行器上位机软件。
本系统基于Qt5.5框架，运用C++语言编写出主程序，在Qt 框架中调用百度地图，实现飞行器的路径规划与显示；采用JSON格式自定义的通信协议，实现上、下位机的数据交换和上位机的命令发布。
另外，本文还详细讨论了通信时的界面控制逻辑与飞行器安全飞行的控制方案。
【关键词】多旋翼飞行器上位机图形视图框架数据传输协议Qt是一个由Trolltech公司开发的，为桌面，移动端，嵌入式设计的跨平台的应用程序框架，支持包括Linux，OS X，Windows，VxWorks，QNX，Android，iOS，BlackBerry，Sailfish OS等平台。
Qt本身不是一种编程语言，它是一个用C++写的框架。
预处理器（MOC 元对象编译器）被用于利用某些特征（例如信号和槽）来拓展C++语言。
在编译步骤中，MOC解析用Qt扩展的C++源文件并从中生成符合标准的C++的源文件。
因此框架本身和应用程序/库使用它可以通过任何符合标准的C++编译器例如Clang，GCC，ICC，MinGW和MSVC。
多旋翼飞行器由于其能够垂直起降，并且具有机动灵活的特点，不仅广泛应用于军事、农业、商业等领域，而且近些年逐渐进入大众的视野里，成为普通百姓也能购买、操作的机械“玩具”。
但由于多旋翼飞行器的旋翼转速极快，如果误操作或者飞行器失控很容易发生危险；市面上也很少有能够支持多品牌、多种多旋翼飞行器的上位机程序。
为了解决这些问题，本文基于Qt平台设计了一种控制简单、操作安全、用户体验较好的通用飞行器上位机系统。
1 通信原理介绍1.1 数据传输系统本文采用的是一个主从式的数据传输系统。
主设备（上位机）先对数据进行处理，然后再向从设备（下位机）发送所要执行的命令；从设备接收到数据后分析是哪种命令，接着发送已接收到的信号和相关的信息给主设备；主设备接收到从设备已接收的信号后，开始重复第一步，依次循环。
QT图形视图框架(The Graphics View Framework)
管理 widgets 在图形视图中的布局 在 QGraphicsScene 中所有图形对象的基 类 为 QGraphicsItem 提供简单的 动画支持 将多个图形对象组合成一个对象 图形视图中所有布局类的基类 允许布局类管理的自定义对象 直线对象，可以直接添加到 QGraphicsScene 管理 widgets 在图形视图中的的水平或者 垂直方向上的布局 所有需要处理信号 /槽 /属性的图形对象。 路径对象，可以直接添加到 QGraphicsScene 位图对象，可以直接添加到 QGraphicsScene 多边形对象，可以直接添加到 QGraphicsScene widget 代理，用于将一个 QWidget 对象嵌 入 一个 QGraphicsScene 中 矩形对象，可以直接添加到 QGraphicsScene 管理大量二维图形对象的管理器
• • • • •
鼠标按下、移动、释放和双击事件，同时还支持鼠标悬浮事件、滚轮事件和上下文菜单事件。 键盘输入焦点和键盘事件。 拖放。 组合：通过父对象 -子对象进行组合，或者通过 QGraphicsItemGroup 组合。 碰撞检测。
与 QGraphicsView 类似，处于局部坐标系下的图形对象，也提供了图形对象和场景之间的映射函数。 和 QGraphicsView 一样，图形对象同时还可以通过矩阵来变换其自身的坐标系统，这一点对于单个 图形对象的旋转和缩放非常有用。 图形视图架构 个图形对象可以包含其他对象（子对象）。父对象的变换矩阵同样也会应用到子对象上。但是，不管一 个对象累积了多少变换， QGraphicsItem::collidesWith()仍然会在局部坐标系下进行计算。
图形视图框架
The Graphics View Framework
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
7.1.1 Graphics View的特点
Graphics View框架结构的主要特点如下。 （1）Graphics View框架结构中，系统可以利用Qt绘图系统的反锯齿、 OpenGL工具来改善绘图性能。 （2）Graphics View支持事件传播体系结构，可以使图元在场景（scene）中的 交互能力提高1倍，图元能够处理键盘事件和鼠标事件。其中，鼠标事件包括鼠标按 下、移动、释放和双击，还可以跟踪鼠标的移动。 （3）在Graphics View框架中，通过二元空间划分树（Binary Space Partitioning，BSP）提供快速的图元查找，这样就能够实时地显示包含上百万个图 元的大场景。
3．图元类：QGraphicsItem类 它是场景中各个图元的基类，在它的基础上可以继承出各种图元类，Qt已经预 置的包括直线（QGraphicsLineItem）、椭圆（QGraphicsEllipseItem）、文本图元 （QGraphicsTextItem）、矩形（QGraphicsRectItem）等。 QGraphicsItem主要有以下功能。 处理鼠标按下、移动、释放、双击、悬停、滚轮和右键菜单事件。 处理键盘输入事件。 处理拖曳事件。 分组。 碰撞检测。
2．视图类：QGraphicsView类 QGraphicsView是可滚动的窗口部件，可以提供滚动条来浏览大的场景。如 果需要使用OpenGL，则可以使用QGraphicsView::setViewport()将视图设置为 QGLWidget。 视图接收键盘和鼠标的输入事件，并将它们翻译为场景事件（将坐标转换为 场景的坐标）。使用变换矩阵函数QGraphicsView::matrix()可以变换场景的坐标， 实现场景缩放和旋转。QGraphicsView提供QGraphicsView::mapToScene()和 QGraphicsView:: mapFromScene()用于与场景的坐标进行转换。
3．图元坐标 图元使用自己的本地坐标，这个坐标系统通常以图元中心为原点，这也是所有 变换的原点。图元坐标方向是x轴正方向向右，y轴正方向向下。创建图元后，只需 注意图元坐标就可以了，QGraphicsScene和QGraphicsView会完成所有的变换。 QGraphicsItem类的坐标系，若在调用QGraphicsItem类的paint()函数重绘图元 时，则以此坐标系为基准，如图7.4所示。
Graphics View框架提供了多种坐标变换函数，见表7.1。
Hale Waihona Puke 映射函数 QGraphicsView::mapToScene() QGraphicsView::mapFromScene() QGraphicsItem:: mapFromScene() QGraphicsItem:: mapToScene() QGraphicsItem:: mapToParent() QGraphicsItem:: mapFromParent() QGraphicsItem:: mapToItem() QGraphicsItem:: mapFromItem()
视图到场景 场景到视图 场景到图元 图元到场景 子图元到父图元 父图元到子图元 本图元到其他图元 其他图元到本图元
转换类型
7.2.1 飞舞的蝴蝶
【例】（难度中等）（CH701）设计界面，一个蝴蝶在屏幕上不停地上下飞舞。 操作步骤如下。 （1）新建Qt Widgets Application（详见1.3.1节），项目名为“Butterfly”， 基类选择“QMainWindow”，类名命名默认为“MainWindow”，取消“创建界面” 复选框的选中状态。单击“下一步”按钮，最后单击“完成”按钮，完成该项目工 程的建立。 （2）在“Butterfly”项目名上单击鼠标右键，在弹出的快捷菜单中选择“添加 新文件...”菜单项，在弹出的对话框中选择“C++ Class”选项。单击“Choose...” 按钮，弹出对话框，在“Base class”后面的下拉列表框中选择基类名 “QObject”，在“Class name”后面的文本框中输入类的名称“Butterfly”。 （3）单击“下一步”按钮，单击“完成”按钮，添加文件“butterfly.h”和 “butterfly. cpp”。
它们三者之间的关系如图7.1所示。
1．场景类：QGraphicsScene类 场景类主要完成的工作包括提供对它包含的图元的操作接口和传递事件、管 理各个图元的状态（如选择和焦点处理）、提供无变换的绘制功能（如打印）等。 事件传播体系结构将场景事件发送给图元，同时也管理图元之间的事件传播。 如果场景接收到了在某一点的鼠标单击事件，场景会将事件传给这一点的图元。 管理各个图元的状态（如选择和焦点处理）。可以通过QGraphicsScene:: setSelectionArea()函数选择图元，选择区域可以是任意的形状，使用 QPainterPath表示。若要得到当前选择的图元列表，则可以使用函数 QGraphicsScene:: selectedItems()。可以通过QGraphicsScene:: setFocusItem() 函数或QGraphicsScene:: setFocus()函数来设置图元的焦点，获得当前具有焦点 的图元使用函数QGraphicsScene::focusItem()。
1．场景坐标 场景坐标是所有图元的基础坐标系统。场景坐标系统描述了顶层的图元，每个 图元都有场景坐标和相应的包容框。场景坐标的原点在场景中心，坐标原点是x轴 正方向向右，y轴正方向向下。 QGraphicsScene类的坐标系以中心为原点（0,0），如图7.2所示。
2．视图坐标 视图坐标是窗口部件的坐标。视图坐标的单位是像素。QGraphicsView视图的 左上角是（0,0），x轴正方向向右，y轴正方向向下。所有的鼠标事件最开始都是 使用视图坐标。 QGraphicsView类继承自QWidget类，因此它与其他的QWidget类一样，以窗 口的左上角作为自己坐标系的原点，如图7.3所示。