CAShapeLayer是CALayer的子类,但是CAShapeLayer的绘制必须依附于CGPath,其类型为CGPathRef。
使用CAShapeLayer创建一个圆形,一个多边形:
//圆形
CAShapeLayer *circleLayer = [CAShapeLayer layer];
//创建circleLayer图层,相当于容器,并不实际显示
circleLayer.frame = CGRectMake(60, 120, 120, 120);
//设置填充色
circleLayer.fillColor = [UIColor blueColor].CGColor;
//路径的颜色
circleLayer.strokeColor = [UIColor blackColor].CGColor;
//路径的宽度
circleLayer.lineWidth = 3;
//添加图层
[self.view.layer addSublayer:circleLayer];
//创建一个环形路径,其坐标是相对circleLayer的
UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 120, 120) cornerRadius:60];
circleLayer.path = circlePath.CGPath;
//多边形
CAShapeLayer *starLayer = [CAShapeLayer layer];
starLayer.frame = CGRectMake(250, 120, 120, 120);
starLayer.fillColor = [UIColor blueColor].CGColor;
starLayer.strokeColor = [UIColor blackColor].CGColor;
starLayer.lineWidth = 3;
[self.view.layer addSublayer:starLayer];
UIBezierPath *starPath = [UIBezierPath bezierPath];
[starPath moveToPoint:CGPointMake(60, 0)];
[starPath addLineToPoint:CGPointMake(90, 60)];
[starPath addLineToPoint:CGPointMake(120, 60)];
[starPath addLineToPoint:CGPointMake(95, 70)];
[starPath addLineToPoint:CGPointMake(115, 120)];
[starPath addLineToPoint:CGPointMake(60, 90)];
[starPath addLineToPoint:CGPointMake(5, 120)];
[starPath addLineToPoint:CGPointMake(25, 70)];
[starPath addLineToPoint:CGPointMake(0, 60)];
[starPath addLineToPoint:CGPointMake(30, 60)];
[starPath closePath];
starLayer.path = starPath.CGPath;
接下来使用CAShapeLayer配合NSTimer实现一个环形的进度条:
UIBezierPath *progressPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 180, 180)];
self.progressLayer = [CAShapeLayer layer];
self.progressLayer.frame = CGRectMake(self.view.bounds.size.width/2-100, self.view.bounds.size.height/2+80, 200, 200);
self.progressLayer.fillColor = [UIColor clearColor].CGColor;
self.progressLayer.strokeColor = [UIColor orangeColor].CGColor;
self.progressLayer.lineWidth = 5;
self.progressLayer.path = progressPath.CGPath;
//环形的开始位置是从右边开始的,这里为了达到效果,需要旋转90度
[self.progressLayer setValue:@(M_PI_2) forKeyPath:@"transform.rotation.z"];
[self.view.layer addSublayer:self.progressLayer];
//strokeStart和strokeEnd就是画笔的起点和终点
//0在最右边,0.25在下,0.5在左,0.75在上,1在最右和0重合
self.progressLayer.strokeStart = 0;
self.progressLayer.strokeEnd = 0;
//使用NSTimer实现的动画效果
_timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(progressSetting) userInfo:nil repeats:NO];
- (void)progressSetting {
self.progressLayer.strokeStart = 0.15;
self.progressLayer.strokeEnd = 0.85;
}
CAShapeLayer在这里值得说的两个属性也就是strokeStart和strokeEnd,strokeStart和strokeEnd 都是0-1的取值范围。分别表示路径的开始和结尾位置。比如开始位置为0.5结束位置为1 那就只渲染出后半段的路径。
参考链接
http://blog.csdn.net/yixiangboy/article/details/50662704