环境：vs2017+Qt5.14.2
效果图：
准备工作：
效果图中的可以转动的仪表盘效果分为三个部分：
- 背景图（就是带去掉中间白色原点，去掉中间蓝色指针省下的部分）；
- 指针图片（中间蓝色的指针部分，不包括指针上的白色圆点）；
- 原点图片（中间白色的圆点）
原理：
在paintEvent()中绘制这三张图片。当需要旋转指针的角度时，改变指针图片的角度，再调用update()函数重新绘制显示就可以了。
具体实现：
1. 定义旋转角度成员变量：int m_nValue;//指针旋转角度。
2. 重载paintEvent()函数。
3. 加载三张图片。
QPixmap img = QPixmap(":/image/banhuan.png");
QPixmap needle = QPixmap(":/image/zhizhen.png");
QPixmap overlay = QPixmap(":/image/zhizhenyuan.png");
4. 在paintEvent()函数中进行绘制。
void CDialBox::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.save();//保存
painter.setRenderHint(QPainter::SmoothPixmapTransform, true); //平滑像素图，防止图形走样
painter.translate(this->width() / 2, this->height() / 2); // 原点定位在中间位置
// 背景图
painter.drawPixmap(-img->width() / 2, -img->height() / 2, img);
// 指针图
painter.rotate(m_nValue);//设置旋转角度
painter.drawPixmap(-needle.width() / 2, -needle.height() + needle.width() / 2, needle);
//原点图
painter.drawPixmap(-overlay.width() / 2, -overlay.height() / 2, overlay);
painter.restore();//恢复
}- 其中：painter.save();painter.restore();为保存QPainter当前的状态和恢复QPainter当前的状态。这里使用这两个函数主要是服务于painter.translate()函数的。
- 因为painter.translate(x, y)函数用来设置当前QPainter的相对坐标。正常QPainter的坐标原点(0,0)在屏幕的左上角，调用painter.translate(x, y)函数，会将原点设置为指定的(x,y)的位置,也就是说屏幕的(x,y)为QPainter画布的(0,0)位置。
- 为了防止画布上的图片有缩放或拉伸导致的图像走形，可以调用painter.setRenderHint(QPainter::SmoothPixmapTransform, true);来进行平滑设置。
- 在绘制图形时顺序很重要，先调用painter.drawPixmap()函数进行绘制的图形在最下面，后面调用的会覆盖在之前的图形之上，所以根据效果图，应该先绘制背景图片，再绘制指针图片，最后绘制原点图片。
- 因为此时原点(0,0)的位置在效果图的最中间位置，所以绘制背景图时的（x,y）应该为（-img->width() / 2, -img->height() / 2）；
- 指针图的X值为负的宽度的一半，Y值为负的高度的值加上宽度的一半。 调用painter.rotate()函数是用来将画布以坐标原点为中心进行顺时针旋转指定的角度。所以定义一个成员变量来给这个角度进行传值。
原点图的（x,y）应该为（-overlay.width() / 2, -overlay.height() / 2）；
5.改变指针角度
定义一个改变指针角度值的函数void valueChanged(int value)；
void CDialBox::valueChanged(int value)
{
m_nValue = value;
update();
}设置角度的值，调用update()函数进行刷新。调用update();函数会执行paintEvent();文章来源：https://www.toymoban.com/news/detail-431140.html
文章来源地址https://www.toymoban.com/news/detail-431140.html
到了这里，关于Qt | 实现一个简单的可以转动的仪表盘的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[译]使用Python和Dash 创建一个仪表盘(上)](https://imgs.yssmx.com/Uploads/2024/02/569956-1.png)
