码上通QT实战11--监控页面03-绘制湿度盘和亮度盘

1、前言

Qt中绘制湿度盘的方法

在Qt中绘制湿度盘（如圆形湿度计或扇形指示器）可以通过自定义绘图实现，主要使用QPainter类。以下是实现方式：

使用QPainter绘制扇形湿度盘

cpp 复制代码

void HumidityWidget::paintEvent(QPaintEvent *event) {
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    
    // 设置圆心和半径
    QPointF center(width()/2, height()/2);
    qreal radius = qMin(width(), height())/2 - 10;
    
    // 绘制背景圆
    painter.setPen(Qt::NoPen);
    painter.setBrush(QColor(220, 220, 220));
    painter.drawEllipse(center, radius, radius);
    
    // 根据湿度值绘制扇形（0-100%对应0-360度）
    qreal humidity = 65.0; // 示例湿度值
    qreal spanAngle = -humidity * 3.6; // 顺时针方向
    
    painter.setBrush(QColor(100, 150, 255));
    painter.drawPie(QRectF(center.x()-radius, center.y()-radius, radius*2, radius*2), 
                   90 * 16, // 起始角度（12点钟方向为0度，需要偏移90度）
                   spanAngle * 16); // Qt中1度=16单位
}

添加刻度标记和文本

在基础扇形上增加刻度线：

cpp 复制代码

// 绘制刻度线（每10%一个刻度）
for (int i = 0; i <= 10; ++i) {
    qreal angle = 90 - i * 36; // 从顶部开始
    QPointF start = center + QPointF(radius * cos(angle * M_PI/180), 
                                    -radius * sin(angle * M_PI/180));
    QPointF end = center + QPointF((radius-10) * cos(angle * M_PI/180), 
                                  -(radius-10) * sin(angle * M_PI/180));
    painter.drawLine(start, end);
}

使用QStyleOptionSlider实现（进阶）

如果需要交互功能，可继承QSlider并重写paintEvent：

cpp 复制代码

void HumiditySlider::paintEvent(QPaintEvent *) {
    QStyleOptionSlider opt;
    initStyleOption(&opt);
    opt.subControls = QStyle::SC_SliderGroove | QStyle::SC_SliderHandle;
    style()->drawComplexControl(QStyle::CC_Slider, &opt, painter, this);
    
    // 自定义绘制圆形轨道
    painter.drawArc(trackRect, 90*16, -value()*3.6*16);
}

以上方法可根据实际需求组合使用，通过调整颜色、渐变和动画效果可增强可视化表现。

2、这么干

1、修改代码

完整代码

cpp 复制代码

#include "meter.h"
#include <QPaintEvent>
#include <QPainter>
#include <QtMath>


Meter::Meter(QWidget *parent)
    : QWidget{parent}
{
    // m_maximum=100;
    // m_minimum=0;
    // m_value=28;
    // m_unit="单位";
    // m_header="温度";
}

