QT 实现两款自定义的温度计/湿度控件

文章目录

  • 0 引入
  • 1、带有标尺的温度/湿度计控件
    • 1.头文件
    • 2.核心代码
  • 2、竖起来的温度/湿度计控件
    • 1.头文件
    • 2.实现
  • 3、引用

在这里插入图片描述

0 引入

QT原生控件没有实现如仪表盘或者温度计的控件，只好自己实现，文章代码部分参考引用的文章。直接上图

图一 带有标尺的温度计、湿度带有标尺的温度计、湿度
图二 温度计、湿度

在这里插入图片描述
控件最核心的部分：在函数paintEvent绘制部分，如果需要动画效果还需要加一个QPropertyAnimation ，这是最主要的，剩下的细节根据需求增加减少即可。

1、带有标尺的温度/湿度计控件

因为只做数据显示用，所以只需要向控件传数据即可。
主要功能：1、可设置显示范围；
2、显示过程中加了动画效果；
3、背景色和前景色以及刻度尺颜色可变；
4、刻度尺间距可变，控件大小随着QWidget适应；

1.头文件

代码如下（示例）：

protected:
    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawProgress(QPainter *painter);
    void drawRulerTop(QPainter *painter);
    void drawRulerBottom(QPainter *painter);

private:
    QPropertyAnimation *m_valueAnimation;
    double minValue;                //最小值
    double maxValue;                //最大值
    qreal value;                    //当前值
    int longStep;                   //长线条等分步长
    int shortStep;                  //短线条等分步长
    bool rulerTop;                  //刻度线在上面
    bool isAdd;                     //是否为增加，默认为的增加

    QColor bgColor;                 //背景颜色
    QColor lineColor;               //线条颜色
    QColor progressColor;           //进度颜色

public:
    qreal getValue()               const;
    void setrulerTop(bool istop);   //设定刻度线再上还是在下，默认是在上
    void setValue(qreal v);
    void setRange(int minValue, int maxValue);
    void startAnimation();
    void updateValue(double value);
    void setBgColor(const QColor &bgColor);               //设置背景颜色
    void setLineColor(const QColor &lineColor);           //设置线条颜色
    void setProgressColor(const QColor &progressColor);   //设置进度颜色

2.核心代码

绘制部分参考引用2代码，感谢刘典武老师的无私开源，有需要的可去做定制。
代码如下：

void HumidityProgress::startAnimation()
{
    qreal startValue =  value;
    if(isAdd)
    {
        m_valueAnimation->setKeyValueAt(0.5, value+0.5);
        m_valueAnimation->setKeyValueAt(1, value);
        m_valueAnimation->setStartValue(startValue-0.5);
        m_valueAnimation->start();
    }
    else{
        m_valueAnimation->setKeyValueAt(0.5, value-0.5);
        m_valueAnimation->setKeyValueAt(1, value);
        m_valueAnimation->setStartValue(startValue+0.5);
        m_valueAnimation->start();
    }

}

void HumidityProgress::paintEvent(QPaintEvent *)
{
    //绘制准备工作,启用反锯齿
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //按照绘制顺序
    drawBg(&painter);
    drawProgress(&painter);
    if (rulerTop) {
        drawRulerTop(&painter);
    } else {
        drawRulerBottom(&painter);
    }
}

void HumidityProgress::drawBg(QPainter *painter)
{
    painter->save();
    painter->setPen(lineColor);
    painter->setBrush(bgColor);
    painter->drawRect(rect());
    painter->restore();
}

void HumidityProgress::drawProgress(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(progressColor);

    double length = width();
    double increment = length / (maxValue - minValue);
    double initX = (value - minValue) * increment;

    QRect rect(0, 0, initX, height());
    painter->drawRect(rect);
    painter->restore();
}

