Qt自定义控件绘制仪表盘

最新推荐文章于 2025-03-13 07:28:28 发布
最新推荐文章于 2025-03-13 07:28:28 发布
阅读量2.1k 收藏 68
点赞数 6
文章标签： qt c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20792765/article/details/109768594
版权

@QT开发自定义控件表盘实例
新建一个QT项目，我的为MyControl，右击MyControl选择Add New，然后按照后面的图片创建一个新的类，最后项目下就出现了dialplate.h,dialplate.cpp,dialplate.ui三个文件。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

下面是dialplate.h中的代码：

// An highlighted block
#ifndef DIALPLATE_H
#define DIALPLATE_H

#include <QWidget>
#include<QPainter>

namespace Ui {
class DialPlate;
}

class DialPlate : public QWidget
{
    Q_OBJECT

public:
    explicit DialPlate(QWidget *parent = nullptr);
    ~DialPlate();
    void paintEvent(QPaintEvent *event);//系统自动调用
    int getBigDivided() const;
    void setBigDivided(int value);

    int getSmallDivided() const;
    void setSmallDivided(int value);

    int getScale() const;
    void setScale(int value);

    int getValue() const;
    void setValue(int value);

private:
    Ui::DialPlate *ui;
    double centerRadius;//表盘中心圆半径
    double inRadius;//表盘内圆半径
    double midRadius;//表盘中间圆半径
    double outRadius;//表盘最外圆半径
    int bigDivided;//大刻度等分数
    int smallDivided;//小刻度等分数
    int scale;//倍率
    int scaleCount;//scale的位数
    int value;//刻度盘的值
    void SetParamsInit();
    void SetOtherBackground(QPainter *painter);
    void DrawPlate(QPainter *painter);
    void DrawRing(QPainter *painter,QColor backColor, QColor ringColor,double inRadius,double outRadius);
    void DrawScale(QPainter *painter);
    void DrawText(QPainter *painter);
    void DrawNeedle(QPainter *painter);
    void DrawArcRing(QPainter *painter);
    void DrawValue(QPainter *painter);
};

#endif // DIALPLATE_H

下面是dialplate.cpp中的代码：程序中的一些具体数字是我根据340*340大小调整出来的，大家也可以自己试着调整自己的比例。

// An highlighted block
#include "dialplate.h"
#include "ui_dialplate.h"
#include"math.h"

#include<QDebug>
#include<cmath>

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

    bigDivided=10;
    smallDivided=10;
    scale=1;
    scaleCount=1;
    value=0;
}

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

void DialPlate::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);//声明一个画家对象
    painter.setRenderHint(QPainter::Antialiasing);//抗锯齿形
    //初始化参数设置
    this->SetParamsInit();
    //填充表盘周围为透明色
    this->SetOtherBackground(&painter);
    //画表盘
    this->DrawPlate(&painter);
}

int DialPlate::getValue() const
{
    return value;
}

void DialPlate::setValue(int value)
{
    this->value = value;
}

int DialPlate::getScale() const
{
    return scale;
}

void DialPlate::setScale(int value)
{
    this->scale = value;
}

int DialPlate::getSmallDivided() const
{
    return smallDivided;
}

void DialPlate::setSmallDivided(int value)
{
    this->smallDivided = value;
}

int DialPlate::getBigDivided() const
{
    return bigDivided;
}

