Qt自定义控件仪表盘

已于 2023-05-11 10:59:53 修改
阅读量586 收藏 5
点赞数 2
分类专栏： C学习记录 文章标签： qt ui 开发语言
于 2023-05-10 11:22:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/K_ZhJ18/article/details/130596704
版权

效果

初始效果：

调整后：

代码

 头文件

仪表头文件：

#pragma once
#pragma execution_character_set("utf-8")
#include <qpainter.h>
#include <qpen.h>
#include <qbrush.h>
#include <qcolor.h>
#include <qlabel.h>
#include <qtransform.h>
#include <qrectf>
#include <qdebug.h>
#include <qvector.h>
#include <qwheelevent>
#include <qmath.h>
#include <qtimer.h>
#include <qmessagebox.h>
#define _USE_MATH_DEFINES
#include "math.h"
#include <qwidget.h>
class Gauge :
    public QWidget
{
    Q_OBJECT

public:
    Gauge(QWidget* parent = nullptr);
    ~Gauge();
    void startPainting();
    void setVal(const float& val);
    bool setParts(const int& num);
    bool setOutlineWidth(const float& num);
    bool setSeparatorWidth(const float& num);
    bool setStartNum(const float& num);
    bool setStepNum(const float& num);
    bool setNumSize(const float& num);
    bool setTextSize(const float& num);
    bool setValSize(const float& num);
    bool setText(const QString& str);
private:
    int parts;//共有多少个分割区间
    int oulineWidth;//仪表轮廓曲线粗度
    int separatorWidth;//分隔符粗度
    float startNum;//轮廓处起始数值
    float stepNum;//每次递增的数值
    float numSize;//仪表轮廓数值尺寸
    float startAngle;//起始角度
    float textSize;//仪表中央文本尺寸
    float needleAngle;//由于绘制指针时的角度坐标与绘制轮廓处数值时不同，故须单独定义指针的起始角度
    float partAngle; //每个分割区间占用角度
    float radius;//仪表半径
    float stepVal;//指针每次移动所增加的数值
    float currentVal;//指针当前所指向的数值
    float valSize;//指针指向值尺寸
    float input;
    float count;
    QRectF map;//仪表所处控件的矩形
    QRectF textRect;//绘制文本时的矩形
    QPen pen;
    QString text;//需要在仪表中央绘制的文本
    QPainter* painter;
    QTimer* timer;
    void drawGauge();
    void drawText();
    void drawSeparator();
    void drawSperateNumber();
    void drawCenterPoint();
    void drawNeedle();
    void drawValue();
    float bounceFunc(float x);
    void paintEvent(QPaintEvent* event);
public slots:
    void onTimeOut();
};

主窗口头文件：

#pragma once

#include <QtWidgets/QWidget>
#include "ui_GuageDemo.h"
#include "Gauge.h"
#include <qrandom.h>
#include <qthread.h>
class GuageDemo : public QWidget
{
    Q_OBJECT

public:
    GuageDemo(QWidget *parent = nullptr);
    ~GuageDemo();
    Gauge* gauge;
private:
    Ui::GuageDemoClass ui;
public slots:
    void onSliderMoved(int);
};

源文件

仪表源文件：

#include "Gauge.h"

Gauge::Gauge(QWidget* parent)
	:QWidget(parent), parts(15), startAngle(40), startNum(0), stepNum(5), numSize(10), oulineWidth(12), separatorWidth(5), text("Gauge\nDemo"), textSize(16), valSize(16), count(0)
{
	this->timer = new QTimer(this);
    connect(this->timer, SIGNAL(timeout()), this, SLOT(onTimeOut()));
}

Gauge::~Gauge() {
    delete this->painter;
    delete this->timer;
}

float Gauge::bounceFunc(float x) {
	float res = 2 * (this->input - this->currentVal) / (qExp(-0.5 * x) + 1) - (this->input - this->currentVal);
	return res;
}

void Gauge::startPainting() {
    this->partAngle = (360 - 2 * this->startAngle) / this->parts;
    this->stepVal = this->stepNum / this->partAngle;
    this->currentVal = this->startNum;
    this->needleAngle = this->startAngle - 270;
    this->map = this->rect();
    this->radius = this->map.height() > this->map.width() ? this->map.width() : this->map.height() * 0.8 / 2;
    this->painter = new QPainter(this);
    update();
}