void HumidityProgress::drawRulerTop(QPainter *painter)
{
    painter->save();
    painter->setPen(lineColor);

    double initX = 0;

    //绘制横向标尺上部分底部线
    double initTopY = 0;
    QPointF lineTopLeftPot = QPointF(initX, initTopY);
    QPointF lineTopRightPot = QPointF(width() - initX, initTopY);
    painter->drawLine(lineTopLeftPot, lineTopRightPot);

    //绘制上部分及下部分横向标尺刻度
    double length = width();
    //计算每一格移动多少
    double increment = length / (maxValue - minValue);
    //长线条短线条长度
    int longLineLen = 15;
    int shortLineLen = 10;

    //根据范围值绘制刻度值及刻度值 长线条需要移动10像素 短线条需要移动5像素
    for (int i = minValue; i <= maxValue; i = i + shortStep) {
        if (i % longStep == 0) {
            QPointF topPot = QPointF(initX, initTopY);
            QPointF bottomPot = QPointF(initX, initTopY + longLineLen);
            painter->drawLine(topPot, bottomPot);

            //第一个值和最后一个值不要绘制
            if (i == minValue || i == maxValue) {
                initX += increment * shortStep;
                continue;
            }

            QString strValue = QString("%1").arg((double)i, 0, 'f', 0);
            double textWidth = fontMetrics().width(strValue);
            double textHeight = fontMetrics().height();

            QPointF textPot = QPointF(initX - textWidth / 2, initTopY + textHeight + longLineLen);
            painter->drawText(textPot, strValue);
        } else {
            if (i % (longStep / 2) == 0) {
                shortLineLen = 10;
            } else {
                shortLineLen = 6;
            }

            QPointF topPot = QPointF(initX, initTopY);
            QPointF bottomPot = QPointF(initX, initTopY + shortLineLen);
            painter->drawLine(topPot, bottomPot);
        }

        initX += increment * shortStep;
    }

    painter->restore();
}

该处使用的url网络请求的数据。

2、竖起来的温度/湿度计控件

因为只做数据显示用，所以只需要向控件传数据即可。
控件是好看，但是大小不能改变，所以这里需要自己实现了，源码作者已经放上。

1.头文件

代码如下（示例）：

#ifndef THERMOMETREDLG_H
#define THERMOMETREDLG_H

#include <QWidget>
#include <QPropertyAnimation>
#include <QPainter>
#include <QTimer>

class thermometreDlg : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(qreal value READ getValue WRITE setValue)  //声明属性

public:
    explicit thermometreDlg(QWidget *parent = nullptr);
    qreal getValue();
    void setValue(qreal value);
    void changeValue(qreal value);


protected:
    void paintEvent(QPaintEvent *e);

public slots:
    void startAnimation();

signals:

private:
    qreal m_value;
    qreal curValue;
    int m_width;
    QRectF m_rect;
    int maxValue, minValue;
    qreal m_radius;
    QPropertyAnimation *m_valueAnimation;
    void updateRect();


};

#endif // THERMOMETREDLG_H

2.实现

代码如下（示例）：

#include "thermometredlg.h"
#include <QDebug>

thermometreDlg::thermometreDlg(QWidget *parent) : QWidget(parent)
{
    m_width = 20;
    maxValue = 100;
    minValue = 0;
    m_radius = 1.05;
    m_value = 0;
    curValue = m_value;
    QTimer *at = new QTimer(this);
    at->start(1000);
    m_valueAnimation = new QPropertyAnimation(this, "value");
    m_valueAnimation->setDuration(1000);
    m_valueAnimation->setEasingCurve(QEasingCurve::OutCubic);
    m_valueAnimation->setLoopCount(1);
    connect(at, SIGNAL(timeout()), this, SLOT(startAnimation()));

}


void thermometreDlg::updateRect()
{
    m_rect.setX(0);
    m_rect.setY(20 - height()/2);
    m_rect.setWidth(m_width);
    m_rect.setHeight(height() - 40 - m_width* m_radius);
}

void thermometreDlg::setValue(qreal value)
{
    m_value = value;
    update();
}

void thermometreDlg::changeValue(qreal value)
{
    if(value > maxValue)
        value = maxValue;
    if(value < minValue)
        value = minValue;
    curValue = value;
}

qreal thermometreDlg::getValue()
{
    return m_value;
}