void DialPlate::setBigDivided(int value)
{
    this->bigDivided = value;
}
//初始化参数设置
void DialPlate::SetParamsInit()
{
    centerRadius=(this->width()-290/340.0*this->width())/2;
    inRadius=(this->width()-76/340.0*this->width())/2;
    midRadius=(this->width()-38/340.0*this->width())/2;
    outRadius=(this->width()-14/340.0*this->width())/2;
}
//设置表盘周围为透明色
void DialPlate::SetOtherBackground(QPainter *painter)
{
    painter->save();
    painter->setBrush(Qt::transparent);
    painter->fillRect(this->rect(),QColor(0,0,0,0));
    painter->restore();
}
//画表盘
void DialPlate::DrawPlate(QPainter *painter)
{
    //画最外环
    DrawRing(painter,QColor(240,240,240), QColor(100,100,100),midRadius,outRadius);
    //画中间黑环
    DrawRing(painter,QColor(240,240,240), QColor(0,0,0),inRadius,midRadius);    
    //画小环
    DrawRing(painter,QColor(240,240,240), QColor(100,100,100),centerRadius,inRadius);
    //画刻度
    DrawScale(painter);
    //画黄色指示条
    DrawArcRing(painter);
    //画中心点圆
    DrawRing(painter,QColor(240,240,240), QColor(233,123,90),0,centerRadius);
    //画数字
    DrawText(painter);
    //画指针
    DrawNeedle(painter);
    //画值
    DrawValue(painter);
}
//画圆环
void DialPlate::DrawRing(QPainter *painter,QColor backColor, QColor ringColor, double inRadius, double outRadius)
{
    QBrush qbrush(ringColor);
    painter->setBrush(qbrush);
    painter->drawEllipse(QPointF(this->width()/2.0,this->height()/2.0),outRadius,outRadius);
    qbrush.setColor(backColor);
    painter->setBrush(qbrush);
    painter->drawEllipse(QPointF(this->width()/2.0,this->height()/2.0),inRadius,inRadius);

}
//画刻度
void DialPlate::DrawScale(QPainter *painter)
{
    QPen qpen(Qt::white);
    double startRadius;//起点半径
    double endRadius=midRadius;//终点半径
    //绘制刻度
    for(int i=0;i<=bigDivided*smallDivided;i++)
    {
        if(i%smallDivided==0)
        {
            startRadius=inRadius;//大刻度
            qpen.setWidthF(2.5);
        }
        else
        {
            startRadius=inRadius+(midRadius-inRadius)/2;//小刻度
            qpen.setWidthF(1.5);
        }
        painter->setPen(qpen);
        //起点坐标
        double xPosStart=this->width()/2+startRadius*cos(3.14*3/4+i*3.14*3/2/bigDivided/smallDivided);
        double yPosStart=this->height()/2+startRadius*sin(3.14*3/4+i*3.14*3/2/bigDivided/smallDivided);
        //终点坐标
        double xPosEnd=this->width()/2+endRadius*cos(3.14*3/4+i*3.14*3/2/bigDivided/smallDivided);
        double yPosEnd=this->height()/2+endRadius*sin(3.14*3/4+i*3.14*3/2/bigDivided/smallDivided);
        painter->drawLine(QPointF(xPosStart,yPosStart),QPointF(xPosEnd,yPosEnd));
    }

}
//画数字
void DialPlate::DrawText(QPainter *painter)
{
    //计算scale是几位数
    int scaleCount=1;
    int tempScale=scale;
    while (tempScale/10)
    {
        scaleCount++;
        tempScale/=10;
    }
    int fontSize=30-3*scaleCount;
    QPen qpen(Qt::green);
    qpen.setWidthF(1.0);
    painter->setPen(qpen);
    QFont font=painter->font();
    font.setPixelSize(fontSize);
    painter->setFont(font);
    double textRadius=inRadius-30;
    for(int i=0;i<=bigDivided;i++)
    {
        double xPosText=this->width()/2+textRadius*cos(3.14*3/4+i*3.14*3/2/bigDivided);
        double yPosText=this->height()/2+textRadius*sin(3.14*3/4+i*3.14*3/2/bigDivided);
        QRectF textQRect(xPosText-25,yPosText-12,50,24);
        painter->drawText(textQRect,Qt::AlignCenter,QString::number(i*scale));
    }

}
//画指针
void DialPlate::DrawNeedle(QPainter *painter)
{
    double needleRadius=this->width()/2-90/340.0*this->width();
    double needleCenterRadius=centerRadius-16/340.0*this->width();
    //画指针的圆
    DrawRing(painter,Qt::red, Qt::red,0,needleCenterRadius+4);
    double biggestValue=bigDivided*scale;
    //超出量程则显示为最大值
    if(value>biggestValue)
    {
        value=bigDivided*scale;
    }
    //指针三角形的三个点坐标
    double xPosNeedle0=this->width()/2+needleRadius*cos(3.14*3/4+value/biggestValue*3.14*3/2);
    double yPosNeedle0=this->height()/2+needleRadius*sin(3.14*3/4+value/biggestValue*3.14*3/2);
    double xPosNeedle1=this->width()/2+needleCenterRadius*cos(3.14*3/4+value/biggestValue*3.14*3/2+3.14/2);
    double yPosNeedle1=this->height()/2+needleCenterRadius*sin(3.14*3/4+value/biggestValue*3.14*3/2+3.14/2);
    double xPosNeedle2=this->width()/2+needleCenterRadius*cos(3.14*3/4+value/biggestValue*3.14*3/2-3.14/2);
    double yPosNeedle2=this->height()/2+needleCenterRadius*sin(3.14*3/4+value/biggestValue*3.14*3/2-3.14/2);
    //画三角形
    QPen qpen(Qt::red);
    QBrush qbrush(Qt::red);
    painter->setPen(qpen);
    painter->setBrush(qbrush);
    QPointF points[3]={QPointF(xPosNeedle0,yPosNeedle0),QPointF(xPosNeedle1,yPosNeedle1),
                       QPointF(xPosNeedle2,yPosNeedle2)};
    painter->drawPolygon(points,3);
}
//画黄色刻度条上的环形指示带(两个扇形相减）
void DialPlate::DrawArcRing(QPainter *painter)
{
    //画黄色扇形
    QBrush qbrush(QColor(255,255,0,100));
    QPen qpen(QColor(255,255,0,100));
    painter->setBrush(qbrush);
    painter->setPen(qpen);
    QRectF outRect(19/340.0*this->width(),19/340.0*this->height(),2*midRadius,2*midRadius);
    int startAngle=225*16;
    int endAngle=(int)(225+(value/(double)(bigDivided*scale))*270)*16;
    int spanAngle=startAngle-endAngle;//角度差(默认为逆时针，负数则为顺时针）
    painter->drawPie(outRect,startAngle,spanAngle);
    //画减去部分的扇形
    QRectF inRect(38/340.0*this->width(),38/340.0*this->height(),2*inRadius,2*inRadius);
    qbrush.setColor(QColor(100,100,100));
    qpen.setColor(QColor(100,100,100));
    painter->setBrush(qbrush);
    painter->setPen(qpen);
    painter->drawPie(inRect,startAngle,spanAngle+(-16));//为了完全减去黄色内部区域，多减一个单位(16)
}
//在表盘上显示数值
void DialPlate::DrawValue(QPainter *painter)
{
    //计算scale是几位数
    int scaleCount=1;
    int tempScale=scale;
    while (tempScale/10)
    {
        scaleCount++;
        tempScale/=10;
    }
    int fontSize=30-3*scaleCount;
    QBrush qbrush(Qt::blue);
    QPen qpen(Qt::blue);
    QFont font=painter->font();
    font.setPixelSize(fontSize);
    painter->setFont(font);
    painter->setBrush(qbrush);
    painter->setPen(qpen);
    QRectF valueRect(this->width()/2-25,this->height()/2+90/340.0*this->width(),50,30);
    painter->drawText(valueRect,Qt::AlignCenter,QString::number(value));
}

