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

目录
  • 一、项目介绍
  • 二、项目基本配置
  • 三、UI界面设置
  • 四、主程序实现
    • 4.1 roundprogressbar.h和roundprogressbar.cpp
    • 4.2 widget.h头文件
    • 4.3 widget.cpp源文件
  • 五、效果演示

一、项目介绍

本文介绍利用QPainter实现自定义圆形进度条。

二、项目基本配置

新建一个Qt案例,项目名称为“RoundprogressbarTest”,基类选择“QWidget”,点击选中创建UI界面复选框,完成项目创建。

三、UI界面设置

UI界面如下:

为简单起见,这里只设计两个控件:

序号 名称 类型 属性
pushButton QPushButton text:Start
gridLayout QGridLayout /

四、主程序实现

4.1 roundprogressbar.h和roundprogressbar.cpp

由于roundprogressbar.h和roundprogressbar.cpp代码量较大,这里不进行展示,仅作简要说明。

函数如下:

    //设置初始角度,顺时针逆时针
    void setdefault(int,bool);
    //设置外圈宽度
    void setOutterBarWidth(float);
    //设置内圈宽度
    void setInnerBarWidth(float);
    //设置范围
    void setRange(float, float);
    //设置当前值
    void setValue(float);
    //设置外圈颜色
    void setOutterColor(const QColor&);
    //设置内圈渐变色
    void setInnerColor(const QColor&,const QColor&);
    void setInnerColor(const QColor&);
    //设置默认文字颜色
    void setDefaultTextColor(const QColor&);
    //设置控制命令
    void setControlFlags(int);
    //设置显示数字精度
    void setPrecision(int);

在构造函数中进行了如下初始化设定:

    //设置初始角度,顺时针逆时针
    setdefault(90,true);
    //设置默认外圈宽度
    setOutterBarWidth(18);
    //设置默认内圈宽度
    setInnerBarWidth(16);
    //设置默认范围
    setRange(0,100);
    //设置默认值
    setValue(75);
    //设置外圈颜色
    setOutterColor(QColor(233,248,248));
    //设置默认渐变色
    setInnerColor(QColor(49, 177, 190),QColor(133, 243, 244));
    //设置默认文字颜色
    setDefaultTextColor(QColor(49,177,190));
    //设置默认精度
    setPrecision(0);
    //设置内圈默认文字样式
    setInnerDefaultTextStyle(RoundProgressBar::percent);

设置初始化角度为90度,顺时针,设置外圈宽度为18,内圈宽度为18;设置默认范围为0-100,设置默认值为75,设置外圈颜色、渐变色、文本颜色和默认精度为0(无小数)设置内圈文字样式为percent(百分比样式)。

4.2 widget.h头文件

头文件中引入roundprogressbar.h头文件,按钮点击槽函数和定时器对应的槽函数、timer对象和bar1对象:

private slots:
    void setText();
    void on_pushButton_clicked();

private:
    RoundProgressBar* bar1;
    QTimer timer;
     int i=0;

4.3 widget.cpp源文件

源文件中在构造函数中定义圆形进度条和定时器,将定时器timeout信号和槽函数setText连接:

    //*********************** RoundProgressBar ************************
    bar1=new RoundProgressBar(this);
    bar1->setOutterBarWidth(20);
    bar1->setInnerBarWidth(20);
    bar1->setValue(0);//设置默认值为0
    bar1->setControlFlags(RoundProgressBar::all);
    ui->gridLayout->addWidget(bar1,0,0);

    //计时
    timer.setInterval(100);//设置计时间隔为0.1s
    connect(&timer,&QTimer::timeout,this,&Widget::setText);

在析构函数中停止定时器:

Widget::~Widget()
{
    if(timer.isActive())
        timer.stop();
    delete ui;
}

两个槽函数定义如下:

//点击
void Widget::on_pushButton_clicked()
{
    timer.start();
}

void Widget::setText()
{
    bar1->setValue(i++);
    bar1->repaint();
    if(i>100)   //100停止
    {
        timer.stop();
    }
}

五、效果演示

完整效果如下:

