QT Graphics View 框架介绍

我在一个鼠标可用性测试的项目里面用到了QT的Graphics View框架(使用Python+PyQt),这是一篇简单的介绍文章,Graphics View框架为2D绘图提供一个简单,容易使用,功能强大的解决方案,如果你正在开发需要复杂2D绘图功能的软件,可以考虑使用它。

QT的2D绘图系统结构

QT的2D绘图系统可以分作为两层,包括底层的绘图引擎和上层的图元绘制框架。

基础的绘图引擎主要包括QPainter,QPaintDevice和QPaintEngine类。其中我们一般使用到的的是处于最上层的QPainter,它包含大量的画点,画线,基础图形,组合图形,文本,光栅图像等功能,类似于GDI编程里面的DC(设备上下文)或者MFC中的包装类CDC。

在基础的绘图引擎之上,QT又提供了基于图元的绘制和管理框架,所谓图元,请考虑我们常使用的UML图中表示一个类的图形,它可能包括3个矩形,上面的矩形包括类名的文本,中间的包括多个属性名文本,下面的包括多个方法名文本,不同的矩形使用不同的刷子填充...无论上面的描述多么复杂,我们都可以抽象的看待类的图形为一个图元,而UML工具需要处理图元的选择,移动等事件。而QT的Graphics View框架则为上述功能提供了强有力的支持。

Graphics View 框架

整个Graphics View框架也是由3个主要的类组成,分别是QGrphicsItem,QGraphicsScene和QGraphicsView。

其中Item定义了图元,它的实现通常包括绘制自身和响应发生在自己身上的鼠标/键盘事件,并且Item的绘制是基于它本身的局部坐标系的。

而Scene则定义了整个场景,它包含所有需要绘制的图元(Item),把它们放在合适的位置,处理整个Scene的鼠标/键盘事件,根据用户的操作改变图元的状态(是否被选中等等),按需要更新需要重新绘制的区域,向包含的图元广播鼠标/键盘的事件,处理图元间的覆盖关系,碰撞检测等等。其中图元在Scene中的位置是基于Scene本身的世界坐标系。

最后View定义的观察Scene的视口(Viewport),让用户可以转着看(旋转),倒着看(翻转),看一部分(裁剪),拉远了看(缩小),拉近了看(放大)等等,同时因为View本身就是一个Widget(UI组件),它实际提供了绘图的区域(Widget的表面),可以成为独立的窗体被弹出,或者嵌入其它UI组件中形成复合UI组件。

更多的信息可以从QT本身的帮助文档和示例代码中获得。

演示例子

下面是项目的一张演示图片,用户需要把绿色的图标拖拉到蓝色的图标上,并且避免碰到黄色的边界。
系统需要记录用户操作的时间,成功率等信息,来分析用户所使用的输入设备(鼠标)的可用性。

有兴趣的朋友可以猜一下下面的Scene里面包括多少个Item ^_^

QT Graphics View 框架介绍_第1张图片

你可能感兴趣的:(框架,UI,qt,UML,图形,引擎)