CAShapeLayer属于QuartzCore框架,继承与CALayer,所以本质上CAShapeLayer是一个layer,layer有的属性他都有。CAShapeLayer是通过矢量图形而不是bitmap来绘制图层子类,指定诸如颜色和线宽等属性,用CGPath来绘制图形。CAShapeLayer主要作用是根据路径来绘制图形。只要给定一个路径然后他进行绘制,常用来和BezierPath配合使用。
相关属性
CGPathRef path 路径
CGColorRef fillcolor 填充颜色
CGColorRef strokeColor 路径颜色
CGFloat strokeStart 开始值0-1
CGFloat strokeEnd 结束值0-1
CGFloat lineWidth 线宽
CGFloat miterLimit 内角和外角距离
NSString fillRule 填充规则,默认非零法则,奇偶原则
`fillRule' values.
CA_EXTERN NSString *const kCAFillRuleNonZero //非零
CA_EXTERN NSString *const kCAFillRuleEvenOdd //齐偶
NSString lineCap。 线端口(开始点和结束点)类型
CA_EXTERN NSString *const kCALineCapButt 方形结束, 结束位置正好为精确位置。——默认值
CA_EXTERN NSString *const kCALineCapRound 圆角
CA_EXTERN NSString *const kCALineCapSquare //方形结束, 结束位置超过精确位置半个线宽。
NSString lineJoin 线连接处类型
CA_EXTERN NSString *const kCALineJoinMiter 尖角 默认
CA_EXTERN NSString *const kCALineJoinRound 圆角
CA_EXTERN NSString *const kCALineJoinBevel 斜角
CGFloat。 lineDashPhase 绘制虚线路径 线性模版起始位置
NSArray *lineDashPattern。 线性模版,数组实线和虚线循环 @[@6,@6]该属性默认是实线绘制,如果设置那么就是设置线新大小的值设置越大线体粒子越大,反之越小,前一个值设置线性粒子粗细,后一个值设置间隔粗细
demo
1.和bezierPath配合进行画圆
@property(nonatomic,strong) CAShapeLayer *layer; 绘制
@property(nonatomic,strong) NSTimer *waterTimer; 定时器
- (void)viewDidLoad {
[super viewDidLoad];
//圆
UIBezierPath *bezi = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)];
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
//路径
layer.path = bezi.CGPath;
//路径颜色
layer.strokeColor = [UIColor redColor].CGColor;
//填充色
layer.fillColor = [UIColor whiteColor].CGColor;
//线宽
layer.lineWidth = 15;
//开始值 先不设置在定时器中设置让他循环填充
layer.strokeStart = 0;
//结束值
layer.strokeEnd = 0;
//默认不设置是实线绘制,如果设置那么会虚线绘制前一个值是绘制虚线粗细,后一个值间隔粗细
// layer.lineDashPattern = @[@6,@2];
[self.showView.layer addSublayer:layer];
self.layer = layer;
self.waterTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(waterAction) userInfo:nil repeats:YES];
}
- (void)waterAction{
if (self.layer.strokeEnd >=1) {
销毁定时器
[self.waterTimer invalidate];
self.waterTimer = nil;
return;
}else{
每次+0.02;
self.layer.strokeEnd +=0.02;
}
}
demo2 渐变色圆形进度条
需要用到的知识:mask遮罩+CAGradientLayer渐变+BezierPath+CASapeLayer
@property(nonatomic,strong)UIView *contentMaksView; 遮罩层
@property(nonatomic,strong) CAGradientLayer *gradlayer; 渐变layer
@property(nonatomic,strong) NSTimer *waterTimer; 定时器
@property(nonatomic,strong) CAShapeLayer *shapeLayer; 绘制layer
//贝塞尔曲线路径画圆
UIBezierPath *bezi = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10,10,100,100)];
//创建绘制对象
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
//获取路径
layer.path = bezi.CGPath;
//路径颜色
layer.strokeColor = [UIColor redColor].CGColor;
//填充色
layer.fillColor = [UIColor whiteColor].CGColor;
//线宽
layer.lineWidth = 15;
//开始值
layer.strokeStart = 0;
//结束值
layer.strokeEnd = 0;
//默认,不设置是实线绘制,如果设置那么会虚线绘制前一个值是绘制虚线粗细,后一个值间隔粗细
layer.lineDashPattern = @[@6,@2];
self.shapeLayer = layer;
//渐变图层
_gradlayer = [CAGradientLayer layer];
[ _gradlayer setStartPoint:CGPointMake(0.3, 0.5)];
[ _gradlayer setEndPoint:CGPointMake(1, 1)];
_gradlayer.frame = CGRectMake(0,0,frame.size.width, frame.size.height);
_gradlayer.colors=@[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor brownColor].CGColor,(id)[UIColor purpleColor].CGColor];
[ _gradlayer setLocations:@[@0.2,@0.4,@0.7,@1.0]];
//渐变图层上添加一个遮挡图层,在渐变图层上显示遮挡图层形状,
[_gradlayer setMask:_shapeLayer];
//将渐变图层加入到view的layer上
[self.layer addSublayer:_gradlayer];
//遮挡图层
_contentMaksView = [[UIView alloc]initWithFrame:CGRectMake(9,9,102,102)];
_contentMaksView.layer.cornerRadius = 50;
_contentMaksView.layer.masksToBounds = YES;
_contentMaksView.backgroundColor = [UIColor whiteColor];
[self addSubview:_contentMaksView];
//定时器
self.waterTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(waterAction) userInfo:nil repeats:YES];
- (void)waterAction{
if (self.shapeLayer.strokeEnd >=1) {
[self.waterTimer invalidate];
self.waterTimer = nil;
return;
}else{
self.shapeLayer.strokeEnd +=0.02;
}
}