void Gauge::setVal(const float& val) {
    this->timer->stop();
    this->count = 0;
    this->input = val;
    if (this->input<this->startNum || this->input>this->startNum + this->stepNum * this->parts) {
        QMessageBox::warning(this, "", "输入错误");
        return;
    }
    this->timer->setInterval(1);
    this->timer->start();
}

bool Gauge::setParts(const int& num) {
    if (num > 0) {
        this->parts = num;
        startPainting();
        return true;
    }
    return false;
}

bool Gauge::setOutlineWidth(const float& num)
{
    if (num > 0) {
        this->oulineWidth = num;
        startPainting();
        return true;
    }
    return false;
}

bool Gauge::setSeparatorWidth(const float& num) {
    if (num > 0) {
        this->separatorWidth = num;
        startPainting();
        return true;
    }
    return false;
}

bool Gauge::setStartNum(const float& num) {
    if (num > 0) {
        this->startNum = num;
        startPainting();
        return true;
    }
    return false;
}

bool Gauge::setStepNum(const float& num) {
    this->stepNum = num;
    startPainting();
    return true;
}

bool Gauge::setNumSize(const float& num) {
    if (num > 0) {
        this->numSize = num;
        startPainting();
        return true;
    }
    return false;
}

bool Gauge::setTextSize(const float& num) {
    if (num > 0) {
        this->textSize = num;
        startPainting();
        return true;
    }
    return false;
}

bool Gauge::setValSize(const float& num) {
    if (num > 0) {
        this->valSize = num;
        startPainting();
        return true;
    }
    return false;
}

bool Gauge::setText(const QString& str) {
    if (str.size() > 1 && str.size() < 20) {
        this->text = str;
        startPainting();
        return true;
    }
    return false;
}

