Qt | 实现一个简单的可以转动的仪表盘

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

环境：vs2017+Qt5.14.2

效果图：

准备工作：

效果图中的可以转动的仪表盘效果分为三个部分：

1. 背景图（就是带去掉中间白色原点，去掉中间蓝色指针省下的部分）；
2. 指针图片（中间蓝色的指针部分，不包括指针上的白色圆点）；
3. 原点图片（中间白色的圆点）

原理：

在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();