QPaint绘制仪表盘

最新推荐文章于 2025-11-08 00:12:51 发布

原创

最新推荐文章于 2025-11-08 00:12:51 发布 · 764 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#ui #qt #开发语言

本文介绍如何设计并实现一个自定义的仪表盘，包括背景、刻度线、刻度值、指针和动态效果。通过Qt的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