QT绘制仪表盘

已于 2024-07-24 14:48:29 修改
阅读量3.7k 收藏 32
点赞数 8
分类专栏： Qt 文章标签： Qt
于 2019-09-05 13:48:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TanChengkai/article/details/100556265
版权
本文分享了一个使用Qt库绘制仪表盘的Demo，通过继承QLabel并重写paintEvent函数，实现了仪表盘的显示。代码中setCurrentAndMaxNum函数可控制刻度值。此示例旨在记录和分享，帮助Qt开发者实现类似功能。
摘要由CSDN通过智能技术生成

最近在整理代码，发现以前写的绘制仪表盘Demo，特发出记录下。

显示的效果如下：

直接上代码：

#ifndef T3DASHBOARD_H
#define T3DASHBOARD_H

/**
  ******************************************************************************
  * 公司    T3
  * 文件名  T3DashBoard.h
  * 作者    TanChengkai
  * 版本    V1.0.0
  * 日期    2018.09.28
  * 说明    定制仪表盘Label类
  * 使用    只需要将自己的QLabel提升为该类（T3DashBoard），调用setCurrentAndMaxNum函数
  *        即可以调节仪表盘刻度
  ******************************************************************************
*/

#include <QLabel>
#include <QPainter>
#include <QDebug>

class T3DashBoard : public QLabel
{
public:
    explicit T3DashBoard(QWidget *parent=Q_NULLPTR);
    ~T3DashBoard();

    /**
     * @brief setCurrentAndMaxNum   设置仪表盘的当前值以及最大值
     * @param current               当前值
     * @param MaxNum                最大值
     */
    void setCurrentAndMaxNum(int current,int MaxNum);

private:

    void paintEvent(QPaintEvent *);

    void resizeEvent(QResizeEvent*);

    int         _currentScale;          //当前值与最大值的比值（百分比）
    int         _currentNum;            //当前值
    int         _MaxNum;                //最大值
};

#endif // T3DASHBOARD_H

#include "T3DashBoard.h"

T3DashBoard::T3DashBoard(QWidget *parent)
    :QLabel(parent)
{
    _currentScale = 0;
    _currentNum = 0;
    _MaxNum = 100;
}

T3DashBoard::~T3DashBoard()
{

}

void T3DashBoard::setCurrentAndMaxNum(int current, int MaxNum)
{
    if(current < 0 || MaxNum <= 0 || current > MaxNum)
        return;
    _currentNum = current;
    _MaxNum = MaxNum;
    _currentScale = _currentNum*100/_MaxNum;
    update();
}

