qt实现一个简单的仪表盘

代码结构 其中dialplate 在Forms中 右键add new Qt–qt设计师界面类


下一步 类名 dialpate 下一步 完成

我这里类名都是小写的 注意一下
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

// 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

// 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

#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->hSider_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->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->hSider_dialPlate->setMaximum(scale*this->ui->dialPlate->getBigDivided());
    this->ui->dialPlate->setScale(scale);
    this->ui->dialPlate->update();
}

在mainwindow.ui中


这个框是QWidget 名字是dialPlate 右键提升为 吧 dialPlate放进去

其他控件名字分别是 第一个是Slider 后面三个是QSpinBox
hSider_dialPlate spbx_bigDivided spbx_smallDivided spbx_scale

左边三个控件虽然没用到 但是不得不加上 一个Spin Box 两个 PushButton
名字分别是spbx_maxValue btn_add btn_sub
（图片怎么去水印 我完全不想加水印）

效果显示

代码参考：https://blog.csdn.net/qq_20792765/article/details/109768594
他这个文章我稍微改了一点点