先看看效果:

th.gif

源码地址:https://www.fearlazy.com/demos.html

 

一、思路

该温度计的实现包含两个方面。其一是绘制,其二是动画。

绘制主要由背景、刻度值和中间的柱体三部分组成。

温度计最关键的属性是温度值,所以动画只要关联温度值属性即可。

 

二、实现关键点

 

1.首先我们需要一个类继承于QWidget,重写paintEvent事件以便于我们能够进行绘制操作。

2.定义一个温度值属性,并用Q_PROPERTY声明这个属性(动画绑定属性时需要),然后写属性的READ和WRITE对应的函数。

 

3.定义一个动画变量,并绑定value属性(属性名与Q_PROPERTY声明的一致)。

4.绘制

根据大小计算中间柱子的矩形区域m_rect,其他内容的绘制将基于m_rect计算:

 

接着按顺序绘制: