Qt之实现圆形进度条

        在Qt自带的控件中,只有垂直进度条、水平进度条两种。

在平时做页面开发时,有些时候会用到圆形进度条,比如说:下载某个文件的下载进度。

展示效果,如下图所示:

 

实现这个功能主要由以下几个重点:

1:图形绘制

2:数值计算

也算是一个初级例子,下面我来讲解下如何实现这个简单的小功能吧!

功能

自定义绘制类:QRoundedProgress

继承自QWidget

图形绘制

1.绘制窗口整体背景色值

QPainter painter(this);painter.fillRect(this->rect(), m_crBack);painter.setRenderHint(QPainter::Antialiasing); //抗锯齿

m_crBack:窗口背景色,默认是QColor(255, 255, 255);

因为后续要绘制圆形,在绘制之前加上抗锯齿效果。

2.圆形进度条通道绘制

什么叫做圆形进度条的通道呢?

如图所示的灰色区域就是圆形进度条的通道,也就是我们说的圆环。

实现方式:两个半径不同的圆重叠在一起(且圆心相同),未重叠的部分也就是圆形的通道区域。

假设QRoundedProgress类大小是:QSize(100, 100),也就是说该窗口的宽度=100,高度=100。

大圆形代码:

painter.setPen(m_crProgressChannel);
painter.setBrush(m_crProgressChannel);
painter.drawEllipse(this->rect());

以整个窗口作为圆形的区域进行绘制,显示效果如下:

 

m_crProgressChannel:通道号颜色值,默认是QColor(220, 220, 220);

小圆形代码:

QRect rectInCircl = this->rect();
rectInCircl.adjust(10, 10, -10, -10);
painter.setPen(m_crBack);
painter.setBrush(m_crBack);
painter.drawEllipse(rectInCircl);

以窗口的整体区域为标准,向内调整10个像素大小,采用了QRect::adjust方法。

10就是圆环的宽度了。

3.圆形进度条绘制

进度条也就是在文章最开始gif动画中蓝色的动态条。

该如何简单的绘制整个进度呢?

最简单的方式:采用QPainter扇形的绘制方式!

在程序中,进度条的变化可以采用扇形的区域进行表示。随着数据的变化,扇形的面积也逐渐递增,直到达到设定的最大值为止。

该如何绘制呢?

要是绘制一个实心的扇形,直接在小圆形代码后面追加肯定是不行的,会出现下面的效果:

小圆形直接被覆盖住了,这样的效果与文章最开始的展示效果是不一致的。

修改方式:将扇形绘制的方法放置到大圆形、小圆形代码之间

绘制扇形代码如下:

painter.setPen(m_crProgressBar);
painter.setBrush(m_crProgressBar);
painter.drawPie(this->rect(), 90 * 16, -m_nValue * m_fStep * 16);

m_crProgressBar:圆形进度条颜色值,默认是QColor(16, 142, 233);

4.文本绘制

图形绘制完成后,最后绘制文本展示

painter.setFont(m_font);
painter.setPen(m_crText);
painter.drawText(rectInCircl, Qt::AlignHCenter| Qt::AlignVCenter, m_sValue);

数值计算

在圆形进度条中需要设置以下几种计算

1.计算步长

m_fStep = 360.0/ (maximum - minimum);

根据步长大小,计算每次移动的扇面面积

painter.drawPie(this->rect(), 90 * 16, -m_nValue * m_fStep * 16);

 通常情况下,圆形进度条的走向一般是顺时针,但是,在圆形中走向却是逆时针方向,所以在进行扇形面积计算时,会从90°逆向绘制。

2.实时数据计算

由外界调用者传入实时变化数据,并计算当前加载的百分比数值。

float fNum = (value*1.0) / (m_nMaxMum - m_nMinMum);
m_sValue = QString::number(fNum*100, 'f', 0) + QStringLiteral("%");

其中,m_sValue该变量是应用到drawText中文本绘制的。

到这里,简单的圆形进度条就绘制完成了~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php 安装mongodb扩展模块,rdkafka模块

mongodb mongodb扩展下载 选择php版本,根据报错提示,选择扩展对应的版本选择非安全进程将php_mongodb.dll放到php/ext目录下修改php.ini配置,添加extensionphp_mongodb.dll开启php_mongodb扩展,重启服务php -m 查看是否开启成功…

整理mongodb文档:副本集二

个人博客 整理mongodb文档:副本集二 个人博客,求推荐,本片内容较为乱 文章概叙 本文章主要讲在MongoDB的副本集中的一些注意点,主要是如何对seconadry进行数据操作,以及对更新数据的一些介绍 查看当前节点 上一集讲了关于搭…

Git指导:提交干净的commit信息

为什么我们应该关心编写干净的提交消息? 提交是程序员技术的有形构建块。它们充当代码的锦上添花,如果编写正确,它们会带来巨大的价值。编写良好的提交消息变得不可或缺,因为它们提供了上下文——否则一开始就不需要提交消息。 良…

STM32 CubeMX ADC采集(HAL库)

STM32 CubeMX ADC采集(HAL库) STM32 CubeMX STM32 CubeMX ADC采集(HAL库)ADC介绍ADC主要特征最小识别电压值:2.4/4096≈0.6mv(不考虑误差)一、STM32 CubeMX设置二、代码部分三,单通道…

黑马JVM总结(二十八)

