第7章Qt5图形视图框架PPT课件.ppt
《第7章Qt5图形视图框架PPT课件.ppt》由会员分享,可在线阅读,更多相关《第7章Qt5图形视图框架PPT课件.ppt(58页珍藏版)》请在三一办公上搜索。
1、第7章 Qt 5图形视图框架,图形视图体系结构,【实例】:图形视图,7.1 图形视图体系结构,7.1.1 Graphics View的特点Graphics View框架结构的主要特点如下。(1)Graphics View框架结构中,系统可以利用Qt绘图系统的反锯齿、OpenGL工具来改善绘图性能。(2)Graphics View支持事件传播体系结构,可以使图元在场景(scene)中的交互能力提高1倍,图元能够处理键盘事件和鼠标事件。其中,鼠标事件包括鼠标按下、移动、释放和双击,还可以跟踪鼠标的移动。(3)在Graphics View框架中,通过二元空间划分树(Binary Space Part
2、itioning,BSP)提供快速的图元查找,这样就能够实时地显示包含上百万个图元的大场景。,7.1.2 Graphics View的三元素,它们三者之间的关系如图7.1所示。,7.1.2 Graphics View的三元素,1场景类:QGraphicsScene类场景类主要完成的工作包括提供对它包含的图元的操作接口和传递事件、管理各个图元的状态(如选择和焦点处理)、提供无变换的绘制功能(如打印)等。事件传播体系结构将场景事件发送给图元,同时也管理图元之间的事件传播。如果场景接收到了在某一点的鼠标单击事件,场景会将事件传给在这一点的图元。管理各个图元的状态(如选择和焦点处理)。可以通过QGra
3、phicsScene: setSelectionArea()函数选择图元,选择区域可以是任意的形状,使用QPainterPath表示。若要得到当前选择的图元列表,则可以使用函数QGraphicsScene: selectedItems()。可以通过QGraphicsScene: setFocusItem()函数或QGraphicsScene: setFocus()函数来设置图元的焦点,获得当前具有焦点的图元使用函数QGraphicsScene:focusItem()。,7.1.2 Graphics View的三元素,2视图类:QGraphicsView类它提供一个可视的窗口,用于显示场景中的图
4、元。在同一个场景中可以有多个视图,也可以为相同的数据集提供几种不同的视图。QGraphicsView是可滚动的窗口部件,可以提供滚动条来浏览大的场景。如果需要使用OpenGL,则可以使用QGraphicsView:setViewport()将视图设置为QGLWidget。视图接收键盘和鼠标的输入事件,并将它们翻译为场景事件(将坐标转换为场景的坐标)。使用变换矩阵函数QGraphicsView:matrix()可以变换场景的坐标,实现场景缩放和旋转。QGraphicsView提供QGraphicsView:mapToScene()和QGraphicsView: mapFromScene()用于与
5、场景的坐标进行转换。,7.1.2 Graphics View的三元素,3图元类:QGraphicsItem类QGraphicsItem主要有以下几点功能。 处理鼠标按下、移动、释放、双击、悬停、滚轮和右键菜单事件。 处理键盘输入事件。 处理拖曳事件。 分组。 碰撞检测。,7.1.3 GraphicsView的坐标系统,1场景坐标场景坐标是所有图元的基础坐标系统。场景坐标系统描述了顶层的图元,每个图元都有场景坐标和相应的包容框。场景坐标的原点在场景中心,坐标原点是X轴正方向向右,Y轴正方向向下。QGraphicsScene类的坐标系以中心为原点(0,0),如图7.2所示。,7.1.3 Graph
6、icsView的坐标系统,2视图坐标视图坐标是窗口部件的坐标。视图坐标的单位是像素。QGraphicsView视图的左上角是(0,0),X轴正方向向右,Y轴正方向向下。所有的鼠标事件最开始都是使用视图坐标。QGraphicsView类继承自QWidget类,因此它与其他的QWidget类一样,以窗口的左上角作为自己坐标系的原点,如图7.3所示。,7.1.3 GraphicsView的坐标系统,3图元坐标图元使用自己的本地坐标,这个坐标系统通常以图元中心为原点,这也是所有变换的原点。图元坐标方向是X轴正方向向右,Y轴正方向向下。创建图元后,只需注意图元坐标就可以了,QGraphicsScene和
7、QGraphicsView会完成所有的变换。QgraphicsItem类的坐标系,若在调用QgraphicsItem类的paint()函数重绘图元时,则以此坐标系为基准,如图7.4所示。,7.1.3 GraphicsView的坐标系统,Graphics View框架提供了多种坐标变换函数,见表7.1。,7.2 【实例】:图形视图,7.2.1 飞舞的蝴蝶以下是实现上述例子的具体操作步骤。(1)新建Qt Widgets Application(详见1.3.1节),项目名为“Butterfly”,基类选择“QMainWindow”,类名命名默认为“MainWindow”,取消“创建界面”复选框的选中
8、状态。单击“下一步”按钮,最后单击“完成”按钮,完成该项目工程的建立。(2)在“Butterfly”项目名上单击鼠标右键,在弹出的快捷菜单中选择“添加新文件.”菜单项,在弹出的对话框中选择“C+ Class”选项。单击“Choose.”按钮,弹出对话框,在“Base class”后面的下拉列表框中选择基类名“QObject”,在“Class name”后面的文本框中输入类的名称“Butterfly”。(3)单击“下一步”按钮,单击“完成”按钮,添加文件“butterfly.h”和“butterfly. cpp”。,7.2.1 飞舞的蝴蝶,(4)Butterfly类继承自QObject类、QGr
9、aphicsItem类,在头文件“butterfly.h”中完成的代码具体内容。(5)在源文件“butterfly. cpp”中完成的代码具体内容如下:#include butterfly.h#include const static double PI=3.1416;Butterfly:Butterfly(QObject *parent) up = true;/给标志蝴蝶翅膀位置的变量赋初值 pix_up.load(up.png);/调用QPixmap的load()函数加载所用到的图片 pix_down.load(down.png); startTimer(100);/启动定时器,并设置时间
10、间隔为100毫秒,7.2.1 飞舞的蝴蝶,boundingRect()函数为图元限定区域范围。此范围是以图元自身的坐标系为基础设定的。具体实现代码内容如下:QRectF Butterfly:boundingRect() const qreal adjust =2; return QRectF(-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
11、_down。实现蝴蝶翅膀上下飞舞效果时,若当前显示的是pix_up图片,则重绘pix_down图片,反之亦然。具体实现代码内容如下:void Butterfly:paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) if(up) painter-drawPixmap(boundingRect().topLeft(),pix_up); up=!up; else painter-drawPixmap(boundingRect().topLeft(),pix_down); up=!up; ,
12、7.2.1 飞舞的蝴蝶,定时器的timerEvent()函数实现蝴蝶的飞舞,具体实现代码内容如下:void Butterfly:timerEvent(QTimerEvent *) /边界控制 qreal edgex=scene()-sceneRect().right()+boundingRect().width()/2;/限定蝴蝶飞舞的右边界 qreal edgetop=scene()-sceneRect().top()+boundingRect(). height()/2;/限定蝴蝶飞舞的上边界 qreal edgebottom=scene()-sceneRect().bottom()+bo
13、undingRect(). height()/2;/限定蝴蝶飞舞的下边界 if(pos().x()=edgex)/若超过了右边界,则水平移回左边界处 setPos(scene()-sceneRect().left(),pos().y(); if(pos().y()sceneRect().bottom(); if(pos().y()=edgebottom)/若超过了下边界,则垂直移回上边界处 setPos(pos().x(),scene()-sceneRect().top(); angle+=(qrand()%10)/20.0; qreal dx=fabs(sin(angle*PI)*10.0)
14、; qreal dy=(qrand()%20)-10.0; setPos(mapToParent(dx,dy);/(a),7.2.1 飞舞的蝴蝶,(6)完成了蝴蝶图元的实现后,在源文件“main.cpp”中将它加载到场景中,并关联一个视图,具体实现代码内容如下:#include #include butterfly.h#include int main(int argc,char* argv) QApplication a(argc,argv); QGraphicsScene *scene = new QGraphicsScene; scene-setSceneRect(QRectF(-200
15、,-200,400,400); Butterfly *butterfly = new Butterfly; butterfly-setPos(-100,0); scene-addItem(butterfly); QGraphicsView *view = new QGraphicsView; view-setScene(scene); view-resize(400,400); view-show(); return a.exec();,7.2.1 飞舞的蝴蝶,(7)运行程序,将程序中用到的图片保存到该工程的D:QtCH7CH701 build-Butterfly-Desktop_Qt_5_4
16、_0_MinGW_32bit-Debug文件夹中,运行结果如图7.5所示。,7.2.2 地图浏览器,通过实现一个地图浏览器的基本功能(包括地图的浏览、放大、缩小,以及显示各点的坐标等)的例子,如图7.6所示,介绍如何使用Graphics View框架。实例文件见光盘CH702。,7.2.2 地图浏览器,以下是实现这个例子的具体操作步骤。(1)新建Qt Widgets Application (详见1.3.1节),项目名称为“MapWidget”,基类选择“QMainWindow”,类名命名默认为“MainWindow”,取消“创建界面”复选框的选中状态。单击“下一步”按钮,最后单击“完成”按钮
17、,完成该项目工程的建立。(2)在“MapWidget”项目名上单击鼠标右键,在弹出的快捷菜单中选择“添加新文件.”菜单项,在弹出的对话框中选择“C+ Class”选项。单击“Choose.”按钮,弹出对话框,在“Base class”后面的下拉列表框中输入基类名“QGraphicsView”(手工添加),在“Class name”后面的文本框中输入类的名称“MapWidget”。,7.2.2 地图浏览器,(3)单击“下一步”按钮,单击“完成”按钮,添加文件“mapwidget.h”和文件“mapwidget.cpp”。(4)MapWidget类继承自QGraphicsView类,作为地图浏览器
18、的主窗体。在头文件“mapwidget.h”中完成的代码。(5)在源文件“mapwidget.cpp”中完成的代码。(6)新建一个文本文件“maps.txt”,利用该文本文件描述与地图相关的信息,将该文件保存在该工程下的D:QtCH7CH702 build-MapWidget-Desktop_Qt_5_ 4_0_ MinGW_32bit-Debug文件中,文件内容为:China.jpg 114.4665527 35.96022297 119.9597168 31.3911575,7.2.2 地图浏览器,(7)打开“mapwidget.cpp”文件,添加读取地图信息readMap()函数的具体实
19、现代码如下:void MapWidget:readMap() /读取地图信息 QString mapName; QFile mapFile(maps.txt);/(a) int ok = mapFile.open(QIODevice:ReadOnly);/以“只读”方式打开此文件 if(ok)/分别读取地图的名称和四个经纬度信息 QTextStream ts(/将地图读取至私有变量map中,7.2.2 地图浏览器,根据缩放滑动条的当前值,确定缩放的比例,调用scale()函数实现地图缩放。完成地图缩放功能的slotZoom()函数的具体实现代码内容如下:void MapWidget:slotZ
20、oom(int value) /地图缩放 qreal s; if(valuezoom) /放大 s=pow(1.01,(value-zoom); else /缩小 s=pow(1/1.01,(zoom-value); scale(s,s); zoom = value;,7.2.2 地图浏览器,QGraphicsView类的drawBackground()函数中以地图图片重绘场景的背景来实现地图显示。具体实现代码。void MapWidget:drawBackground(QPainter *painter, const QRectF ,7.2.2 地图浏览器,响应鼠标移动事件mouseMove
21、Event()函数,完成某点在各层坐标中的映射及显示。具体实现代码如下:void MapWidget:mouseMoveEvent(QMouseEvent *event) /QGraphicsView 坐标 QPoint viewPoint = event-pos(); viewCoord-setText(QString:number(viewPoint.x()+,+ QString:number(viewPoint.y(); /QGraphicsScene 坐标 QPointF scenePoint = mapToScene(viewPoint); sceneCoord-setText(QS
22、tring:number(scenePoint.x()+,+ QString:number(scenePoint.y(); /地图坐标(经、纬度值) QPointF latLon = mapToMap(scenePoint); mapCoord-setText(QString:number(latLon.x()+,+ QString:number(latLon.y();,7.2.2 地图浏览器,完成从场景坐标至地图坐标的转换mapToMap()函数。具体实现代码如下:QPointF MapWidget:mapToMap(QPointF p) QPointF latLon; qreal w =s
23、ceneRect().width(); qreal h =sceneRect().height(); qreal lon = y1-(h/2+p.y()*abs(y1-y2)/h); qreal lat = x1+(w/2+p.x()*abs(x1-x2)/w); latLon.setX(lat); latLon.setY(lon); return latLon;,7.2.2 地图浏览器,(8)下面是文件“main.cpp”的具体代码:#include #include mapwidget.h#include int main(int argc, char *argv) QApplicatio
24、n a(argc, argv); QFont font(ARPL KaitiM GB,12); font.setBold(true); a.setFont(font); MapWidget mapWidget; mapWidget.show(); return a.exec();(9)将程序用到的图片保存到该工程的D:QtCH7CH702 build-MapWidget- Desktop_Qt_5_4_0_MinGW_32bit-Debug文件夹中,运行结果如图7.6所示。,7.2.3 图元创建,通过实现一个在其中显示各种类型QGraphicsItem的窗体例子(如图7.7所示),介绍如何使用
25、Qt预定义的各种标准的QGraphicsItem类型(如QGraphicsEllipseItem、QGraphicsRectItem等),以及自定义的QGraphicsItem类型(如本例中不停闪烁的圆及来回移动的星星等)来创建图元。实例文件见光盘CH703。,7.2.3 图元创建,以下是实现这个例子的具体操作步骤。(1)新建Qt Widgets Application(详见1.3.1节),项目名称为“GraphicsItem”,基类选择“QMainWindow”,类名命名默认为“MainWindow”,取消“创建界面”复选框的选中状态。单击“下一步”按钮,最后单击“完成”按钮,完成该项目工程
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Qt5 图形 视图 框架 PPT 课件

链接地址:https://www.31ppt.com/p-1454526.html