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

101 阅读2分钟

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

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

示例运行效果:

1.gif

文件目录:

image.png image.png

具体实现:

XFormView类:

构造函数:

image.png

构造函数主要完成初始化工作。
构造函数中设置了追踪鼠标的属性,初始化了图型类型、旋转角度值、缩放值、和变型值。
加载了图片资源,创建HoverPoints实例,并给实例初始化。首先中心点和旋转点是圆形的,中心点和旋转点之间的连线方式分为直线连接、曲线连接和没有连接。
曲线连接:

image.png

还设置了不可编辑。中心点和旋转点的大小(下图是修改为30的样子)。

image.png

设置了中心点和旋转点的画刷颜色和画笔颜色以及中间连线的颜色值。都带有一个透明通道值(alpha)。
设置它的区域为500*500。拖动范围在这个区域中。

红色区域即500*500。 image.png

设置了控制点的值,连接hoverPoints的信号,并设置主窗口的布局策略。

mousePressEvent函数:

image.png

鼠标按下时,执行了setDescriptionEnabled函数,控制描述页面的显示与隐藏。当鼠标在视图区域按下鼠标时,隐藏描述页面。

setDescriptionEnabled函数:

image.png

当页面显示标志与参数不一致时,更新显示标志,并更新页面是否显示。
这个写法可以学习一下,在以后实现类似功能时,可以通过比较状态值和参数值来实现。

resizeEvent函数:

image.png

当我们通过拖拽窗口改变视图大小时,同时改变HoverPointsd的控制区域。

paint函数:

image.png

视图区域的绘制分为三种,一种是矢量图(Vector image)的绘制,一种是像素图(pixmap)图片的绘制,还有一种是文字的绘制。在paint函数中,通过判断图型类型,调用不同的绘制方法。

什么是矢量图和像素图:

  • 一般来说,图片分为像素图和矢量图两类。
  • 像素图:也叫位图,是使用像素点阵列拼合的图像。通过捕捉得到的图像(如拍摄、截图)都是像素图。像素图在放大到一定程度后会出现模糊。常见的像素图格式包括:JPEG、PSD、PNG、TIFF。
  • 矢量图:是使用点线面构成的图像。矢量图往往是使用矢量软件绘制得到的。点线面都是数学化的,因此放大后不会模糊。常见的矢量图格式包括:AI、EPS、SVG。

未完待续...