QPaint绘制仪表盘

这篇文章设计了一个自己绘制的仪表盘，有背景表盘，刻度线、刻度值，指针，以及动态运行效果。

1、demo顶层设计

设计2个控件，1个widget提升为Mydial仪表盘控件，一个滑动条控件，来测试仪表盘指针旋转效果用。

代码调用，绑定滑动条信号到仪表盘的槽函数即可。

#include "widget.h"
#include "ui_frmwidget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    connect(ui->horizontalSlider, &QSlider::valueChanged, ui->dial, &MyDial::valueChanged);
}

Widget::~Widget()
{
    delete ui;
}

2、绘制仪表盘

绘制背景图，绘制表盘圆圈。

void MyDial::drawBg(QPainter *painter)
{
    int r = radius;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(QColor(172, 172, 172));
    painter->drawEllipse(-r, -r, r * 2, r * 2);

    r =  radius * 0.9;
    painter->setBrush(QColor(40, 40, 40));
    painter->setPen(Qt::NoPen);
    painter->drawEllipse(-r, -r, r * 2, r * 2);
    painter->restore();
}

绘制刻度线，模仿手表表盘逢5个数值后刻度使用加粗长线表示。

刻度画图有2