(1)语法糖-foreach (2)语法糖-switch-string (3)语法糖-switch-enum (4)语法糖-枚举类 枚举类 (5)语法糖-twr1

Linux登录自动执行脚本

一、所有用户每次登录时自动执行。 1、在/etc/profile文件末尾添加。 将启动命令添加到/etc/profile文件末尾。 2、在/etc/profile.d/目录下添加sh脚本。 在/etc/profile.d/目录下新建sh脚本,设置每次登录自动执行脚本。有用户登录时,/etc/profile会遍…

【Leetcode】 51. N 皇后

按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n ,返回所有不同的 n 皇后问题 的解决方案。 每一种…

1.Linux入门基本指令

个人主页:Lei宝啊 愿所有美好如期而遇 目录 01.ls指令 02.pwd指令 03.cd指令 04.touch指令 05.mkdir指令(重要) 06.rmdir&&rm指令(重要) 07.man指令(重要) 08.cp指令(重要) 09.mv指令(重要) 10.cat指令 nano指令 echo指令 输出重定向 追加重…

ChatGPT是如何产生心智的?

一、前言 - ChatGPT真的产生心智了吗? 来自斯坦福大学的最新研究结论,一经发出就造成了学术圈的轰动,“原本认为是人类独有的心智理论(Theory of Mind,ToM),已经出现在ChatGPT背后的AI模型上”…

【考研复习】union有关的输出问题

文章目录 遇到的问题正确解答拓展参考文章 遇到的问题 首次遇到下面的代码时,感觉应该输出65,323。深入理解union的存储之后发现正确答案是:67,323. union {char c;int i; } u; int main(){u.c A;u.i 0x143;printf("%d,%d\n", u.c, u.i); …

软件测试基础 - 测试覆盖率

一、覆盖率概念 覆盖率是用来度量测试完整性的一个手段,是测试技术有效性的一个度量。分为:白盒覆盖、灰盒覆盖和黑盒覆盖;测试用例设计不能一味追求覆盖率,因为测试成本随覆盖率的增加而增加。 覆盖率(至少被执行一次…

TensorFlow入门(九、张量及操作函数介绍)

在TensorFlow程序中,所有的数据都由tensor数据结构来代表。即使在计算图中,操作间传递的数据也是Tensor tensor在TensorFlow中并不是直接采用数组的形式,它只是对TensorFlow中计算结果的引用。也就是说在张量中并没有真正保存数字,它保存的是如何得到这些数字的计算过程 一个…

解决loadDep:omelette: sill install loadAllDepsIntoIdealTree

报错信息如下: 解决方案: 1、设置为淘宝的镜像源 npm config set registry https://registry.npm.taobao.org 2、 命令检验是否成功 npm config get registry 3、继续运行npm install即可 npm install 运行效果:

【arm实验1】GPIO实验-LED灯的流水亮灭

linuxlinux:~/study/01-asm$ cat asm-led.S .text .global _start _start: 1.设置GPIOE寄存器的时钟使能 RCC_MP_AHB4ENSETR[4]->1 0x50000a28 LDR R0,0X50000A28 LDR R1,[R0] 从r0为起始地址的4字节数据取出放在R1 ORR R1,R1,#(0x1<<4) 第4位设置为1 ORR R…

轻松实现视频、音频、文案批量合并,享受批量剪辑的便捷

在日常生活中&#xff0c;我们经常会需要将多个视频、音频和文案进行合并剪辑&#xff0c;以制作出符合我们需求的短视频。然而&#xff0c;这个过程通常需要花费大量的时间和精力。幸运的是&#xff0c;现在有一款名为“固乔智剪软件”的工具可以帮助我们轻松完成这个任务。 首…

文献综述|CV领域神经网络水印发展综述

前言&#xff1a;最近接触了「模型水印」这一研究领域&#xff0c;阅读几篇综述之后&#xff0c;大致了解了本领域的研究现状&#xff0c;本文就来总结一下该领域的一些基础知识&#xff0c;以飨读者。 ⚠️注&#xff1a;本文中出现的研究工作均基于计算机视觉任务开展&#x…

如何部署一个高可用高并发的电商平台

假设我们已经有了一个特别大的电商平台&#xff0c;这个平台应该部署在哪里呢&#xff1f;假设我们用公有云&#xff0c;一般公有云会有多个位置&#xff0c;比如在华东、华北、华南都有。毕竟咱们的电商是要服务全国的&#xff0c;当然到处都要部署了。我们把主站点放在华东。…

成功改派的访问学者申请建议

在申请成为访问学者时&#xff0c;成功改派是一个重要的关键步骤&#xff0c;这需要您精心策划和准备。在本文中&#xff0c;知识人网小编将为您提供一些建议&#xff0c;帮助您顺利实现申请改派成功的目标。 1.认真审视您的动机&#xff1a;在决定改派时&#xff0c;首先要仔细…

架构方法、模型、范式、治理

从架构方法、模型、范式、治理等四个方面介绍架构的概念和方法论、典型业务场景下的架构范式、不同架构的治理特点这3个方面的内容

git 同时配置 gitee github

git 同时配置 gitee github 1、 删除C:\Users\dell\.ssh目录。 在任意目录右击——》Git Bash Here&#xff0c;打开Git Bash窗口&#xff0c;下方命令在Git Bash窗口输入。 2、添加git全局范围的用户名和邮箱 git config --global user.email "609612189qq.com" …