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.hqwc.cn/news/128229.html

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

相关文章

RabbitMQ-网页使用消息队列

1.使用消息队列 几种模式 从最简单的开始 添加完新的虚拟机可以看到,当前admin用户的主机访问权限中新增的刚添加的环境 1.1查看交换机 交换机列表中自动新增了刚创建好的虚拟主机相关的预设交换机。一共7个。前面两个 direct类型的交换机,一个是…

【List-Watch】

List-Watch 一、定义二、工作机制三、调度过程 一、定义 Kubernetes 是通过 List-Watch 的机制进行每个组件的协作,保持数据同步的,每个组件之间的设计实现了解耦。 用户是通过 kubectl 根据配置文件,向 APIServer 发送命令,在 …

软件设计原则 1小时系列 (C++版)

文章目录 前言基本概念 Design Principles⭐单一职责原则(SRP) Single Responsibility PrincipleCode ⭐里氏替换原则(LSP) Liskov Substitution PrincipleCode ⭐开闭原则(OCP) Open Closed PrincipleCode ⭐依赖倒置原则(DIP) Dependency Inversion PrincipleCode ⭐接口隔离…

多头注意力机制

1、什么是多头注意力机制 从多头注意力的结构图中,貌似这个所谓的多个头就是指多组线性变换,但是并不是,只使用了一组线性变换层,即三个变换张量对 Q、K、V 分别进行线性变换,这些变化不会改变原有张量的尺寸&#xf…

openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw

文章目录 openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw93.1 编译oracle_fdw93.2 使用oracle_fdw93.3 常见问题93.4 注意事项 openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw openGauss的fdw实现的功能是各个openGauss数据库及…

极坐标系下的交换积分次序

极坐标系下的交换积分次序 我把极坐标系下的交换积分次序总结为动静与静动之间的转换,下面通过一个例子感受一下 ρ 1 、 ρ 1 cos ⁡ θ \rho1、\rho1\cos\theta ρ1、ρ1cosθ ∫ 0 π / 2 d θ ∫ 1 1 cos ⁡ θ f ( ρ cos ⁡ θ , ρ sin ⁡ θ ) ρ d…

swoole进行性能查看火焰图tideways_xhprof xhgui

D:\dnmp\services\php\Dockerfile D:\dnmp\services\php\php.ini 在php的配置文件里面增加tideways_xhprof拓展: [xhprof] ;xhprof.output_dir /var/log/php/xhprof.logextensiontideways_xhprof.so在php配置文件里面加上xhgui的header: 这样就能开启…

C (1094) : DS双向链表—前驱后继

Description 在双向链表中,A有一个指针指向了后继节点B,同时,B又有一个指向前驱节点A的指针。这样不仅能从链表头节点的位置遍历整个链表所有节点,也能从链表尾节点开始遍历所有节点。 对于给定的一列数据,按照给定的…

flutter开发实战-inappwebview实现flutter与Javascript方法调用

flutter开发实战-inappwebview实现flutter与Javascript方法调用 在使用inappwebview时候,需要flutter端与JS进行交互,调用相应的方法,在inappwebview中的JavaScript Handlers。 一、JavaScript Handlers 要添加JavaScript Handlers&#…

Day4:Linux系统编程1-60P

我的学习方法是:Linux系统编程(看pdf笔记) Linux网络编程 WebServer 01P-17P Linux相关命令及操作 cp -a dirname1 dirname2 复制目录 cp -r dirname1 dirname2 递归复制目录 1 到目录 2 这里-a 和-r 的差别在于,-a 是完全复制…

mysql-执行计划

1. 执行计划表概述 id相同表示加载表的顺序是从上到下。 id不同id值越大,优先级越高,越先被执行。id有相同,也有不同,同时存在。 id相同的可以认为是一组,从上往下顺序执行;在所有的组中,id的值…

MYSQL06高级_为什么使用索引、优缺点、索引的设计、方案、聚簇索引、联合索引、注意事项

文章目录 ①. 为什么使用索引②. 索引及其优缺点③. InnoDb - 索引的设计④. InnoDb中的索引方案⑤. 索引 - 聚簇索引⑥. 索引 - 二级索引⑦. B树索引的注意事项⑧. MyISAM中索引方案 ①. 为什么使用索引 ①. 索引是存储引擎用于快速找到数据记录的一种数据结构,就好比去图书馆…