ios 画圆环进度条

#import <UIKit/UIKit.h>

@interface SNCircleProgressView : UIView
/**
 *  进度值0-1.0之间
 */
@property (nonatomic,assign)CGFloat progressValue;

/**
 *  边宽
 */
@property(nonatomic,assign) CGFloat progressStrokeWidth;

/**
 *  进度条颜色
 */
@property(nonatomic,strong)UIColor *progressColor;

/**
 *  进度条轨道颜色
 */
@property(nonatomic,strong)UIColor *progressTrackColor;

@end

#import "SNCircleProgressView.h"

@interface SNCircleProgressView ()
{
    
    CAShapeLayer *backGroundLayer; //背景图层
    CAShapeLayer *frontFillLayer;      //用来填充的图层
    UIBezierPath *backGroundBezierPath; //背景贝赛尔曲线
    UIBezierPath *frontFillBezierPath;  //用来填充的贝赛尔曲线
    

}
@end


@implementation SNCircleProgressView
@synthesize progressColor = _progressColor;
@synthesize progressTrackColor = _progressTrackColor;
@synthesize progressValue = _progressValue;
@synthesize progressStrokeWidth = _progressStrokeWidth;
- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]) {
        [self setUp];
    }
    return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        [self setUp];
        
    }
    return self;

}
/**
 *  初始化创建图层
 */
- (void)setUp
{
    //创建背景图层
    backGroundLayer = [CAShapeLayer layer];
    backGroundLayer.fillColor = nil;
    backGroundLayer.frame = self.bounds;
    
    //创建填充图层
    frontFillLayer = [CAShapeLayer layer];
    frontFillLayer.fillColor = nil;
    frontFillLayer.frame = self.bounds;
    
  
    [self.layer addSublayer:backGroundLayer];
    [self.layer addSublayer:frontFillLayer];
}

- (void)setProgressColor:(UIColor *)progressColor
{
    _progressColor = progressColor;
    frontFillLayer.strokeColor = progressColor.CGColor;
}
- (UIColor *)progressColor
{
    return _progressColor;
}
- (void)setProgressTrackColor:(UIColor *)progressTrackColor
{
    _progressTrackColor = progressTrackColor;
    backGroundLayer.strokeColor = progressTrackColor.CGColor;
    backGroundBezierPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle:0 endAngle:M_PI*2
                                                       clockwise:YES];
    backGroundLayer.path = backGroundBezierPath.CGPath;
}
- (UIColor *)progressTrackColor
{
    return _progressTrackColor;
}
- (void)setProgressValue:(CGFloat)progressValue
{
    _progressValue = progressValue;
    frontFillBezierPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle:-M_PI_4 endAngle:(2*M_PI)*progressValue-M_PI_4 clockwise:YES];
    frontFillLayer.path = frontFillBezierPath.CGPath;
}
- (CGFloat)progressValue
{
    return _progressValue;
}
- (void)setProgressStrokeWidth:(CGFloat)progressStrokeWidth
{
    _progressStrokeWidth = progressStrokeWidth;
    frontFillLayer.lineWidth = progressStrokeWidth;
    backGroundLayer.lineWidth = progressStrokeWidth;
}
- (CGFloat)progressStrokeWidth
{
    return _progressStrokeWidth;
}
@end
#import "ViewController.h"
#import "SNCircleProgressView.h"
@interface ViewController ()
{
  SNCircleProgressView *progressView;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    progressView = [[SNCircleProgressView alloc]initWithFrame:CGRectMake(40,80, 100, 100)];
   
    progressView.progressColor = [UIColor redColor];
    progressView.progressStrokeWidth = 5.f;
    progressView.progressTrackColor = [UIColor whiteColor];
    
    [self.view addSubview:progressView];
    
    [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(changeProgressValue) userInfo:nil repeats:YES];
    
}
- (void)changeProgressValue
{
    progressView.progressValue += 0.1;
    if (progressView.progressValue>=1.f) {
        progressView.progressValue = 0.1f;
    }
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

转载于:https://www.cnblogs.com/thbbsky/p/4516726.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp是一个基于Vue.js的跨平台开发框架,可以用于开发iOS、Android、H5等多个平台的应用程序。要实现一个圆环进度条,可以按照以下步骤进行: 1. 在UniApp项目中创建一个组件,可以命名为CircleProgress。 2. 在CircleProgress组件的template中,使用canvas标签来绘制圆环。设置canvas的宽度和高度,并通过样式设置圆环的颜色、宽度等属性。 3. 在CircleProgress组件的script中,定义一个data属性,用于存储进度条的数值。可以设置默认值为0。 4. 在CircleProgress组件的mounted生命周期钩子函数中,获取canvas的上下文对象,并通过上下文对象的方法来绘制圆环。可以使用arc方法来绘制圆弧,再使用stroke方法来描边。 5. 在CircleProgress组件的watch属性中,监听进度条数值的变化,并在变化时重新绘制圆环。 6. 在需要使用圆环进度条的页面中,引入CircleProgress组件,并通过v-model指令来绑定进度条数值。 下面是一个简单的示例代码: ```html <template> <view class="circle-progress"> <canvas canvas-id="progressCanvas" style="width: 200px; height: 200px;"></canvas> </view> </template> <script> export default { data() { return { progress: 0, // 进度条数值 }; }, mounted() { this.drawProgress(); }, watch: { progress() { this.drawProgress(); }, }, methods: { drawProgress() { const ctx = uni.createCanvasContext('progressCanvas', this); const centerX = 100; // 圆心x坐标 const centerY = 100; // 圆心y坐标 const radius = 80; // 圆环半径 const startAngle = -Math.PI / 2; // 起始角度(-90度) const endAngle = startAngle + (this.progress / 100) * (Math.PI * 2); // 结束角度 ctx.clearRect(0, 0, 200, 200); // 清空布 ctx.setLineWidth(10); // 设置圆环宽度 ctx.setStrokeStyle('#ff0000'); // 设置圆环颜色 ctx.setLineCap('round'); // 设置圆环端点样式为圆形 ctx.beginPath(); ctx.arc(centerX, centerY, radius, startAngle, endAngle, false); ctx.stroke(); ctx.draw(); }, }, }; </script> <style> .circle-progress { display: flex; justify-content: center; align-items: center; } </style> ``` 在上述示例代码中,我们使用canvas标签来绘制圆环,并通过uni.createCanvasContext方法获取canvas的上下文对象。然后,根据进度条数值计算起始角度和结束角度,并使用arc方法绘制圆弧,再使用stroke方法描边。最后,通过调用draw方法来绘制圆环
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值