Qt示例 | 仿射变换示例 Affine Transformations(十)

86 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第21天,点击查看活动详情

注:示例为Qt 5.1.1中的示例。
本文旨在剖析Qt示例的源码,总结函数使用方法以及编程思想,提高自己的编程能力。

示例运行效果:

1.gif

文件目录:

image.png image.png

具体实现:

HoverPoints类:

HoverPoints类里面有些函数是这个示例中没有用到的,所以大家在看到有的没有用到的接口函数时不用纠结。因为Qt示例习惯将某一个功能单独进行封装,来为不同的示例项目提供方法。所以这个类的函数在后续调用的地方会加以说明。

image.png

这个类首先定义了三个枚举类型,分别是PointShape、LockType、SortType、ConnectionType。

  • PointShape中的两个变量用来区分图片的中心点和旋转点的形状,CircleShape代表圆形,在效果图中可以看到两个由线连接的红色实心圆。当定义为RectangleShape时,就会变成矩形。

XFormWidget类:

image.png

XFormWidget是这个示例的主窗口类,包括一个构造函数,一个XFormView视图和一个编辑框。这个类主要作用就是创建窗口中的所有小部件,并布局。

构造函数:

image.png

  • 首先创建了视图示例,然后创建分组部件,分组部件的样式已经在之前的类中实现了,这里只需要设置它们大小和标题就可以。包括一个最外层的Affine Transformations分组部件,一个Rotate分组部件,一个Scale分组部件,一个Shear分组部件,一个Type分组部件。

  • 其中,Rotate、Scale、Shear中分别包括一个控制旋转、缩放、变形的滑块部件。分别设置它们可控制的范围数值以及布局策略。

  • Type中包含三个radioButton和一个编辑框,三个单选按钮控制显示的是图片还是文字,编辑框可以输入文字的内容。

image.png

创建最下面的五个按钮,并加入到maingroup分组部件中。设置他们显示的文字和属性,这里控制动画、opengl和描述的按钮,都是可以选中的类型,有点类似于checkbox的功能。

image.png

给分组部件添加布局,并将属于自己的部件添加进布局中。

image.png

进行信号槽的连接。

image.png

最后初始化数据。为视图加载资源并重置,设置默认选中第一个单选按钮,初始化编辑框内容并默认不可点击,控制动画的按钮设置为选中状态。

一点感想:

这个函数的内容很简单,只做了部件的创建、布局、信号槽的连接、初始化的工作。在我们的编程过程中,构造函数也应该使用这样的流程。

未完待续...