然后在mainwindow.h文件中添加如下代码，程序中form不用管，那是另一个自定义控件进度条的程序，

// An highlighted block
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include"form.h"
#include"dialplate.h"

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    //Form
    Form *myForm;
    int value=1;
    int maxValue=10;
    
    //DialPlate
    DialPlate *myDialPlate;

private slots:
    //Form
    void addValue();
    void subValue();
    void setMaxValue(int maxValue);
    //DialPlate
    void setDialPlateValue(int value);
    void setBigDivided(int bigDivided);
    void setSmallDivided(int smallDivided);
    void setScale(int scale);
};

#endif // MAINWINDOW_H

在mainwindow.ui中添加一个widget控件，选择widget控件右击选择提升为，然后根据图片填写类名，再点击添加和提升就可以了。将widget控件的name属性改为dialPlate。再添加几个控制控件。用于控制输入表盘的值，粗刻度数，细刻度数和量程的倍率。它们的name属性分别为：hSlider_dialPlate，spbx_bigDivided，spbx_smallDivided，spbx_scale。
在这里插入图片描述
在这里插入图片描述

再mainwindow.cpp中添加如下代码，同样不用管Form的代码，只添加DialPlate的代码。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QDebug>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //Form
    connect(this->ui->btn_add,&QPushButton::clicked,this,&MainWindow::addValue);
    connect(this->ui->btn_sub,SIGNAL(clicked()),this,SLOT(subValue()));
    connect(this->ui->spbx_maxValue,SIGNAL(valueChanged(int)),this,SLOT(setMaxValue(int)));

    //DialPlate
    connect(this->ui->hSlider_dialPlate,&QSlider::valueChanged,this,&MainWindow::setDialPlateValue);
    connect(this->ui->spbx_bigDivided,SIGNAL(valueChanged(int)),this,SLOT(setBigDivided(int)));
    connect(this->ui->spbx_smallDivided,SIGNAL(valueChanged(int)),this,SLOT(setSmallDivided(int)));
    connect(this->ui->spbx_scale,SIGNAL(valueChanged(int)),this,SLOT(setScale(int)));
}