void thermometreDlg::paintEvent(QPaintEvent *e)
{
    updateRect();
    QPainter painter(this);
    QPen pen(Qt::black);
    painter.translate(this->width()/2, this->height()/2);  //坐标轴移动到中心点
    painter.setRenderHints(QPainter::TextAntialiasing | QPainter::Antialiasing);  // 启用反锯齿
    painter.save();
    //绘制上方的柱状
    painter.fillRect(m_rect, QColor(168,200, 225));

    //绘制底部的圆
    QRectF tmpRect = QRectF(m_rect.bottomLeft(), QPointF(m_width, height()/2- m_width*m_radius));
    painter.fillRect(tmpRect, QColor(255, 0, 0));
    painter.setPen(Qt::NoPen);
    painter.setBrush(QColor(255, 0, 0));
    painter.drawEllipse(tmpRect.bottomLeft()+QPointF(tmpRect.width()/2, 0),m_width*m_radius, m_width*m_radius);
    painter.restore();

    //绘制刻度以及刻度值
    painter.save();
    painter.setPen(QColor(Qt::black));
    int nYCount = (maxValue - minValue)/10+1;
    qreal perHeight = (m_rect.height())/nYCount;
    for (int i=0; i<nYCount; ++i) {
        QPointF basePoint = m_rect.bottomLeft() - QPointF(0, perHeight/2) - QPointF(0, perHeight*i);
        //左侧大刻度
        painter.drawLine(basePoint, basePoint+QPointF(-10, 0));
        for (int j=1; j<10; ++j) {
            if(i == nYCount -1)
                continue;
            painter.drawLine(basePoint-QPointF(0, perHeight/10*j),basePoint-QPointF(5, perHeight/10*j));
        }
        painter.drawText(basePoint+QPointF(-28, 4), QString("%1").arg(minValue+i*10));
        //右侧大刻度
        basePoint = m_rect.bottomRight() - QPointF(0, perHeight/2) - QPointF(0, perHeight*i);
        painter.drawLine(basePoint, basePoint+QPointF(10, 0));
        for (int j=1; j<10; ++j) {
            if(i == nYCount -1)
                continue;
            painter.drawLine(basePoint-QPointF(0, perHeight/10*j),basePoint-QPointF(-5, perHeight/10*j));
        }
    }
    painter.restore();

    //根据值填充m_rect
    qreal h = (m_value-minValue)/(maxValue-minValue)*(m_rect.height()-perHeight);
    if(h<0)
        h = 0;
    if(h > m_rect.height())
        h = m_rect.height();
    painter.fillRect(m_rect.adjusted(0, m_rect.height()-h-perHeight/2-1 , 0, 0), QColor(255, 0, 0));

    QWidget::paintEvent(e);
}

void thermometreDlg::startAnimation()
{
    qreal startValue = getValue();
    m_valueAnimation->setKeyValueAt(0, startValue-1);
    m_valueAnimation->setKeyValueAt(0.5, curValue+1);
    m_valueAnimation->setKeyValueAt(1, curValue);
    m_valueAnimation->setStartValue(startValue-2);
    m_valueAnimation->start();
}

3、引用

1、用qt实现一个温度计控件
2、Qt编写自定义控件2-进度条标尺
3、Qt动画框架：QPropertyAnimation（属性动画）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/119684.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

快速实现一个企业级域名 SSL 证书有效期监控巡检系统

快速实现一个企业级域名 SSL 证书有效期监控巡检系统

Why 现在对于企业来说&#xff0c;HTTPS 已经不是可选项&#xff0c;已经成为一个必选项。HTTPS 协议采用 SSL 协议&#xff0c;采用公开密钥的技术&#xff0c;提供了一套 TCP/IP 传输层数据加密的机制。SSL 证书是一种遵守 SSL 协议的服务器数字证书&#xff0c;一般是由权威…
阅读更多...
随笔--解决ubuntu虚拟环境的依赖问题

随笔--解决ubuntu虚拟环境的依赖问题

