32.QT-制作最强电压电阻表盘,可以自定义阴影效果,渐变颜色,图标,文字标签等-附带demo程序
由于上位机需要绘制电压电阻表盘,如下图所示:
后来,在网上找阿找,还是没找到满意的,索性自己来画控件算了,由于第一次画控件,所以花了我2天时间,才画好
整体效果图如下所示:
该demo程序放在了提供的源码地址里了,下载好后,在子文件夹demo1里面
介绍
代码里添加了自适应设置,根据窗口大小自动改变标签,图标,刻度值,中心圆数值等
代码里集成了定时器,可以通过setTimerType(int msec,int v)成员函数实现表盘指针旋转快慢,每过多少msec,跑多少值(v),如果msec=0或者v=0,则表示不用定时器,直接跳到终点。
代码里通过setGradientColorMode(QList<QColor>& Qcolors)成员函数可以自定义一组渐变颜色.
也可以通过setSingleColorMode(QColor color)成员函数自定义单一颜色(上图2就是设置的单一颜色).
1.代码里通过 painter类来绘图,其中paintEvent()函数如下所示
2.然后进入drawObkColor()函数,来绘画外圆盘,函数如下所示
外圆盘效果如下所示:
3.然后接下来开始画刻度圆,画了它后,才能开始画刻度和划过的颜色等
4.然后接下来开始画划过的颜色,就是上图指针划过后都会带有颜色的那种 (以单色颜色为例)
效果:
5.然后接下来便开始画刻度和刻度值,其中比较重要的就是绘制刻度值
由于Painter的rotate()旋转文字时,也会将文字倾斜了,所以我们需要自定义rotate()函数
具体参考我另一篇rotate函数分析: 31.QPainter-rotate()函数分析-文字旋转不倾斜,图片旋转实现等待
drawScaleTextColor()画刻度值函数如下所示:
效果如下所示:
6.然后接下来开始画指针
效果如下:
7.然后继续画中心圆
效果如下:
剩下的代码就是画标签和值还有图标啦,由于渐变代码多一些,所以具体参考可以去下载源代码.在最下面有下载地址
2018-06-30 第二次更新
内容
- 支持负数到正数刻度值显示
- 支持小数点位数设置
- 优化刻度值自适应窗口，能具体显示个位至千位
- 支持表盘所有颜色搭配
- 添加arriveEnd()信号函数
并写了个demo测试程序,可以直接测试数据,demo程序效果图如下所示:
该demo程序放在了提供的源码地址里了,下载好后,在文件夹demo2里面
测试图1-设置颜色(任意搭配颜色):
测试图2-设置正负数值:
2018-07-01 第三次更新
- 在上个更新里,添加了表盘阴影效果,来实现立体感
如下图的第二个表盘所示:
该demo程序放在了提供的源码地址里了,下载好后,在文件夹demo3里面
主要内容:
添加了一个drawDialShade(QPainter &paint,qreal Angle_start,qreal Angle_end,qreal ratio,int alpha)成员函数,来绘制白色阴影,实现的光影效果.
该函数的参数含义如下所示:
- Angle_start Angle_end :表示圆盘的起始/结束角度,Angle_end必须大于Angle_start哦
- ratio:表示绘制的阴影亮度的扁与平(为0~1之间),为0表示平的圆环,为0.99表示最扁的圆环,大于等于1则不会绘制
- alpha:表示铺上的白色透明度,0表示透明,255表示不透明
如果觉得上图的阴影效果觉得不合适,可以自己修改哦~
drawDialShade()函数使用示例:
1.单独调用drawDialShade(painter,30,180,0,255)时
含义: 表示在内圆盘上的30°~180°之间绘制圆月,ratio=0,所以圆月是平的,alpha=255,表示不透明
效果如下:
2.单独调用drawDialShade(painter,45,180,0.5,150)时
含义: 表示在内圆盘上的45°~180°之间绘制圆月,圆月是半扁的,半透明
效果如下:
PS:要实现更强的立体感,多次调用改参数即可
上面所有源码已放在源代码下载地址里了,具体源代码下载地址为:
https://download.csdn.net/download/qq_37997682/10512710
如果觉得不错,点个赞呗~
浙公网安备 33010602011771号