Qt实现小功能之圆形进度条的方法详解

目录
  • 功能
  • 图形绘制
    • 1.绘制窗口整体背景色值
    • 2.圆形进度条通道绘制
    • 3.圆形进度条绘制
    • 4.文本绘制
  • 数值计算
    • 1.计算步长
    • 2.实时数据计算

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

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

展示效果，如下图所示：

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

1：图形绘制

2：数值计算

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

功能

自定义绘制类：QRoundedProgress

继承自QWidget

开发环境：vs2017 + Qt5.14.2

图形绘制

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中文本绘制的。

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

到此这篇关于Qt实现小功能之圆形进度条的方法详解的文章就介绍到这了,更多相关Qt圆形进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Qt自定义控件实现圆圈加载进度条

    Qt自定义控件实现圆圈加载进度条

    本文实例为大家分享了Qt实现圆圈加载进度条的具体代码,供大家参考,具体内容如下 先看效果图: 思路:画一个占270度的圆弧,然后定义一个定时器,定时旋转坐标系,实现旋转的效果.圆弧需要使用渐变色,实现颜色越来越浅的效果 关键代码:CMProcessBar1.cpp CMProcessBar1::CMProcessBar1(QWidget *parent) : QWidget(parent), ui(new Ui::CMProcessBar1) { ui->setupUi(this); QTime

  • Qt使用QPainter实现自定义圆形进度条

    Qt使用QPainter实现自定义圆形进度条

    目录 一.项目介绍 二.项目基本配置 三.UI界面设置 四.主程序实现 4.1 roundprogressbar.h和roundprogressbar.cpp 4.2 widget.h头文件 4.3 widget.cpp源文件 五.效果演示 一.项目介绍 本文介绍利用QPainter实现自定义圆形进度条. 二.项目基本配置 新建一个Qt案例,项目名称为“RoundprogressbarTest”,基类选择“QWidget”,点击选中创建UI界面复选框,完成项目创建. 三.UI界面设置 UI界面如

  • Qt 进度条的实现示例

    Qt 进度条的实现示例

    一.前言 有时我们需要在表格(QTableWidget).树状栏(QTreeWidget)中直观显示任务进度或消耗百分比,达到报表显示的形式,可通过重写QLabel的方式实现. 1.进度条控件功能 1)可设置值动态变化 2)可设置警戒值 3)可设置正常颜色和报警颜色 4)可设置边框渐变颜色 5)可设置变化时每次移动的步长 6)可设置错误时显示错误描述 7)可设置显示值保留小数的位数 8)可设置边框圆角角度/背景进度圆角角度/头部圆角角度 2.实现效果 二.实现过程 1.运行环境Qt5.5 VS2

  • Qt编写提示进度条的实现示例

    Qt编写提示进度条的实现示例

    目录 一.前言 二.实现的功能 三.效果图 四.头文件代码 五.核心代码 六.控件介绍 一.前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度,然后底部进度多种颜色渐变展示,Qt自带的进度条或者操作系统的进度条样式,不够炫,这次索性直接来个自定义绘制实现,至于是继承QWidget类还是QProgressBar类,都无所谓,如果是继承自QWidget类的话,就需要自己设置最大值最小值范围值,而继承自QProgressBar的话就可以直接用自带的函

  • Qt实现小功能之圆形进度条的方法详解

    Qt实现小功能之圆形进度条的方法详解

    目录 功能 图形绘制 1.绘制窗口整体背景色值 2.圆形进度条通道绘制 3.圆形进度条绘制 4.文本绘制 数值计算 1.计算步长 2.实时数据计算 在Qt自带的控件中,只有垂直进度条.水平进度条两种. 在平时做页面开发时,有些时候会用到圆形进度条,比如说:下载某个文件的下载进度. 展示效果,如下图所示: 实现这个功能主要由以下几个重点: 1:图形绘制 2:数值计算 也算是一个初级例子,下面我来讲解下如何实现这个简单的小功能吧! 功能 自定义绘制类:QRoundedProgress 继承自QWid

  • iOS中使用NSProgress类来创建UI进度条的方法详解

    一.引言 在iOS7之前,系统一直没有提供一个完整的框架来描述任务进度相关的功能.这使得在开发中进行耗时任务进度的监听将什么麻烦,在iOS7之后,系统提供了NSProgress类来专门报告任务进度. 二.创建单任务进度监听器 单任务进度的监听是NSProgress最简单的一种运用场景,我们来用定时器模拟一个耗时任务,示例代码如下: @interface ViewController () { NSProgress * progress; } @end @implementation ViewCo

  • Android实现文件上传和下载倒计时功能的圆形进度条

    Android实现文件上传和下载倒计时功能的圆形进度条

    screenshot 截图展示 import step1. Add it in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } step2. Add the dependency dependencies { compile 'com.github.yanjiabin:ExtendsRingPrigr

  • 详解微信小程序——自定义圆形进度条

    详解微信小程序——自定义圆形进度条

    微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con

  • 微信小程序之圆形进度条实现思路

    微信小程序之圆形进度条实现思路

    需求概要 小程序中使用圆形倒计时,效果图: 思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案 第一步先写结构 一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"

  • 微信小程序画布圆形进度条显示效果

    微信小程序画布圆形进度条显示效果

    本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下 效果图: 代码: wxml <!--pages/test/test.wxml--> <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas> js // pages/test/test.js var context = new wx.createCanv

  • 小程序自定义圆形进度条

    本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下 circle.wxss: page { width: 100%; height: 100%; background-color: #fff; } .circle-box { text-align: center; margin-top: 10vw; } .circle { position: absolute; left: 0; right: 0; margin: auto; } .draw_btn { width:

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • Vue的事件响应式进度条组件实例详解

    写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图 以

随机推荐