文章目录 问题一&#xff1a;在conda虚拟环境中报错ImportError: libcupti.so.11.7:cannot open shared object file: No such file or directory解决步骤问题二&#xff1a; RuntimeError: CUDA error: CUBLAS_STATUS_INVALID_VALUE when calling cublasSgemmStridedBatched( …
阅读更多...
初识Java 17-2 反射

初识Java 17-2 反射

目录 转型前检查 构建例子&#xff1a;生成层次结构 优化Creator&#xff1a;使用类字面量 优化PetCounter&#xff1a;动态验证类型 更通用的递归计数 注册工厂 本笔记参考自&#xff1a; 《On Java 中文版》 转型前检查 当我们使用传统的类型转换&#xff0c;例如&…
阅读更多...
【服务器】Java连接redis及使用Java操作redis、使用场景

【服务器】Java连接redis及使用Java操作redis、使用场景

一、Java连接redis-No-SQL 1、导入依赖 在你的项目里面导入redis的pom依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.9.0</version> </dependency> 2、连接redis 连接redis …
阅读更多...
JavaEE-博客系统2（功能设计）

JavaEE-博客系统2（功能设计）

本部分内容&#xff1a;实现博客列表页&#xff1b;web程序问题的分析方法&#xff1b;实现博客详情页&#xff1b; 该部分的代码如下&#xff1a; WebServlet("/blog") public class BlogServlet extends HttpServlet {//Jackson ObjectMapper类(com.fasterxml.jac…
阅读更多...
基于计算机视觉的身份证识别系统 计算机竞赛

基于计算机视觉的身份证识别系统 计算机竞赛

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的身份证识别系统 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-sen…
阅读更多...
编程未来规划笔记

编程未来规划笔记

编程思考 Python 自动化办公、深度学习、自然语言处理&#xff08;调用各种库&#xff09; Html Css 写网页 学习不要怕忘 为什么学的快、忘得快 Google、写代码、放文档 高度提炼 学什么&#xff1b;存在的意义是什么 更好的拓展性&#xff1b;可维护性 实践 原理 顶层设计…
阅读更多...
第二章： 创建第一个Spring Boot 应用

第二章： 创建第一个Spring Boot 应用

第二章： 创建第一个Spring Boot 应用 前言 本章重点知识：构建你的第一个Spring Boot应用：以一个简单的例子来引导你进入Spring Boot的开发，包括如何使用Spring Initializr来创建项目，以及如何使用Maven或Gradle构建和运行项目等 IntelliJ IDEA 开发工具中安装 Spring Init…
阅读更多...
2023-11-7 OpenAI 45 分钟发布会：演示关于 GPT Store 构建 GPT、零代码创建 AI Agent

2023-11-7 OpenAI 45 分钟发布会：演示关于 GPT Store 构建 GPT、零代码创建 AI Agent

本心、输入输出、结果 文章目录 2023-11-7 OpenAI 45 分钟发布会&#xff1a;演示关于 GPT Store 构建 GPT、零代码创建 AI Agent前言Sam Altman 正在创建一个「创业导师 GPT」零代码创建 AI AgentAssistants API 封装的能力包括 Sam Altman 对发布会总结相关链接弘扬爱国精神 …
阅读更多...
如何选择SVM中最佳的【核函数】

如何选择SVM中最佳的【核函数】

参数“kernel"在sklearn中可选以下几种 选项&#xff1a; 接下来我们 就通过一个例子&#xff0c;来探索一下不同数据集上核函数的表现。我们现在有一系列线性或非线性可分的数据&#xff0c;我们希望通过绘制SVC在不同核函数下的决策边界并计算SVC在不同核函数下分类准确…
阅读更多...
Python和BeautifulSoup库的魔力：解析TikTok视频页面

Python和BeautifulSoup库的魔力：解析TikTok视频页面

概述 短视频平台如TikTok已成为信息传播和电商推广的重要渠道。用户通过短视频分享生活、创作内容&#xff0c;吸引了数以亿计的观众&#xff0c;为企业和创作者提供了广阔的市场和宣传机会。然而&#xff0c;要深入了解TikTok上的视频内容以及用户互动情况&#xff0c;需要借…
阅读更多...
Kubernetes 准入控制