//重绘窗体
void Meter::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setPen(QColor(0,0,0,0));

    //1、渲染尺寸
    int diameter=qMin(this->size().width(),this->size().height());//获取长度和宽度，取两者最小值
    qreal radius=diameter/2;//圆的半径

    //2、中心点
    QPointF center(this->size().width()/2,this->size().height()/2);//圆心坐标

    //3、底盘:径向渐变
    // painter.setPen(Qt::black);
    painter.setPen(Qt::transparent);//透明
    QRadialGradient gradient(center.x(),center.y(),radius,center.x(),center.y());
    gradient.setColorAt(0,QColor(62,155,253,60));
    gradient.setColorAt(1,QColor(33,97,216,0));
    painter.setBrush(gradient);
    painter.drawEllipse(center,radius,radius);

    //4、刻度线
    int min=this->m_minimum,max=m_maximum;
    int count=10,start_num=min;
    //     270/100 = 2.7//刻度盘角度范围为270度

    QPen pen_line(QColor("#222363DA"),2);
    QPen pen_text(QColor("#992363DA"));

    //循环产生刻度值，
    for(int i=0;i<=100;i++){
        qreal angle=i*2.7+135;//每个刻度偏转135度

        painter.setPen(pen_line);
        // 当i的值
        int offset=7;
        //每隔10个刻度线绘制一个长一点的不同颜色的刻度线
        if(i%10==0){
            QPen pen_line2(QColor(255,0,0,125),2);//设置颜色
            painter.setPen(pen_line2);
            offset=12;
        }
        //每隔5个刻度线绘制一个短一点的不同颜色的刻度线
        else if(i%5==0)
        {
            QPen pen_line3(QColor(Qt::darkGreen),1);//设置颜色
            painter.setPen(pen_line3);
            offset=8;
        }
        //计算两个点的坐标值
        qreal x1= center.x()+ qCos(angle*M_PI/180)*(radius-2);
        qreal y1= center.y()+ qSin(angle*M_PI/180)*(radius-2);
        qreal x2= center.x()+ qCos(angle*M_PI/180)*(radius-offset);
        qreal y2= center.y()+ qSin(angle*M_PI/180)*(radius-offset);
        painter.drawLine(QPointF(x1,y1),QPointF(x2,y2));//绘制刻度线

        // 每隔10个绘制刻度值文字
        if(i%10==0){
            painter.setPen(pen_text);
            qreal x= center.x()+ qCos(angle*M_PI/180)*(radius-22)-6;//文字X位置
            qreal y= center.y()+ qSin(angle*M_PI/180)*(radius-22)+3;//文字Y位置
            painter.setFont(QFont("Microsoft YaHei",9));//字体及大小
            painter.drawText(QPointF(x,y),QString::number(start_num));//绘制刻度值的文字
            start_num+=10;
        }
    }

    // 指针
    qreal value=this->value()-this->minimum();
    qreal v_angle=value*2.7+135;
    qreal p_angle_1=v_angle-90;
    qreal p_angle_2=v_angle+90;

    qreal x_v=qCos(v_angle*M_PI/180)*(radius-5)+center.x();
    qreal y_v=qSin(v_angle*M_PI/180)*(radius-5)+center.y();

    qreal x_p1=qCos(p_angle_1*M_PI/180)*2+center.x();
    qreal y_p1=qSin(p_angle_1*M_PI/180)*2+center.y();

    qreal x_p2=qCos(p_angle_2*M_PI/180)*2+center.x();
    qreal y_p2=qSin(p_angle_2*M_PI/180)*2+center.y();

    QPointF points[3]{
        QPointF(x_p1,y_p1),
        QPointF(x_v,y_v),
        QPointF(x_p2,y_p2)
    };
    // 通过多边形方法进行指针的绘制（三角形）
    painter.setPen(QPen(Qt::red,1));
    painter.setBrush(Qt::red);
    painter.drawPolygon(points,3);


    // 当前数值背景圆
    painter.setPen(QPen(QColor(0,0,0,33),3));
    QRadialGradient gradient_center(center.x(),center.y(),20,center.x(),center.y());
    gradient_center.setColorAt(0,QColor("#2F7CE9"));
    gradient_center.setColorAt(1,QColor("#3E9BFC"));
    painter.setBrush(gradient_center);
    painter.drawEllipse(center,20,20);

    // 当前值
    painter.setPen(Qt::white);
    painter.setFont(QFont("Microsoft YaHei",14));
    painter.drawText(this->rect(),Qt::AlignCenter,QString::number(this->value()));

    // 单位和标题
    painter.setFont(QFont("Microsoft YaHei",8));
    painter.setPen(QPen("#990146AE"));
    painter.drawText(QRect(0,0,this->rect().width(),this->rect().height()-25),
                     Qt::AlignHCenter|Qt::AlignBottom,this->m_unit);
    painter.drawText(QRect(0,0,this->rect().width(),this->rect().height()-10),
                     Qt::AlignHCenter|Qt::AlignBottom,this->m_header);


}

这里面的细节很多，整体逻辑是这样的，要修改颜色之类的可以直接改，paintEvent 是 Qt 中 QWidget 及其子类的核心事件处理函数之一，用于处理控件的绘制逻辑。当控件需要重绘时（如窗口首次显示、尺寸变化、调用 update() 或 repaint()），系统会自动触发此事件。

2、提升部件

在Qt框架中，提升部件（Promoted Widgets）是一种将基础控件（如QWidget、QPushButton等）转换为自定义派生类的方法。通过这种方式，可以在Qt Designer中直接使用自定义类，而无需手动编写代码创建实例。通过提升部件，Qt Designer的界面设计与代码逻辑实现高效结合，提升开发效率。提升部件的作用

复用性：将自定义控件封装为可重复使用的组件。
可视化设计：在Qt Designer中直接拖放基础控件，并通过提升机制替换为自定义类。
简化开发：避免手动实例化自定义控件，减少代码量。

3、运行效果

4、小结

QPainter 是 Qt 中用于二维图形绘制的核心类，支持在 QWidget、QPixmap、QImage 等设备上绘制图形、文本和图像。

复制代码

原创不易，打字不易，截图不易，撸码不易，整理不易，走过路过，不要错过，欢迎点赞，收藏，转载，复制，抄袭，留言，灌水，请动动你的金手指，祝您早日实现财务自由。