MainWindow::~MainWindow()
{
    delete ui;
}
//Form
void MainWindow::addValue()
{
    if(value<this->ui->ProgressBar->getMaxValue())
    {
        this->ui->ProgressBar->setValue(++value);
        //qDebug()<<value;
        this->ui->ProgressBar->update();
    }
}

void MainWindow::subValue()
{
    if(value>0)
    {
        this->ui->ProgressBar->setValue(--value);
        //qDebug()<<value;
        this->ui->ProgressBar->update();
    }

}

void MainWindow::setMaxValue(int maxValue)
{
    this->ui->ProgressBar->setMaxValue(maxValue);
    this->ui->ProgressBar->update();
}

//DialPlate
void MainWindow::setDialPlateValue(int value)
{
    this->ui->dialPlate->setValue(value);
    this->ui->dialPlate->update();//手动调用控件的OnPaint方法
}

void MainWindow::setBigDivided(int bigDivided)
{
    this->ui->dialPlate->setBigDivided(bigDivided);
    this->ui->dialPlate->update();
}

void MainWindow::setSmallDivided(int smallDivided)
{
    this->ui->dialPlate->setSmallDivided(smallDivided);
    this->ui->dialPlate->update();
}

void MainWindow::setScale(int scale)
{
    this->ui->hSlider_dialPlate->setMaximum(scale*this->ui->dialPlate->getBigDivided());
    this->ui->dialPlate->setScale(scale);
    this->ui->dialPlate->update();
}

然后点击运行就得到下面的效果啦
在这里插入图片描述
在这里插入图片描述

