OC - 9.基于Quartz2D绘制下载进度条(demo)

效果图

实现思路

要实现绘图，通常需要自定义一个UIView的子类，重写父类的- (void)drawRect:(CGRect)rect方法，在该方法中实现绘图操作
若想显示下载进度，只需要实例化自定义子类的对象（若是storyboard中控件，只需修改控件的class属性为自定义子类的类名即可）

效果图所示的效果其实是绘制一个圆弧，动态的改变终点的位置，最终达到一个封闭的圆

中间的文字是一个UILabel控件，根据进度动态改变文字的现实

实现步骤

自定义一个UIView的子类

//提供一个成员属性，接收下载进度值

@property (nonatomic, assign) CGFloat progress;

重写成员属性progress的setter

//每次改变成员属性progress的值，就会调用它的setter
- (void)setProgress:(CGFloat)progress
{
 _progress = progress;
 //当下载进度改变时，手动调用重绘方法
 [self setNeedsDisplay];
}

重写- (void)drawRect:(CGRect)rect（核心）

- (void)drawRect:(CGRect)rect
{
 //设置圆弧的半径
 CGFloat radius = rect.size.width * 0.5;
 //设置圆弧的圆心
 CGPoint center = CGPointMake(radius, radius);
 //设置圆弧的开始的角度（弧度制）
 CGFloat startAngle = - M_PI_2;
 //设置圆弧的终止角度
 CGFloat endAngle = - M_PI_2 + 2 * M_PI * self.progress;
 //使用UIBezierPath类绘制圆弧
 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 5 startAngle:startAngle endAngle:endAngle clockwise:YES];
 //将绘制的圆弧渲染到图层上（即显示出来）
 [path stroke];
}
赞 (0)

相关推荐

  • VC++进度条process Bar的用法实例

    本文实例讲述了VC进度条的用法实例,分享给大家供大家参考.具体实现代码如下: 复制代码 代码如下: #include <Windows.h>  #include "resource.h"  #include <Commctrl.h>  //对话框函数  INT_PTR CALLBACK DialogProc(      __in  HWND hwndDlg,      __in  UINT uMsg,      __in  WPARAM wParam,     

  • OC - 9.基于Quartz2D绘制下载进度条(demo)

    OC - 9.基于Quartz2D绘制下载进度条(demo)

    效果图 实现思路 要实现绘图,通常需要自定义一个UIView的子类,重写父类的- (void)drawRect:(CGRect)rect方法,在该方法中实现绘图操作 若想显示下载进度,只需要实例化自定义子类的对象(若是storyboard中控件,只需修改控件的class属性为自定义子类的类名即可) 效果图所示的效果其实是绘制一个圆弧,动态的改变终点的位置,最终达到一个封闭的圆 中间的文字是一个UILabel控件,根据进度动态改变文字的现实 实现步骤 自定义一个UIView的子类 //提供一个成员

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

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

  • Android实现百分比下载进度条效果

    Android实现百分比下载进度条效果

    现在很多APP中都会集成下载功能,所以有一个方便好看又实用的进度条来展示下载进度很有必要,也能提高用户体验,在这里我就把项目里的下载进度条抽取出来分享给大家,话不多说,先看效果图: 这个进度条是自定义的一个View,其中有一个自定义属性就是百分比文字的大小(也可以把那两条显示颜色的进度条自定义属性,这里就没有实现,在代码里面写的). 先说说实现原理: 1:由于自定义了属性,所以先获取属性的值. 2:绘制底色那条灰色的线. 3:根据传入的数据计算当前百分比,然后绘制那条橘黄色的线. 4:再在橘黄色

  • Android实现下载进度条效果

    Android实现下载进度条效果

    目录 最终效果和对比vivo商店效果 分析1 - 计算进度 分析2 - 绘制圆角矩形 解决方案 分析3 - 绘制文字和交汇 手势拓展 最终效果和对比vivo商店效果 vivo应用商店下载效果: 最终实现效果: 分析1 - 计算进度 进度计算就比较简单了,我们通过复写onSizeChanged()方法,获取到控件的宽后,先计算当前进度百分比,再将百分比乘以宽度,就可以得到应该绘制的宽度了. 绘制圆角矩形需要传一个Rect,Rect的构造方法需要传4个位置,分别是left.top.right.bot

  • 详解JavaScript+Canvas绘制环形进度条

    详解JavaScript+Canvas绘制环形进度条

    目录 效果图 思考 实现思路 具体代码实现 效果图 思考 移动端的场景里经常会出现环形进度条的功能,在实现这个功能前,我预想的解决方案大致有: echarts.antv.canvas.svg 前面两种第三方提供的解决方案当然是简单,拿到案例修整一下即可,但是需要下载依赖,而且代码量不小.有没有不需要依赖第三方包,采用原生的写法,独立封装成一个组件,降低耦合,而且性能优越? 当然,那就主要介绍canvas的使用 实现思路 可以展示整个圆.半圆以及任意角度弧形(左右对称)的进度条.整体思路如下: 1

  • canvas绘制环形进度条

    canvas绘制环形进度条

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.

  • Android中使用AsyncTask做下载进度条实例代码

    android AsyncTask做下载进度条 AsyncTask是个不错的东西,可以使用它来做下载进度条.代码讲解如下: package com.example.downloadfile; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import android.a

  • 微信小程序实现下载进度条的方法

    微信小程序实现下载进度条的方法

    我们经常会在APP下载中看到下载进度条,这个进度条是为了和用户交互,告知用户当前的进度,不然让用户一直处于等待,用户等超过1分钟就会崩溃的,今天代码君就教大家如何在小程序中也制作下载进度条 progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress属性介绍 属性名 作用 参数值 percent 进度百分比0~100 show-info 在进度条右侧显示百分比 true/false 默认false active 进度条从左往右的动画 true/false

  • JS中实现一个下载进度条及播放进度条的代码

    术上没太大难度,有难度的地方是怎么让整个动画比较流畅.一个主要问题是动画的滞后性:当下载进度到某个点的时候,你再用250ms的动画过渡过去,这个时候已经慢了,所以很多人可能因为这个原因或者嫌麻烦,直接就不做动画了,在进度事件触发的时候直接更新进度条相应的位置,不过我们可以尝试实现一下. 最后做出来的效果如下图所示: 小狗奔跑的动画是一个lottie动画,来自 codepen . 1. 获取下载进度 ajax里面可以拿到下载进度,如下代码所示: let xhr = new XMLHttpReque

  • 使用python制作游戏下载进度条的代码（程序说明见注释）

    使用python制作游戏下载进度条的代码（程序说明见注释）

    import time # time模块中包含了许多与时间相关的模块,其中通过time()函数可以获取当前的时间. count = 100 print("开始下载".center(100, '-')) start = time.perf_counter() # 通过time()函数可以获取当前的时间并付给变量start for i in range(count + 1): a = "■" * i # 用■的个数来具体化已经下载完的进度.■在输入法里的特殊符号里. b

随机推荐