void Gauge::drawGauge() {//绘制边缘
    QRectF rect = this->rect();
    this->painter->begin(this);
    QRectF realScope(rect.topLeft() + QPointF(rect.height() * 0.1, rect.width() * 0.1), rect.size() * 0.8);
    this->painter->setRenderHint(QPainter::Antialiasing, true);
    this->pen = QPen(QBrush("#5599FF"), this->oulineWidth, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
    this->painter->setPen(this->pen);
    this->painter->drawArc(realScope, -(this->startAngle + 10) * 16, (180 + (this->startAngle + 10) * 2) * 16);
    drawSeparator();
    drawSperateNumber();
    drawText();
    drawValue();
    drawCenterPoint();
    drawNeedle();
    this->painter->end();
}

void Gauge::paintEvent(QPaintEvent* event) {
    if (this->painter)
        drawGauge();
}

void Gauge::drawText() {//在中央绘制文字
    QStringList lis = this->text.split("\n");
    int row = lis.size();
    int maxStrSize = 0;
    for (int i = 0; i < row; i++) {
        if (lis[i].size() > maxStrSize)
            maxStrSize = lis[i].size();
    }
    textRect = QRectF(QPointF(-this->textSize * maxStrSize * 1.6, this->textSize) / 2, QSizeF(this->textSize * maxStrSize, this->textSize * row) * 1.6);
    pen.setColor("#99BBFF");
    this->painter->setPen(pen);
    this->painter->setFont(QFont("STHupo", this->textSize, QFont::Medium));
    this->painter->drawText(textRect, Qt::AlignHCenter, this->text);
}

void Gauge::drawSeparator() {//绘制分割符
    this->painter->translate(this->rect().center());
    this->painter->rotate(40 - partAngle);
    pen.setColor("#99BBFF");
    pen.setWidth(this->separatorWidth);
    this->painter->setPen(pen);
    for (int i = 0; i <= this->parts; i++) {
        this->painter->rotate(partAngle);
        this->painter->drawLine(QPointF(0, radius - 30), QPointF(0, radius - 15));
    }
}

void Gauge::drawSperateNumber() {//绘制分割数字
    pen.setColor("#5599FF");
    this->painter->setFont(QFont("FangSong", this->numSize, QFont::DemiBold));
    this->painter->rotate(-this->parts * partAngle - 40);
    this->painter->setPen(pen);
    for (int i = 0; i <= this->parts; i++) {
        float bias = 0;
        if (i < this->parts / 2)
            bias = this->numSize;
        QRectF numRect(QPointF(-this->numSize - bias, -this->numSize) / 2 + QPointF(sin(-(40 + i * partAngle) * M_PI / 180) * (radius - 45), cos(-(40 + i * partAngle) * M_PI / 180) * (radius - 45)), QSizeF(this->numSize * 3, this->numSize * 2));
        QString text = QString::number(this->startNum + i * this->stepNum);
        this->painter->drawText(numRect, Qt::AlignLeft, text, false);
    }
}

void Gauge::drawCenterPoint() {//绘制中央点
    pen.setColor("#5599FF");
    pen.setWidthF(radius * 0.1);
    this->painter->setPen(pen);
    this->painter->drawPoint(QPoint(0, 0));
}

void Gauge::drawNeedle() {//绘制指针
    pen.setColor("#5500DD");
    pen.setWidthF(1);
    this->painter->setPen(pen);
    QPainterPath path(QPoint(radius * 0.05, 0));
    path.cubicTo(QPointF(radius * 0.06, radius * 0.03), QPointF(radius * 0.15, radius * 0.07), QPointF(radius * 0.8, 0));
    path.cubicTo(QPointF(radius * 0.15, -radius * 0.07), QPointF(radius * 0.06, -radius * 0.03), QPointF(radius * 0.05, 0));
    this->painter->setOpacity(0.3);
    this->painter->rotate(this->needleAngle);
    this->painter->fillPath(path, QBrush("#0088A8"));
}

void Gauge::onTimeOut() {
    float val = bounceFunc(this->count);
    if (this->currentVal == this->input) {
        this->count = 0;
        this->timer->stop();
    }
    this->currentVal += val;
    float angle = this->partAngle / this->stepNum * val;
    this->needleAngle += angle;
    this->count += 0.001;
    update();
}

void Gauge::drawValue() {
    QString val = QString::number(this->currentVal, 'f', 2);
    QRectF valRect(QPointF(-4 * this->valSize / 2, this->textRect.bottom() + this->valSize), QSize(4 * this->valSize, this->valSize));
    pen.setColor("#9F88FF");
    this->painter->setPen(pen);
    this->painter->setFont(QFont("FangSong", this->valSize, QFont::DemiBold));
    this->painter->drawText(valRect, Qt::AlignCenter, val);
}

主窗口源文件：

#include "GuageDemo.h"

GuageDemo::GuageDemo(QWidget* parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    QThread* thread = new QThread;
    this->gauge = new Gauge(this);
    this->gauge->setGeometry(QRect(10, 10, 300, 300));
    this->gauge->moveToThread(thread);
    this->gauge->startPainting();
    ui.horizontalSlider_input->setMaximum(75);
    connect(ui.pushButton, &QPushButton::clicked, this, [=]() {this->gauge->setText("Hello\nWorld"); });
    connect(ui.horizontalSlider_input, &QSlider::sliderMoved, this, [=]() {this->gauge->setVal(ui.horizontalSlider_input->value()); });
    connect(ui.horizontalSlider_textSize, &QSlider::sliderMoved, this, [=]() {this->gauge->setTextSize(ui.horizontalSlider_textSize->value()); });
    connect(ui.horizontalSlider_numSize, &QSlider::sliderMoved, this, [=]() {this->gauge->setNumSize(ui.horizontalSlider_numSize->value()); });
    connect(ui.horizontalSlider_parts, &QSlider::sliderMoved, this, [=]() {this->gauge->setParts(ui.horizontalSlider_parts->value()); });
    connect(ui.horizontalSlider_separatorSzie, &QSlider::sliderMoved, this, [=]() {this->gauge->setSeparatorWidth(ui.horizontalSlider_separatorSzie->value()); });
    connect(ui.horizontalSlider_startNum, &QSlider::sliderMoved, this, [=]() {this->gauge->setStartNum(ui.horizontalSlider_startNum->value()); });
    connect(ui.horizontalSlider_stepNum, &QSlider::sliderMoved, this, [=]() {this->gauge->setStepNum(ui.horizontalSlider_stepNum->value()); });
    connect(ui.horizontalSlider_outLineWidth, &QSlider::sliderMoved, this, [=]() {this->gauge->setOutlineWidth(ui.horizontalSlider_outLineWidth->value()); });
}

GuageDemo::~GuageDemo()
{}

void GuageDemo::onSliderMoved(int val) {
    this, gauge->setVal(val);
}

介绍

    QThread* thread = new QThread;
    this->gauge = new Gauge(this);
    this->gauge->setGeometry(QRect(10, 10, 300, 300));
    this->gauge->moveToThread(thread);
    this->gauge->startPainting();

将仪表控件扔进子线程运行，先new一个仪表，再定义它的几何大小，然后调用其startPainting函数开始绘制。

仪表的接口分别为 开始绘图 设置当前值 设置区间个数 设置轮廓大小 设置分隔符大小 设置起始值 设置数字大小 设置文本大小 设置当前值大小 设置文本。

    void startPainting();
    void setVal(const float& val);
    bool setParts(const int& num);
    bool setOutlineWidth(const float& num);
    bool setSeparatorWidth(const float& num);
    bool setStartNum(const float& num);
    bool setStepNum(const float& num);
    bool setNumSize(const float& num);
    bool setTextSize(const float& num);
    bool setValSize(const float& num);
    bool setText(const QString& str);

实现指针连续旋转

在输入一个数值时，要想让指针连续的移动到数值所在处，加入sigmod函数，实现如下。若要修改指针旋转的速度便修改qExp那个0.5即可。函数图像如下

float Gauge::bounceFunc(float x) {
	float res = 2 * (this->input - this->currentVal) / (qExp(-0.5 * x) + 1) - (this->input - this->currentVal);
	return res;
}
void Gauge::setVal(const float& val) {
    this->timer->stop();
    this->count = 0;
    this->input = val;
    if (this->input<this->startNum || this->input>this->startNum + this->stepNum * this->parts) {
        QMessageBox::warning(this, "", "输入错误");
        return;
    }
    this->timer->setInterval(1);
    this->timer->start();
}
void Gauge::onTimeOut() {
    float val = bounceFunc(this->count);
    if (this->currentVal == this->input) {
        this->count = 0;
        this->timer->stop();
    }
    this->currentVal += val;
    float angle = this->partAngle / this->stepNum * val;
    this->needleAngle += angle;
    this->count += 0.001;
    update();
}

在调用bounceFunc时，定义一个计时器，计时间隔为1ms。

关于指针形状的绘制

使用QPainterPath绘制贝塞尔曲线path，然后this->painter->fillPath(path, QBrush("#0088A8"))。

红糖果仁沙琪玛
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Qt绘制多彩仪表盘（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-28 385
Qt绘制多彩仪表盘（附完整源码）
Qt/C++编写自定义控件3-速度仪表盘
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
04-21 3326
前言 速度仪表盘，写作之初的本意是用来展示当前测试的网速用的，三色圆环+数码管显示当前速度，Qt自带了数码管控件QLCDNumber，直接集成即可，同时还带有动画功能，其实也可以用在汽车+工业领域等，展示汽车的当前速度和各种指标情况，比如生成领域的完成百分比等，控件采用纯painter绘制，自由拉伸不变形，背景透明的，贴上个背景图就会显得更漂亮。 实现的功能 1:可设置范围值,支持负数值 2:可...
QT绘制仪表盘
bobo123355566的博客
05-08 775
【代码】QT绘制仪表盘。
QT学习——汽车仪表盘
weixin_60418924的博客
02-26 1383
是Qt框架中一个重要的事件类，专门用于处理绘图事件。当Qt视图组件需要重绘自己的一部分时，就会产生事件。这通常发生在以下几种情况：1.：当窗口或控件第一次出现在屏幕上时，系统会生成一个事件， 通知窗口进行自身的绘制。2.：当用户改变窗口的大小时，窗口的内容通常需要重新绘制以适应新的尺寸。3.：如果窗口被其他窗口遮挡，然后又重新露出来，被遮挡的部分通 常需要重新绘制。4.：通过调用QWidget的update()或repaint()方法，可以手动触发重绘事件。在Qt。
Qt自定义控件实战：仪表盘
最新发布
hw5230的博客
05-23 550
Qt自定义控件实战：仪表盘
pyqt绘制仪表盘
weixin_49577420的博客
10-08 908
pyqt绘制仪表盘，练习pyqt如何绘制图像，该文章不是本人原创。
Qt自定义控件--仪表盘源码
08-17
标题中的“Qt自定义控件--仪表盘源码”指的是一个利用Qt库开发的自定义控件，它模拟了仪表盘的视觉效果和行为。仪表盘控件通常用于显示数值或状态信息，如速度、温度、压力等，其设计灵感可能来源于汽车或飞机上的...
Qt 自定义控件 云台仪表盘控件
09-18
总之，Qt自定义控件云台仪表盘控件是通过结合图形绘制、事件处理和用户交互来实现的，它能直观地显示和控制云台设备的状态。理解并掌握这个过程对于Qt开发者来说是至关重要的，因为它不仅增强了应用的用户体验，也...
Qt自定义控件实现简易仪表盘
12-23
本文实例为大家分享了Qt自定义控件实现简易仪表盘的具体代码，供大家参考，具体内容如下 Qt自定义控件12：简易仪表盘（根据liudianwu大神的界面自己写的代码，建议去学习刘大神，会受益良多的） 先看效果图： 思路...
Qt自定义控件实现多彩色仪表盘
12-23
本文主要讲解如何通过Qt自定义控件来实现一个多彩色的仪表盘。这个仪表盘由红色、蓝色和绿色三部分组成，分别占据270度角度的1/4、1/2和1/4。这种设计可以用于显示不同比例的数据或状态。 首先，我们创建一个新的Qt...
Qt编写的速度仪表盘
02-26
使用Qt4编写的动态仪表，注释详细，有详细的文章指导讲解-我的博客《QT实战开发》
QML控件学习——之仪表盘控件Dial和DialStyle(自定义仪表盘)
cxc233的博客
12-03 7911
话不多说先上效果图一个默认效果，一个自定义效果 介绍：Dial是Qt5.5开始加入的，包含于import QtQuick.Extras 1.4 应用：万能遥控的温度、声音的控制、以及其他工业仪表盘等等 --------------------------------------------------------------------------------------
用Qt/C++编写云台仪表盘控件
UhxzCombined的博客
09-20 139
云台仪表盘是一种常见的UI元素，用于显示某个变量的数值，并以类似于汽车仪表盘的方式进行可视化。在上面的代码中，我们定义了一个名为"GaugeWidget"的类，它继承自QWidget。在上面的代码中，我们在主窗口的构造函数中创建了一个GaugeWidget实例，并将其设置为中央小部件。首先，我们绘制了一个灰色的背景圆圈，然后根据当前的值绘制了一个红色的指针。首先，我们需要创建一个新的Qt小部件类来实现云台仪表盘控件。在上面的代码中，我们添加了一个名为"GaugeWidget"的成员变量m_gauge。
Qt/C++编写自定义控件44-天气仪表盘
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
08-07 1889
一、前言 天气仪表盘控件是所有控件中唯一一个使用了svg矢量图的控件，各种天气图标采用的矢量图，颜色变换采用动态载入svg的内容更改生成的，其实也可以采用图形字体来做，本次控件为了熟悉下svg在Qt中的使用，才采用的svg来绘制。 天气一般要表示多个内容，温度+湿度+天气等，这就需要合理的布局多种元素的位置才能更加美观一些，这里参照的是网上一些通用的做法，比如最外层圆环是温度，中间圆环湿度，然后天...
Qt控件源码原创独家(共201个支持Qt4、Qt5、Qt6) 超过188个精美控件并持续不断迭代更新升级，种类超多，控件类型极其丰富
m0_72954716的博客
07-25 634
Qt控件源码原创独家(共201个支持Qt4、Qt5、Qt6)
Qt利用鼠标滚轮事件实现自定义绘图的放大缩小
icebergw的博客
12-13 6612
先看效果，，     滚动过后的图就变大了。   抛开鼠标滚轮事件，简单地想，绘图的放大和缩小：其实就是根据一个缩放因子（暂且这么叫），对绘图坐标进行重算，并重绘。加上鼠标滚轮事件就是通过鼠标滚轮事件得到这个变量罢了。 鼠标滚轮的轮子圆的，所以转一圈360度， 大多数鼠标工作单步15度。此时鼠标转轮滑动一圈是360度，鼠标滚轮转动一圈是24步，计算后就是15度一步     源码分...
qt自定义控件 仪表盘
06-24
总之，Qt自定义控件仪表盘是一个非常实用、优雅的设计元素，可以帮助开发者快速开发出漂亮的界面，并且提高用户体验。 ### 回答3： Qt是一个强大的C++跨平台框架，自带了很多常用的UI控件，但是有时候我们也需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值