qq_20792765
关注
Qt自定义控件 -- 仪表盘01
星河的博客
08-17 6711
简介 实现原理 边框绘制 drawFrame(QPainter &amp;amp;amp;painter) 绘制数字 drawNumberIndicator(QPainter &amp;amp;amp;painter) 绘制刻度 drawDividing(QPainter &amp;amp;amp;painter) 绘制数字式速度 drawNumberSpeed(QPainter &amp;amp;amp;painter) 绘制指针 drawIndica...
Qt自定义控件--仪表盘
贝勒里恩的博客
06-02 5499
文章目录一、前言二、效果展示三、绘图过程详解2.1、表盘框架2.2、刻度线2.3、刻度值2.3、数值2.4、指针 一、前言 本篇博客是学习的大佬feiyangqingyun的博客，博客链接，有兴趣的可以去看一下。通过本次学习，让我对Qt的绘图技巧有了很大的提升，万分感谢大佬：飞扬青云 二、效果展示 三、绘图过程详解 我把仪表盘划分为五个部分，分别表盘框架、刻度线、刻度值、数值、指针，下面开始分步讲解。 2.1、表盘框架 表盘框架分为五部分：表盘框架外圆、表盘框架中间圆、表盘框架彩环、表盘框架内圆和中心圆
QT创建仪表盘
最新发布
weixin_60335965的博客
03-13 113
【代码】QT创建仪表盘。
qt自绘仪表盘
04-02
qt 仪表盘，非常具有参考价值
Qt自定义精美的仪表盘控件（汽车仪表、指南针、雷达、摇杆）
Alex_XT的博客
10-30 7172
精美的Qt自定义控件汽车仪表、雷达、摇杆
Qt自定义汽车仪表盘控件
10-28
qt绘制的汽车仪表盘，表盘还是比较漂亮的，使用Qt环形渐变进行表盘外围的颜色值置，简单Demo展示
Qt 自定义控件 云台仪表盘控件
09-18
2. **重写paintEvent()**：在这个方法中，使用QPainter绘制仪表盘的所有元素，包括刻度盘、指针、背景和数值显示。 3. **实现事件处理**：根据需求，重写event()或特定的事件处理函数，如mouseMoveEvent()，以便...
Qt自定义控件绘制仪表盘教程
资源摘要信息:"在本项目中，我们将深入探讨如何使用Qt框架中的QPainter类来绘制一个自定义的仪表盘控件。这个仪表盘将用于显示实时温度数据，包括刻度线、数字标识以及温度指针。" 1. Qt框架介绍 Qt是一个跨平台的...
Qt自定义控件--仪表盘源码
08-17
2. **重写paintEvent()**：为了绘制仪表盘的外观，开发者需要覆盖父类的paintEvent()函数，使用QPainter进行绘图。这包括刻度、指针、背景等元素的绘制。 3. **数据绑定**：仪表盘控件需要能够显示数值，因此可能...
Qt自定义控件实现多彩色仪表盘
12-23
接下来，我们需要绘制仪表盘的各个部分。`drawE`方法用于绘制外环和内环，这里使用了`QPainterPath`来构建路径，通过`arcTo`函数绘制弧形，并使用减法操作来创建不同颜色的扇形区域。例如，红色部分的代码如下： ``...
Qt自定义控件实现简易仪表盘
08-25
Qt自定义控件实现简易仪表盘 Qt是跨平台的应用程序开发框架，它提供了一个强大的工具来创建 GUI 应用程序。 Qt 提供了一个名为 QWidget 的基础控件类，开发者可以通过继承 QWidget 来创建自定义控件。今天，我们将...
Qt绘制的多彩仪表盘
10-28
Qt绘制的多彩仪表盘简单Demo，指针所指向的面积划过的区域设置填充渐变，相对比较漂亮，Qt5下载直接编译运行，源码可见
QT做的一个仪表盘界面
08-29
在VS2005上做的，可以直接移植到WINCE上，也可以再windows下运行，用了双缓冲的技术，来实现指针动态变化，运行比较流畅。
一个用Qt来绘制虚拟仪器仪表
05-09
通过Qt来完成的虚拟仪器仪表，里面集成了速度计、时钟，旋钮等等
QT绘制仪表盘
TanChengkai的博客
09-05 4024
最近在整理代码，发现以前写的绘制仪表盘Demo，特发出记录下。 显示的效果如下： 直接上代码： #ifndef T3DASHBOARD_H #define T3DASHBOARD_H /** ****************************************************************************** * 公司 T3 *...
Qt自绘汽车仪表盘-1
youyicc
09-05 4336
效果图
Qt实现仪表盘-自定义控件
u012959478的博客
07-14 3000
仪表盘在很多汽车和物联网相关的系统中很常用，本文就来介绍一下Qt仪表盘的实现示例。使用Qt绘制一个仪表盘，用来显示当前的温度，绘制刻度、绘制数字、绘制温度指针。仪表盘全程使用QPainter进行绘制。
Qt/C++编写自定义控件1-汽车仪表盘
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
04-19 6996
前言 汽车仪表盘机会是qt写仪表盘控件中最常见的，一般来说先要求美工最好设计图，然后设计效果图给到程序员，由程序员根据效果来实现，主要靠贴图，这种方法有个好处就是做出来的效果比较逼真，和真实效果图基本上保持一致，而且程序员也不会那么累，基本上入门级别的程序员都可以搞定，效率比较高，缺点是如果用户需要更改某个部件的颜色，比如指针的颜色等，需要重新做效果图贴图才能实现，比较麻烦，还有一点就是如果效果图...
Qt 绘制仪表盘
热门推荐
脚踏实地，仰望星空
03-17 1万+
1. 首先准备素材，一个表盘，一个指针 2. 计算旋转圆心及转动角度 通过画图软件测量一下表盘中心的坐标，及指针中心的坐标 大概表盘的中心为（163，163），同样指针的中心位置为（14，110） 转动角度可以大概测量一下，应该为（－120，120）度3. 转动操作 有了这些数据就可以来绘制表盘了//设置表盘的中心 #define CenterPoint_X 163 #defin
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值