Qt 一些简单的小案例
Qt 一些简单的小案例
- Qt 一些简单的小案例
-
- 介绍
- 1 变量查看窗口 - 模型视图编程
- 2 启动画面 - QSplashScreen
- 3 滑动切换界面 - QScroller 和 QMouseEvent
- 4 画板 - 图形视图框架
Qt 一些简单的小案例
介绍
本项目为一些简单的 Qt 小案例，主要用于了解一些控件的使用。由于都是一些小案例，因此本文只展现案例的实现效果，不对其实现原理进行说明。若想了解案例的实现原理，可以参考源代码（代码注释规范，通俗易懂(￣▽￣)*）。
博客地址：https://blog.csdn.net/weixin_40909092/article/details/121046738
所以案例的源代码：qt—some-simple-examples
1 变量查看窗口 - 模型视图编程
本节通过一个简单的例子（低配版的变量查看窗口）来描述 Qt 中模型、视图和委托之间的关系以及各自的使用方法。本节模仿 IAR 的变量查看窗口，做一个低配版的变量查看窗口。效果如下：
变量查看窗口一共有三列，对应变量名、变量值和变量值格式。当点击最后一行的 后，可以输入变量名，回车后变量查看窗口就会在末尾增加一行用于监控刚刚输入的变量。当点击并删掉一个变量名，那么变量查看窗口就会删掉这行。
环境：Qt 5.9.0
工程名称：watch
源代码：watch
参考：
[1] Qt系列文章之 QAbstractItemModel
[2] QT-模型视图之自定义委托
2 启动画面 - QSplashScreen
本案例通过 QSplashScreen 类，实现一个软件的启动动画。具体效果如下：
环境：windows, Qt Creator 4.12.2
工程名称：splashscreen
源代码：splashscreen
参考：
[1] Qt开源炫酷界面QCoolPage
3 滑动切换界面 - QScroller 和 QMouseEvent
本节采用两种不同的方式：QScroller 和 QMouseEvent，实现了滑动切换界面。效果图如下。
方式一，利用QMouseEvent实现滑动切换界面：
方式二，利用QScroller实现滑动切换界面，QScroller可以让控件产生类似于用手机浏览网页时，那种滚屏的效果：
从效果图中可以看出，方式二更加自然，美观。其实在实际编写代码过程中，方式二也会更简单、便于维护。
环境：win11, Qt 5.12.9
工程名称：方式1 - slide_widget
方式2 - slide_QScroller
参考：
[1] Qt组件之模拟电池充电
[2] 正点原子的Qt案例 - slidepage
[3] Qt官方案例 - Analog Clock Window Example
[4] QT–实现滑动切换界面
4 画板 - 图形视图框架
本节通过图形视图框架（QGraphicsScene、QGraphicsView和QGraphicsItem三个类）实现了一个简单的画板程序，使用图形视图框架的优势在于可以更方便实现层叠、图层等复杂的图片等编辑方式。画板程序很简单，只实现了图片的旋转、缩放和移动功能。效果如下：
移动： 只需设置图形项的标志位，即可实现通过鼠标拖动图形项。
item = QGraphicsItem()
item .setFlag(QGraphicsItem.ItemIsMovable) # 让鼠标可以拖动图形项
旋转：
重写鼠标按下、移动和释放事件。根据鼠标移动，旋转角度的计算方式如下：
- 当鼠标刚按下时，会进入鼠标按下事件，此时获取鼠标的位置 P1。将图形项原点O和P1连成的向量，作为起始向量。
- 鼠标在按下后，会进行移动，此时会进入鼠标移动事件，此时获取鼠标位置 P2。将图形项原点 O 和 P2 连成的向量，作为当前向量。
- 计算 起始向量 和 当前向量 之间的角度。
- 利用 ‘QGraphicsItem::setTransform()’ 函数设置图形项的旋转角度和旋转方向。
那么如何计算角度和方向呢？？角度和方向的计算方式如下：
- 通过向量的 点乘 ，计算角度。单位向量点乘的值，正好为角度的余弦。
- 通过向量的 叉乘 ，计算旋转的方向。叉乘的结果为与这两个向量垂直的向量 。可以通过可以通过这个垂直向量的Z轴坐标结果判断旋转方向，如果结果为正表示顺时针，结果为负表示逆时针。（这里的正负结果与坐标系有关，我计算时都是是用场景坐标，而场景坐标原点在场景的中心，x和y坐标分别向右和向下增大，因此结果为正表示顺时针，结果为负表示逆时针）
向量叉乘公式：
c = a×b = （a.yb.z-b.ya.z , b.xa.z-a.xb.z , a.xb.y-b.xa.y）
缩放：
在图形项没有旋转前，缩放的计算非常简单：
- 当鼠标按下时记录此时的图形项大小 (w, h)。
- 当鼠标拖动时，获取鼠标的位置 P，将图形项原点 O 和 P 连成的向量 OP=(x0, y0)。
- 计算缩放比例。(x0 / w)为宽的缩放比例，(y0 / h)为高的缩放比例。在用原来的长与宽乘以缩放比例，就得到了缩放后的长和宽。
问题在于图形项旋转 θ 角度之后如何缩放？可以先把图形项旋转回去，变为水平状态，我们在水平情况下计算图形项的缩放比例。因此最重要的工作就是：图形项旋转 (-θ) 角度回水平状态时，求出向量 OP 旋转 (-θ) 角度后的向量 OP’ (x1, y1)。
二维坐标下向量围绕原点的逆时针旋转角度B的公式：
x1 = x0 * cosB + y0 * sinB
y1 = -x0 * sinB + y0 * cosB
(顺时针旋转就把角度变为负)
完！
环境：vscode 、 pyside6 、 Python3.10
工程名称：DrawingBoard
参考：
[1] 自定义QGraphicsItem实现平移、改变尺寸和旋转
[2] 向量旋转公式