void T3DashBoard::paintEvent(QPaintEvent *)
{

    QPainter painter(this);
    //反走样
    painter.setRenderHint(QPainter::Antialiasing);
    //使用平滑的pixmap变换算法(双线性插值算法),而不是近邻插值算法
    painter.setRenderHint(QPainter::SmoothPixmapTransform);

    //label的宽高
    int w_ = this->rect().width();
    int h_ = this->rect().height();

    int ww_ = /*10*/w_/20;//仪表盘进度条的宽度

    //仪表盘背景进度条
    painter.setPen(QPen(QColor(96,88,153),ww_*2,Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
    painter.setBrush(QColor(96,88,153));
    painter.drawArc(ww_,ww_,w_ - 2*ww_,h_ - 2*ww_,210*16,-1*240*16);

    //仪表盘背景刻度
    painter.translate(w_/2,h_/2);//变化坐标系原点
    painter.save();//保存坐标系（此处为中心）
    painter.rotate(60);
    int linepenwidth_ = w_/300;
    linepenwidth_ ++;
//    qDebug()<<linepenwidth_;
    painter.setPen(QPen(QColor(160,175,209),linepenwidth_));
    int linewidth_ = w_/2 - 2*ww_ - ww_/2;
    for(int i = 0; i <= 100; i ++) {
        if(i%5 == 0) {
            painter.drawLine(0,linewidth_ - ww_,0,linewidth_);
        } else {
            painter.drawLine(0,linewidth_ - ww_*7/10,0,linewidth_);
        }
        painter.rotate(2.4);
    }
    painter.restore();//回到保存的坐标系原点（此处为中心）

    //绘画表针
    int current_ = _currentScale;
    if(current_ < 0 || current_ > 100)
        current_ = 0;
    painter.rotate(60 + _currentScale*2.4);
    int handLength_ = w_/2 - 4*ww_;
    QPolygon pts;
    pts.setPoints(4, 0,handLength_,-ww_*2/5,ww_*2,0,0, ww_*2/5,ww_*2);
    QLinearGradient rad2(0,handLength_,0,0);
    rad2.setColorAt(0,QColor(/*83,211,233*/117,230,228));
    rad2.setColorAt(0.5,QColor(124,181,232));
    rad2.setColorAt(1,QColor(/*218,119,244*/202,165,239));
    rad2.setSpread(QGradient::RepeatSpread);
    painter.setPen(Qt::NoPen);
    painter.setBrush(rad2);
    painter.drawConvexPolygon(pts);

    QLinearGradient rad3(0,-ww_/2 - 2,0,ww_/2 + 2);
    rad3.setColorAt(0,QColor(/*83,211,233*/117,230,228));
    rad3.setColorAt(0.5,QColor(124,181,232));
    rad3.setColorAt(1,QColor(/*218,119,244*/202,165,239));
    rad3.setSpread(QGradient::RepeatSpread);
    painter.setPen(Qt::NoPen);
    painter.setBrush(rad3);
    painter.drawEllipse(-ww_/2,-ww_/2,ww_,ww_);

    painter.rotate(-(60 + _currentScale*2.4));
    //返回原来坐标系
    painter.translate(-w_/2,-h_/2);

    //“电池已使用时长”文字
    painter.setPen(QPen(QColor(138,155,192),2));
    QFont font1;
    font1.setPointSize(ww_*0.9);
    painter.setFont(font1);
    painter.drawText((w_/2 - ww_*4),h_-2*ww_,ww_*8,2*ww_,Qt::AlignCenter,"电池已使用时长");

    if(_currentScale < 0 || _currentScale > 100)
        return;
    //仪表盘当前进度条
    int radius_ = w_/2 - ww_;
    int h1_ = radius_/2 + ww_ + h_/2;
    QPointF p1(0,h1_);
    QPointF p2;
    float x1_;
    if(_currentScale < 25) {
        x1_ = (w_ * 25)/100.0 + ww_;
    } else {
        x1_ = (w_ * _currentScale)/100.0 + ww_;
    }
    float y1_;
    if(_currentScale < 50) {
        y1_ = h1_ - h1_*_currentScale/50 - ww_;
    } else {
        y1_ = 0;
    }
    p2.setX(x1_);
    p2.setY(y1_);
    //设置渐变色
    QLinearGradient rad(p1,p2);
    rad.setColorAt(0,QColor(/*83,211,233*/117,230,228));
    rad.setColorAt(0.5,QColor(124,181,232));
    rad.setColorAt(1,QColor(/*218,119,244*/202,165,239));
    rad.setSpread(QGradient::RepeatSpread);

    painter.setPen(QPen(rad,ww_*2,Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
    painter.setBrush(rad);
    painter.drawArc(ww_,ww_,w_ - 2*ww_,h_ - 2*ww_,210*16,-1*240*16*_currentScale/100);

    //仪表盘显示表盘数字
#if 0
    painter.translate(w_/2,h_/2);
    QLinearGradient rad11(-(w_/2 - ww_*4),0,w_/2 - ww_*4,0);
    rad11.setColorAt(0,QColor(/*83,211,233*/117,230,228));
    rad11.setColorAt(0.5,QColor(124,181,232));
    rad11.setColorAt(1,QColor(/*218,119,244*/202,165,239));
    rad11.setSpread(QGradient::RepeatSpread);
    painter.setPen(QPen(rad,2,Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
    painter.setBrush(rad);

    QFont font22;
    font22.setPointSize((w_/2 - ww_*4)*0.25);
    painter.setFont(font22);

    painter.drawText(-(w_/2 - ww_*4),-ww_*2,w_/2 - ww_*4 + ww_/2,ww_*2,Qt::AlignCenter,QString::number(_currentNum));
    painter.drawLine(2*ww_,-ww_*2,-2*ww_,ww_*2);
    painter.drawText(- ww_/2,0,w_/2 - ww_*4 + ww_/2,ww_*2,Qt::AlignCenter,QString::number(_MaxNum) + "h");
#endif
    //设置当前值文字及最大值文字
    painter.translate(w_/2,h_/2 + h_/4 + ww_);
    int numWidth_ = w_/2 - ww_*4;
    QLinearGradient rad1(-(numWidth_),0,numWidth_,0);
    rad1.setColorAt(0,QColor(/*83,211,233*/117,230,228));
    rad1.setColorAt(0.5,QColor(124,181,232));
    rad1.setColorAt(1,QColor(/*218,119,244*/202,165,239));
    rad1.setSpread(QGradient::RepeatSpread);
    painter.setPen(QPen(rad,2,Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
    painter.setBrush(rad);
    QFont font;
    font.setPointSize((ww_*2)*0.8);
    painter.setFont(font);
    painter.drawText(-numWidth_,-ww_,numWidth_,ww_*2,Qt::AlignCenter,QString::number(_currentNum) + "h");
    painter.drawLine(ww_/2,-ww_,-ww_/2,2*ww_);
    painter.drawText(0,0,numWidth_,ww_*2,Qt::AlignCenter,QString::number(_MaxNum) + "h");
}

void T3DashBoard::resizeEvent(QResizeEvent *)
{
    int w_ = this->width();
    int h_ = this->height();
    if(w_ > h_) {
        this->resize(w_,w_);
    } else if(w_ < h_) {
        this->resize(h_,h_);
    }
    update();
}

其中paintEvent函数，就是绘制仪表盘的重点。

在使用时，只需要将自己UI界面上的QLabel类提升为T3DashBoard类，调用类中的setCurrentAndMaxNum函数，可以控制当前刻度值及设置最大刻度值。

结尾

只为记录，只为分享! 愿所写能对你有所帮助。不忘记点个赞，谢谢~

TanChengkai
关注
专栏目录
Qt绘制的多彩仪表盘
10-28
Qt绘制的多彩仪表盘简单Demo，指针所指向的面积划过的区域设置填充渐变，相对比较漂亮，Qt5下载直接编译运行，源码可见
QT做的一个仪表盘界面
08-29
在VS2005上做的，可以直接移植到WINCE上，也可以再windows下运行，用了双缓冲的技术，来实现指针动态变化，运行比较流畅。
Qt实现仪表盘-自定义控件
最新发布
u012959478的博客
07-14 1767
仪表盘在很多汽车和物联网相关的系统中很常用，本文就来介绍一下Qt仪表盘的实现示例。使用Qt绘制一个仪表盘，用来显示当前的温度，绘制刻度、绘制数字、绘制温度指针。仪表盘全程使用QPainter进行绘制。
用Qt画一个仪表盘
m0_73443478的博客
04-03 1379
用Qt画一个仪表盘
Qt 绘制仪表盘
热门推荐
脚踏实地，仰望星空
03-17 1万+
1. 首先准备素材，一个表盘，一个指针 2. 计算旋转圆心及转动角度 通过画图软件测量一下表盘中心的坐标，及指针中心的坐标 大概表盘的中心为（163，163），同样指针的中心位置为（14，110） 转动角度可以大概测量一下，应该为（－120，120）度3. 转动操作 有了这些数据就可以来绘制表盘了//设置表盘的中心 #define CenterPoint_X 163 #defin
Qt：绘制仪表盘
北街末雨Yyg
11-21 3718
Qt：绘制仪表盘
Qt示例1：用Qt画一个仪表盘
DICA的SEOer专栏
03-10 1468
用Qt绘制一个仪表盘示例
qt虚拟仪表表盘的绘制
08-29
使用qt开发的一个虚拟仪表表盘 使用qt开发的一个虚拟仪表表盘
Qt绘制仪表盘
chenyijun的专栏
01-23 1495
在Qt的开发过程中，有些复杂的界面展示需要自动绘制，比如仪表盘的数据变化，都是动态的，而显示的效果只能通过paintEvent事件来自绘，本篇介绍仪表盘的绘制。
基于QT的仪表盘
06-06
基于QT的仪表盘，具有动态延时变化的效果，跟游戏里面开车踩油门的过程一样的效果。
一个用Qt来绘制虚拟仪器仪表
05-09
通过Qt来完成的虚拟仪器仪表，里面集成了速度计、时钟，旋钮等等
Qt编写的速度仪表盘
02-20
使用Qt4编写的动态仪表，注释详细，有详细的文章指导讲解-我的博客《QT实战开发》
qt自绘仪表盘
04-02
qt 仪表盘，非常具有参考价值
QT绘制简易表盘
萧海的博客
06-09 3675
1、简介 最近学习了一下QT，熟悉了一段时间后发现它的功能还是挺强大的，同时也比较方便用户上手去使用。现在就基于最近学习的内容，实现一个简易的带指针旋转功能的表盘。文中表盘的实现是基于QT的QPainter类中的绘图方法，同时外加QT的定时器设计完成的。效果上肯定没有贴图片那么美观，不过两者的设计思想是基本一样的，这里的设计方法可以提供给你一个不错的参考。 2、设计思路 在讲解设计思路前还是先来看下绘制的表盘所实现的效果吧！后面对实现效果进行一步步拆解来讲解，这样或许会更加直观，更便于理解。 我们先不去考
Qt绘制多彩仪表盘（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-28 430
Qt绘制多彩仪表盘（附完整源码）
QTmeter_qt仪表盘_QT仪表_QT简单仪表盘_qt虚拟仪表_QT仪表_
09-30
在"QT仪表盘"中，开发者通常会利用Qt的图形绘制功能，如QPainter类，来创建各种仪表盘元素，如指针、刻度、数字显示等。这些元素可以通过自定义控件或QGraphicsView/QGraphicsItem实现。Qt的信号与槽机制使得实时...
qt mainWindows绘制温度仪表盘
05-10
要在Qt的MainWindow上绘制温度仪表盘，可以使用Qt的绘图类QPainter和QPaintEvent事件。以下是实现的基本步骤： 1. 在MainWindow的头文件中声明一个函数，用于绘制温度仪表盘。 ```cpp protected: void paintEvent(QPaintEvent *event); ``` 2. 在cpp文件中实现这个函数，使用QPainter绘制温度仪表盘。 ```cpp void MainWindow::paintEvent(QPaintEvent *event) { // 创建QPainter对象 QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 设置抗锯齿 // 定义变量 int side = qMin(width(), height()); // 获取窗口的最小边长 int x = (width() - side) / 2; int y = (height() - side) / 2; int radius = side / 2; // 绘制圆盘 painter.translate(x, y); // 将坐标系移动到中心点 painter.setPen(Qt::NoPen); painter.setBrush(Qt::white); painter.drawEllipse(QPointF(0, 0), radius, radius); // 绘制刻度 painter.setPen(QPen(Qt::black, 2)); // 设置画笔 painter.save(); // 保存坐标系状态 for(int i = 0; i <= 360; i += 10) { painter.rotate(10); // 旋转坐标系 if(i % 30 == 0) { painter.drawLine(0, radius - 20, 0, radius - 40); // 绘制长刻度线 painter.drawText(-10, radius - 60, QString::number(i / 30)); // 绘制刻度值 } else { painter.drawLine(0, radius - 20, 0, radius - 30); // 绘制短刻度线 } } painter.restore(); // 恢复坐标系状态 // 绘制指针 painter.save(); // 保存坐标系状态 painter.rotate(225); // 旋转坐标系 painter.setPen(QPen(Qt::red, 5)); // 设置画笔 painter.drawLine(0, 0, radius - 40, 0); // 绘制指针 painter.restore(); // 恢复坐标系状态 } ``` 3. 在MainWindow的构造函数中启用Qt的自动填充背景色功能。 ```cpp MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { setAttribute(Qt::WA_StyledBackground, true); } ``` 现在，当MainWindow被绘制时，温度仪表盘将自动绘制在窗口中央。可以通过更改指针的旋转角度来模拟不同的温度值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值