到此这篇关于Qt使用QPainter实现自定义圆形进度条的文章就介绍到这了,更多相关Qt自定义进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用QPainter画一个3D正方体

    本文实例为大家分享了QPainter画一个3D正的具体代码,供大家参考,具体内容如下 My3DBox .h #include <Eigen/Geometry> using namespace Eigen; #define SQUARE_LENGTH 200//是一个边长200的正方体 #define CAMERA_DISTANCE 300//视点距离 class My3DBox : public QWidget { Q_OBJECT public: explicit My3DBox(QWidg

  • Qt中QPainter与坐标的使用

    目录 一.坐标系统与坐标变换 示例 二.可缩放图形 一.坐标系统与坐标变换 坐标系统 QPainter坐标变换相关函数 分组 函数原型 功能 坐标变换 void translate(qreal dx,qreal dy) 坐标系统一定的偏移量,坐标原点平移到新的点 void rotate(qreal angle) 坐标系统顺时针旋转-一个角度 void scale(qreal sx,qreal sy) 坐标系统缩放 void shear(qrael sh,qreal sy) 坐标系统做扭转变换 状

  • QT利用QPainter绘制三维饼状图

    目录 一.项目介绍 二.项目基本配置 三.UI界面设置 四.主程序实现 4.1 widget.h头文件 4.2 widget.cpp源文件 五.效果演示 一.项目介绍 本文介绍利用QPainter实现三维饼状图的绘制,由于Qt中没有三维饼状图的绘制组件,因此只能自行绘制. 二.项目基本配置 新建一个Qt案例,项目名称为“PieTest”,基类选择“QWidget”,取消选中创建UI界面复选框,完成项目创建. 三.UI界面设置 无UI界面 四.主程序实现 4.1 widget.h头文件 头文件中只

  • Qt使用QPainter绘制3D立方体

    本文实例为大家分享了使用QPainter绘制3D立方体的具体代码,供大家参考,具体内容如下 1.实现思路 (网上有另一篇类似的,不过他不是用的 Qt 自带的矩阵运算类) 实现思路有点类似使用 OpenGL 画立方体,先准备顶点数据: //立方体前后四个顶点,从右上角开始顺时针 vertexArr=QVector<QVector3D>{ QVector3D{1,1,1}, QVector3D{1,-1,1}, QVector3D{-1,-1,1}, QVector3D{-1,1,1}, QVec

  • 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实现小功能之圆形进度条的方法详解

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

  • Android动态自定义圆形进度条

    效果图: A.绘制圆环,圆弧,文本 //1.画圆环 //原点坐标 float circleX = width / 2; float circleY = width / 2; //半径 float radius = width / 2 - roundWidth / 2; //设置画笔的属性 paint.setColor(roundColor); paint.setStrokeWidth(roundWidth); paint.setStyle(Paint.Style.STROKE); canvas.

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

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

  • Android自定义圆形进度条

    今天小编来手写一个自定义圆形进度条:先看效果: 首先我们在attrs属性文件中增加几个自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomProgressBar"> <!-- 圆形进度条进度显示的颜色 --> <attr name="roundProgressC

  • Android三种方式实现ProgressBar自定义圆形进度条

    进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条. Android进度条有4种风格可以使用. 默认值是progressBarStyle. 设置成progressBarStyleSmall后,图标变小. 设置成progressBarStyleLarge后,图标变大 设置成progressBarStyleHorizontal后,变成横向长方形. 自定义圆形进度条ProgressBar的一般有三种方式: 一.通过动画实现 定义res/a

  • Android 实现自定义圆形进度条的功能

    Android 实现自定义圆形进度条:                 Android 自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的来展示漂亮的界面,这里就对圆形进度条说下如何实现. 绘制自定义的圆形进度条,分为三个步骤,内圆.外圆.文字. 其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所以核心就是绘制外圆. 首先定义分别定义这三个画笔,两个Paint和一个TextPaint mCirclePaint = new Paint(); mCirclePai

  • Android 实现自定义圆形进度条的实例代码

    Android 自定义圆形进度条 今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当前的百分比 6.根据百分比,逐渐改变正方形的大小,逐渐减小正方形的底部y轴的坐标,不断重绘,直到达到100% 首先看看自定义的属性 在values目录下新建attrs.xml内容如下: 定义绘制圆形的背景色,和绘制圆形的半径

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

    本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下 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:

  • Android自定义圆形进度条效果

    本文实例为大家分享了Android自定义圆形进度条效果的具体代码,供大家参考,具体内容如下 1 控件 RoundProgress package listview.tianhetbm.p2p.ui; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import a

随机推荐