Kubernetes 准入控制

Author&#xff1a;rab 目录 前言一、限制范围二、配置案例2.1 名称空间 CPU 与内存约束2.1.1 CPU 约束2.1.2 内存约束2.1.3 默认 CPU 申请约束2.1.4 默认内存申请约束 2.2 名称空间总容量限额约束 总结 前言 LimitRange 是限制命名空间内可为每个适用的对象类别 &#xff08;…
阅读更多...
Android View 触摸反馈原理浅析

Android View 触摸反馈原理浅析

重写OnTouchEvent() 然后在方法内部写触摸算法 返回true,表示消费事件,所有触摸反馈不再生效,返回事件所有权 if (event.actionMasked MotionEvent.ACTION_UP){performClick()//抬起事件 执行performClick 触发点击 }override fun onTouchEvent(event: MotionEvent): Boolea…
阅读更多...
代码随想录算法训练营第四十四天丨 动态规划part07

代码随想录算法训练营第四十四天丨 动态规划part07

70. 爬楼梯 思路 这次讲到了背包问题 这道题目 我们在动态规划&#xff1a;爬楼梯 (opens new window)中已经讲过一次了&#xff0c;原题其实是一道简单动规的题目。 既然这么简单为什么还要讲呢&#xff0c;其实本题稍加改动就是一道面试好题。 改为&#xff1a;一步一个…
阅读更多...
【代码随想录】算法训练营 第十五天 第六章 二叉树 Part 2

【代码随想录】算法训练营 第十五天 第六章 二叉树 Part 2

102. 二叉树的层序遍历 层序遍历&#xff0c;就是一层一层地遍历二叉树&#xff0c;最常见的就是从上到下&#xff0c;从左到右来遍历&#xff0c;遍历的方法依然有两种&#xff0c;第一种是借助队列&#xff0c;第二种则是递归&#xff0c;都算是很简单、很容易理解的方法&am…
阅读更多...
VLAN与配置

VLAN与配置

VLAN与配置 什么是VLAN 以最简单的形式为例。如下图&#xff0c;此时有4台主机处于同一局域网中&#xff0c;很明显这4台主机是能够直接通讯。但此时我需要让处于同一局域网中的PC3和PC4能通讯&#xff0c;PC5和PC6能通讯&#xff0c;并且PC3和PC4不能与PC5和PC6通讯。 为了实…
阅读更多...
图论——并查集

图论——并查集

参考内容&#xff1a; 图论——并查集(详细版) 并查集&#xff08;Disjoint-set&#xff09;是一种精巧的树形数据结构&#xff0c;它主要用于处理一些不相交集合的合并及查询问题。一些常见用途&#xff0c;比如求联通子图、求最小生成树的 Kruskal 算法和求最近公共祖先&…
阅读更多...
测试接触不到第一手需求，如何保证不漏测？

测试接触不到第一手需求，如何保证不漏测？

测试接触不到第一手需求&#xff0c;了解到的需求都是分解过的需求&#xff0c;该怎么做才能保证不漏测&#xff1f; 这个问题还是挺普遍的。因为随着分工越来越精细&#xff0c;每个人可能只能接触到全局的一部分&#xff0c;再加上信息传递过程中的信息丢失&#xff0c;就很…
阅读更多...
bootstrap3简单玩法

bootstrap3简单玩法

Bootstrap v3 Bootstrap v3 是一个流行的前端框架&#xff0c;它提供了一系列的模板、组件和工具&#xff0c;可以帮助开发者快速地构建响应式的网站和应用程序。 以下是 Bootstrap v3 的一些常见应用&#xff1a; 响应式布局&#xff1a;Bootstrap v3 提供了一个易于使用的网…
阅读更多...
1.性能优化

1.性能优化

概述 今日目标&#xff1a; 性能优化的终极目标是什么压力测试压力测试的指标 性能优化的终极目标是什么 用户体验 产品设计(非技术) 系统性能(快&#xff0c;3秒不能更久了) 后端&#xff1a;RT,TPS,并发数 影响因素01&#xff1a;数据库读写&#xff0c;RPC&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023