首页分享 Qt仪表盘绘制教程

Qt仪表盘绘制教程

来源：花匠小妙招时间：2025-05-13 18:05

文章目录一、前言二、效果展示三、绘图过程详解2.1、表盘框架2.2、刻度线2.3、刻度值2.3、数值2.4、指针四、锦上添花

一、前言

本篇博客是学习的大佬feiyangqingyun的博客，博客链接，有兴趣的可以去看一下。通过本次学习，让我对Qt的绘图技巧有了很大的提升，万分感谢大佬：飞扬青云

二、效果展示

在这里插入图片描述

三、绘图过程详解

我把仪表盘划分为五个部分，分别表盘框架、刻度线、刻度值、数值、指针，下面开始分步讲解。

2.1、表盘框架

在这里插入图片描述
表盘框架分为六部分：表盘框架外圆、表盘框架中间圆、表盘框架彩环、表盘框架内圆和中心红圆环和中心圆，具体怎么绘制在此不做过多赘述，不懂就去研究一下Qt的绘图原理。
值得注意的技巧:

坐标系平移painter->translate(width()/2,height()/2)；
等比例缩放painter->scale(side / 200.0, side / 200.0)；

2.2、刻度线

在这里插入图片描述
刻度绘制有个很骚的操作，旋转坐标系painter.rotate(Angle)，Qt的坐标系是x轴正方向向右，y轴正方向向下，例如我要从左开始绘制刻度线，直接将坐标系旋转135°，然后每画一个刻度旋转一个刻度对应的角度间隔(270°/(100-0))。

2.3、刻度值

在这里插入图片描述
绘制刻度值不采用旋转坐标的方法，采用极坐标计算坐标。初始坐标系为水平向右为x轴正方向，垂直向下为y轴正方向，现在要从0开始绘制，极坐标是逆时针为正反向，所以0处的弧度为(360°-135°) * (180 / PI)，刻度跨度总共是270°，所以每个大刻度值之间的角度间隔是270°/10，相应地也转化为弧度制。然后使用三角公式x=r * cosa，y=r * sina，cosa和sina是值对应的角度的弧度制。但是这样还不够，因为绘制文字是在一个矩形框里面绘制，如果我们按算出来的x和y进行绘制，那这个x和y对应矩形框的左上角坐标，所以绘制出来的效果会对不齐。为了解决这个问题，首先我们需要修改字体的像素值，然后计算出值（对应的矩形框）的宽度和高度，然后在实际绘制时，对计算出的x和y做一个偏移处理（例如，宽、高的一半），这样画出来的刻度效果会好很多。

2.3、数值

在这里插入图片描述
数值直接绘制在中心即可。

2.4、指针

在这里插入图片描述
指针是由一个细长的等边三角形组成的，绘制指针依然采用旋转坐标系的方法绘制。从0开始绘制，首先旋转45°，取三个点（-5,0）、（5,0）、（0,radius），也就是在x轴左右取一对对称点，在y轴上取一个点，然后根据当前值计算旋转坐标系的角度，指针就会随之移动。具体绘制时，可将三个点放在一个集合里，然后进行绘制即可。