【qt】GraphicsView绘图架构

一.为什么姚搞绘图架构

我们前面的绘图都是用的绘图事件,那么为什么我们现在还需要讲GraphicsView呢?因为这个是可交互的,可移动,编辑的.

二.视图

UI组件里面就有GraphicsView,可以来直接的拖放.
视图是用来显示场景里面的多个图形项的.
如果场景比视图小的话,默认放中间!

三.场景

场景是一个无形的容器,可以添加多个图形项.
同时也可以为场景设置多个视图.

四.图形项

相当于绘图的基本元件.

可以支持鼠标,拖放,键盘等
可以有子图项
可以设置画笔,画刷

五.坐标系

这样我们就能明白3者的关系,视图包含场景,场景包含图形项,图形项还可以包含图形项.
但是有趣的事,3者都有不同的坐标系!

六.验证说法

1.ui设计

2.创建场景

头文件中

创建场景

场景比视图小,默认是放在视图的中间.

3.视图设置场景

4.创建图形项

场景本来就是无行的,添加了也看不见,所以我们要添加图形项,先来创建

5.图形项设置位置

6.场景添加图形项

运行结果:
这个框框就是我们的图像项!

7.添加画刷

运行结果:

8.子图形项

运行结果:

9.图形项设置标识

运行结果:

就可以选择item2来拖放了!

七.鼠标事件结合

功能说明:
当我们的鼠标在视图的区域内移动和点击时就显示坐标,但是我们有三个坐标系,就显示3中坐标.

1.重载图形视图类

我们是ui拖放的视图组件,所以默认的视图类是没有重写鼠标事件的,所以我们需要自定义图形视图类!

基类选择这个可以少写一些东西,我们等会改一下就行了.

头文件中,修改继承我们的视图

红框内的删除就不报错了

2.提升为

对视图右键

点击添加,类名是刚刚我们自定义的那个

点击提升

3.鼠标事件发出信号

在QGraphicsView中找到我们的鼠标事件的函数
可以用ctrl加F查找!

头文件中重写

添加两个信号用于鼠标事件来发出当前鼠标点的坐标信号

具体实现:

4.功能实现

在mainwindow.h中添加槽函数,按on_发送者_信号的格式可以自动的关联!

添加3个坐标标签:

实现:

运行结果:

5.注意

当出现了这样的错误,就是没加头文件,自己记得加,我就不截图了.

6.说明

mouseMove鼠标事件默认是鼠标按动以后移动才算,如果要鼠标一动就算的话,可以添加:

现在你再去试试呢,哈哈.

八.总结

主要是知道视图,场景,图形项三者的关系,还有三者不同的坐标系,视图是在左上角是原点,场景和图形项都是自定义的.
还有就是用GraphicsView这些的优点,可交互等等…

加油!