繪圖的實現

weixin_34402408發表於2017-08-08

import "testView.h"

@interface testView ()

@property(nonatomic,strong)CAShapeLayer * trackeLayer;
@property(nonatomic,strong)UIBezierPath * trackPath;
@property(nonatomic,strong)CAShapeLayer * progressLayer;
@property(nonatomic,strong)UIBezierPath * progressPath;

@property(nonatomic,strong)CAGradientLayer * gradientLayer;
@end

@implementation testView

-(instancetype)initWithFrame:(CGRect)frame{

if (self = [super initWithFrame:frame]) {
    [self setUpTrackeLayer];
    [self setUpProgressLayer];
    self.progressWidth = 5;
}
return  self;

}

-(void)setUpTrackeLayer{
_trackeLayer = [CAShapeLayer layer];
[self.layer addSublayer:_trackeLayer];
_trackeLayer.fillColor = nil;
_trackeLayer.frame = self.bounds;

}

-(void)setUpProgressLayer{
//建立
_progressLayer = [CAShapeLayer layer];
// 新增
[self.layer addSublayer:_progressLayer];

//設定填充色
_progressLayer.fillColor = [UIColor clearColor].CGColor;
// 設定尺寸
_progressLayer.frame = self.bounds;

// 設定開始的位置
_progressLayer.strokeStart = 0;
// 設定結束的位置
_progressLayer.strokeEnd = 0.6;

}

-(void)setTrack{

_trackPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];


_trackeLayer.path = _trackPath.CGPath;

}

-(void)SetprogressPath{

// 這種貝塞爾曲線的patch 是可以改變的。可以多?思考實現掐的
_progressPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * _progress - M_PI_2 clockwise:YES];
//.建立貝塞爾曲線
_progressPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:-M_PI/2 endAngle:M_PI*1.5 clockwise:YES];

// 給進度的layer確定範圍
_progressLayer.path = _progressPath.CGPath;

}

-(void)setProgressColor:(UIColor *)progressColor{

_progressLayer.strokeColor = progressColor.CGColor;

}

  • (void)setTrackColor:(UIColor *)trackColor
    {
    _trackeLayer.strokeColor = trackColor.CGColor;
    }

-(void)setProgress:(float)progress{

_progress = progress;
[self SetprogressPath];
[self set_gradientLayer];

}

-(void)setProgressWidth:(float)progressWidth{

_progressWidth = progressWidth;
_trackeLayer.lineWidth = _progressWidth;
_progressLayer.lineWidth = _progressWidth;
[self setTrack];
[self SetprogressPath];

}

//給進度的layer 設定漸變色
-(void)set_gradientLayer{

_gradientLayer = [CAGradientLayer layer];

[_gradientLayer setColors:[NSArray arrayWithObjects:(id)[[UIColor orangeColor] CGColor],(id)[UIColor greenColor].CGColor, nil]];

_gradientLayer.frame = self.bounds;
_gradientLayer.startPoint = CGPointMake(0, 0);
_gradientLayer.endPoint = CGPointMake(0, 1);
[_gradientLayer setMask:self.progressLayer];
[self.layer addSublayer:_gradientLayer];}

相關文章