《Qt_5图形视图框架》由会员分享，可在线阅读，更多相关《Qt_5图形视图框架（54页珍藏版）》请在金锄头文库上搜索。
1、第7章 Qt 5图形视图框架,7.1 图形视图体系结构,7.2 【实例】：图形视图,7.1 图形视图体系结构,7.1.1 Graphics View的特点 Graphics View框架结构的主要特点如下。 （1）Graphics View框架结构中，系统可以利用Qt绘图系统的反锯齿、OpenGL工具来改善绘图性能。 （2）Graphics View支持事件传播体系结构，可以使图元在场景（scene）中的交互能力提高1倍，图元能够处理键盘事件和鼠标事件。其中，鼠标事件包括鼠标按下、移动、释放和双击，还可以跟踪鼠标的移动。 （3）在Graphics View框架中，通过二元空间划分树（Binar
2、y Space Partitioning，BSP）提供快速的图元查找，这样就能够实时地显示包含上百万个图元的大场景。,7.1.2 Graphics View的三元素,它们三者之间的关系如图7.1所示。,7.1.2 Graphics View的三元素,1场景类：QGraphicsScene类 场景类主要完成的工作包括提供对它包含的图元的操作接口和传递事件、管理各个图元的状态（如选择和焦点处理）、提供无变换的绘制功能（如打印）等。 事件传播体系结构将场景事件发送给图元，同时也管理图元之间的事件传播。如果场景接收到了在某一点的鼠标单击事件，场景会将事件传给这一点的图元。 管理各个图元的状态（如选择和
3、焦点处理）。可以通过QGraphicsScene: setSelectionArea()函数选择图元，选择区域可以是任意的形状，使用QPainterPath表示。若要得到当前选择的图元列表，则可以使用函数QGraphicsScene: selectedItems()。可以通过QGraphicsScene: setFocusItem()函数或QGraphicsScene: setFocus()函数来设置图元的焦点，获得当前具有焦点的图元使用函数QGraphicsScene:focusItem()。,7.1.2 Graphics View的三元素,2视图类：QGraphicsView类 QGrap
4、hicsView是可滚动的窗口部件，可以提供滚动条来浏览大的场景。如果需要使用OpenGL，则可以使用QGraphicsView:setViewport()将视图设置为QGLWidget。 视图接收键盘和鼠标的输入事件，并将它们翻译为场景事件（将坐标转换为场景的坐标）。使用变换矩阵函数QGraphicsView:matrix()可以变换场景的坐标，实现场景缩放和旋转。QGraphicsView提供QGraphicsView:mapToScene()和QGraphicsView: mapFromScene()用于与场景的坐标进行转换。,7.1.2 Graphics View的三元素,3图元类：Q
5、GraphicsItem类 它是场景中各个图元的基类，在它的基础上可以继承出各种图元类，Qt已经预置的包括直线（QGraphicsLineItem）、椭圆（QGraphicsEllipseItem）、文本图元（QGraphicsTextItem）、矩形（QGraphicsRectItem）等。 QGraphicsItem主要有以下功能。 处理鼠标按下、移动、释放、双击、悬停、滚轮和右键菜单事件。 处理键盘输入事件。 处理拖曳事件。 分组。 碰撞检测。,7.1.3 GraphicsView的坐标系统,1场景坐标 场景坐标是所有图元的基础坐标系统。场景坐标系统描述了顶层的图元，每个图元都有场景坐标
6、和相应的包容框。场景坐标的原点在场景中心，坐标原点是x轴正方向向右，y轴正方向向下。 QGraphicsScene类的坐标系以中心为原点（0,0），如图7.2所示。,7.1.3 GraphicsView的坐标系统,2视图坐标 视图坐标是窗口部件的坐标。视图坐标的单位是像素。QGraphicsView视图的左上角是（0,0），x轴正方向向右，y轴正方向向下。所有的鼠标事件最开始都是使用视图坐标。 QGraphicsView类继承自QWidget类，因此它与其他的QWidget类一样，以窗口的左上角作为自己坐标系的原点，如图7.3所示。,7.1.3 GraphicsView的坐标系统,3图元坐标
7、图元使用自己的本地坐标，这个坐标系统通常以图元中心为原点，这也是所有变换的原点。图元坐标方向是x轴正方向向右，y轴正方向向下。创建图元后，只需注意图元坐标就可以了，QGraphicsScene和QGraphicsView会完成所有的变换。 QGraphicsItem类的坐标系，若在调用QGraphicsItem类的paint()函数重绘图元时，则以此坐标系为基准，如图7.4所示。,7.1.3 GraphicsView的坐标系统,Graphics View框架提供了多种坐标变换函数，见表7.1。,7.2 【实例】：图形视图,7.2.1 飞舞的蝴蝶 【例】（难度中等）（CH701）设计界面，一个蝴
8、蝶在屏幕上不停地上下飞舞。 操作步骤如下。 （1）新建Qt Widgets Application（详见1.3.1节），项目名为“Butterfly”，基类选择“QMainWindow”，类名命名默认为“MainWindow”，取消“创建界面”复选框的选中状态。单击“下一步”按钮，最后单击“完成”按钮，完成该项目工程的建立。 （2）在“Butterfly”项目名上单击鼠标右键，在弹出的快捷菜单中选择“添加新文件.”菜单项，在弹出的对话框中选择“C+ Class”选项。单击“Choose.”按钮，弹出对话框，在“Base class”后面的下拉列表框中选择基类名“QObject”，在“Class
9、 name”后面的文本框中输入类的名称“Butterfly”。 （3）单击“下一步”按钮，单击“完成”按钮，添加文件“butterfly.h”和“butterfly. cpp”。,7.2.1 飞舞的蝴蝶,（4）Butterfly类继承自QObject类、QGraphicsItem类，在头文件“butterfly.h”中完成的代码具体内容。 （5）在源文件“butterfly. cpp”中完成的代码具体内容如下： #include butterfly.h #include const static double PI=3.1416; Butterfly:Butterfly(QObject *pa
10、rent) : QObject(parent) up = true;/给标志蝴蝶翅膀位置的变量赋初值 pix_up.load(up.png);/调用QPixmap的load()函数加载所用到的图片 pix_down.load(down.png); startTimer(100);/启动定时器，并设置时间间隔为100毫秒 ,7.2.1 飞舞的蝴蝶,boundingRect()函数为图元限定区域范围。此范围是以图元自身的坐标系为基础设定的。具体实现代码内容如下： QRectF Butterfly:boundingRect() const qreal adjust =2; return QRectF
11、(-pix_up.width()/2-adjust,-pix_up.height()/2-adjust, pix_up.width()+adjust*2,pix_up.height()+adjust*2); ,7.2.1 飞舞的蝴蝶,在重画函数paint()中，首先判断当前已显示的图片是pix_up还是pix_down。实现蝴蝶翅膀上下飞舞效果时，若当前显示的是pix_up图片，则重绘pix_down图片，反之亦然。具体实现代码内容如下： void Butterfly:paint(QPainter *painter, const QStyleOptionGraphicsItem *option
12、, QWidget *widget) if(up) painter-drawPixmap(boundingRect().topLeft(),pix_up); up=!up; else painter-drawPixmap(boundingRect().topLeft(),pix_down); up=!up; ,7.2.1 飞舞的蝴蝶,定时器的timerEvent()函数实现蝴蝶的飞舞，具体实现代码内容如下： void Butterfly:timerEvent(QTimerEvent *) /边界控制 qreal edgex=scene()-sceneRect().right()+boundin
13、gRect().width()/2; /限定蝴蝶飞舞的右边界 qreal edgetop=scene()-sceneRect().top()+boundingRect(). height()/2;/限定蝴蝶飞舞的上边界 qreal edgebottom=scene()-sceneRect().bottom()+boundingRect(). height()/2;/限定蝴蝶飞舞的下边界 if(pos().x()=edgex)/若超过了右边界，则水平移回左边界处 setPos(scene()-sceneRect().left(),pos().y(); if(pos().y()sceneRect(
14、).bottom(); if(pos().y()=edgebottom)/若超过了下边界，则垂直移回上边界处 setPos(pos().x(),scene()-sceneRect().top(); angle+=(qrand()%10)/20.0; qreal dx=fabs(sin(angle*PI)*10.0); qreal dy=(qrand()%20)-10.0; setPos(mapToParent(dx,dy);/(a) ,7.2.1 飞舞的蝴蝶,（6）完成了蝴蝶图元的实现后，在源文件“main.cpp”中将它加载到场景中，并关联一个视图，具体实现代码内容如下： #include
15、#include butterfly.h #include int main(int argc,char* argv) QApplication a(argc,argv); QGraphicsScene *scene = new QGraphicsScene; scene-setSceneRect(QRectF(-200,-200,400,400); Butterfly *butterfly = new Butterfly; butterfly-setPos(-100,0); scene-addItem(butterfly); QGraphicsView *view = new QGraphi
16、csView; view-setScene(scene); view-resize(400,400); view-show(); return a.exec(); ,7.2.1 飞舞的蝴蝶,（7）运行程序，将程序中用到的图片保存到该工程的D:QtCH7CH701build-Butterfly-Desktop_Qt_5_8_0_MinGW_32bit-Debug文件夹中，运行结果如图7.5所示。,7.2.2 地图浏览器,【例】（难度中等）（CH702）设计一个地图浏览器，包括地图的浏览、放大、缩小，以及显示各点的坐标等，如图7.6所示。,7.2.2 地图浏览器,操作步骤如下。 （1）新建Qt Widgets Application （详见1.3.1节），项目名称为“MapWidget”，基类选择“QMainWindow”，类名命名默认为“MainWindow”，取消“创建界面”复选框的选中状态。单击“下一步”按钮，
