弧形进度条（类似芝麻信用）

http://code.cocoachina.com/view/128569

.h

#import <UIKit/UIKit.h>

#define kScreenW [[UIScreen mainScreen] bounds].size.width

 

#define kScreenH [[UIScreen mainScreen] bounds].size.height

@interface HuView : UIView

@property(nonatomic,assign)int num;

@property(nonatomic,strong)UILabel *numLabel;

@property(nonatomic,strong)NSTimer *timer;

@end

.m

//

//  HuView.m

//  弧形进度条

//

//  Created by clare on 15/12/8.

//  Copyright © 2015年 zhou. All rights reserved.

//

 

#import "HuView.h"

 

@implementation HuView

 

- (void)drawRect:(CGRect)rect {

    //    仪表盘底部

    drawHu1();

    //    仪表盘进度

    [self drawHu2];

}

-(void)drawHu2

{

    //1.获取上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    //1.1 设置线条的宽度

    CGContextSetLineWidth(ctx, 10);

    //1.2 设置线条的起始点样式

    CGContextSetLineCap(ctx,kCGLineCapButt);

    //1.3  虚实切换 ，实线5虚线10

    CGFloat length[] = {4,8};

    CGContextSetLineDash(ctx, 0, length, 2);

    //1.4 设置颜色

    [[UIColor whiteColor] set];

    

    //2.设置路径

 

    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(numberChange:) name:@"number" object:nil];

    

    CGFloat end = -5*M_PI_4+(6*M_PI_4*_num/100);

    

    CGContextAddArc(ctx, kScreenW/2 , kScreenW/2, 80, -5*M_PI_4, end , 0);

  

    //3.绘制

    CGContextStrokePath(ctx);

    

    

}

 

-(void)numberChange:(NSNotification*)text

{

    _num = [text.userInfo[@"num"] intValue];

    

    [self setNeedsDisplay];

    

}

 

void drawHu1()

{

    //1.获取上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    //1.1 设置线条的宽度

    CGContextSetLineWidth(ctx, 10);

    //1.2 设置线条的起始点样式

    CGContextSetLineCap(ctx,kCGLineCapButt);

    //1.3  虚实切换 ，实线5虚线10

    CGFloat length[] = {4,8};

    CGContextSetLineDash(ctx, 0, length, 2);

    //1.4 设置颜色

    [[UIColor blackColor] set];

    //2.设置路径

    CGContextAddArc(ctx, kScreenW/2 , kScreenW/2, 80, -5*M_PI_4, M_PI_4, 0);

    //3.绘制

    CGContextStrokePath(ctx);

    

}

 

-(void)setNum:(int)num

{

    _num = num;

    

}

 

 

- (instancetype)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

        

        

        _numLabel = [[UILabel alloc]initWithFrame:CGRectMake((kScreenW-120)/2, (kScreenW-80)/2, 120, 80)];

        _numLabel.textAlignment  = NSTextAlignmentCenter;

        _numLabel.textColor = [UIColor whiteColor];

        _numLabel.font = [UIFont systemFontOfSize:60];

        

        

        if (!_timer) {

            _timer = [NSTimer scheduledTimerWithTimeInterval:.1 target:self selector:@selector(change) userInfo:nil repeats:YES];

        }

        

        

        [self addSubview:_numLabel];

        

    }

    return self;

}

-(void)change

{

    _num +=1;

    

    if (_num > 100) {

        _num = 0;

    }

    

    _numLabel.text = [NSString stringWithFormat:@"%d",_num];

    

    NSDictionary *dic = [[NSDictionary alloc]initWithObjectsAndKeys:_numLabel.text,@"num", nil];

    

    //    创建通知

    NSNotification *noti = [NSNotification notificationWithName:@"number" object:nil userInfo:dic];

    //    发送通知

    [[NSNotificationCenter defaultCenter]postNotification:noti];

    

}

@end

 

在控制器中调用

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

    //创建自定义的仪表盘

    _huView = [[HuView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, kScreenW)];

    _huView.backgroundColor = [UIColor lightGrayColor];

    [self.view addSubview:_huView];

    _huView.backgroundColor = [UIColor greenColor];

    }

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

ios 绘制虚线 CGContextSetLineDash的使用

Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框.

画虚线需要用到函数：

CGContextSetLineDash

此函数需要四个参数：

context– 这个不用多说

phase- 稍后再说

lengths– 指明虚线是如何交替绘制，具体看例子

count – lengths数组的长度

CGContextRef context =UIGraphicsGetCurrentContext(); 

 CGContextBeginPath(context);  

CGContextSetLineWidth(context, 2.0); 

 CGContextSetStrokeColorWithColor(context, [UIColorwhiteColor].CGColor); 

 float lengths[] = {10,10};  

CGContextSetLineDash(context, 0, lengths,2);  

CGContextMoveToPoint(context, 10.0, 20.0); 

 CGContextAddLineToPoint(context, 310.0,20.0);  

CGContextStrokePath(context);  

CGContextClosePath(context); 

lengths的值｛10,10｝表示先绘制10个点，再跳过10个点，如此反复，如图：

 

如果把lengths值改为｛10, 20, 10｝，则表示先绘制10个点，跳过20个点，绘制10个点，跳过10个点，再绘制20个点，如此反复，如图：

 

注意count的值等于lengths数组的长度

phase参数表示在第一个虚线绘制的时候跳过多少个点，举例说明：

float lengths[] = {10,5};  

CGContextSetLineDash(context, 0, lengths, 2);    

CGContextMoveToPoint(context, 0.0, 20.0);    

CGContextAddLineToPoint(context, 310.0, 20.0);     

CGContextStrokePath(context);  

 

CGContextSetLineDash(context, 5, lengths, 2);  

CGContextMoveToPoint(context, 0.0, 40.0);    

CGContextAddLineToPoint(context, 310.0, 40.0);  

CGContextStrokePath(context);             

 

CGContextSetLineDash(context, 8, lengths, 2);     

CGContextMoveToPoint(context, 0.0, 60.0);             

CGContextAddLineToPoint(context, 310.0, 60.);             

CGContextStrokePath(context); 

如图显示：

 

由于lengths值为｛10，5｝，第一条线就是绘制10，跳过5，反复绘制。

第二条线的phase值为5，则首先绘制【10减去5】，再跳过5，绘制10，反复绘制。

第三条给也如此，先绘制2，再跳过5，如此反复。

作者：天狼鹰
链接：https://www.jianshu.com/p/f6a7e8d3fdb3
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

iOS开发随笔之画圆弧CGContextAddArc

https://blog.csdn.net/biangabiang/article/details/82993772

CGContextAddArc(CGContextRef cg_nullable c, CGFloat x, CGFloat y,
    CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
//  CGContextRef cg_nullable c   图形上下文
//  CGFloat x    圆心x坐标
//  CGFloat y  圆形y坐标
//  CGFloat radius  圆半径
//  CGFloat startAngle  起始弧度
//  CGFloat endAngle  结束弧度
//  int clockwise  绘制方向，0 顺时针，1 逆时针

绘制时的坐标系和手机坐标系是一样的，右下为正，左上为负

示例：顺时针方向画一个从M_PI_2到-M_PI_2的圆弧

CGContextRef context = UIGraphicsGetCurrentContext();
[COLOR2 setStroke]; 
CGContextSetLineWidth(context, 5.0);
CGContextAddArc(context, 200, 200, 50, M_PI_2, -M_PI_2, 0);
CGContextDrawPath(context, kCGPathStroke);

————————————————
版权声明：本文为CSDN博主「_Harry_」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/biangabiang/article/details/82993772