CAShaper主要用于绘图，类似于直线、曲线、各种图形、贝塞尔曲线、虚线等等。下面主要介绍几个常用的绘图
GitHub工程地址本篇主要的内容在Layer/CAShaperLayer/ShaperLayer里
一、先说下CAShaperLayer的属性
/*
* CAShapeLayer属性解释：
*
** @property(nullable) CGPathRef path;
呈现的形状的路径。赋值时，路径被复制。默认为null
** @property(nullable) CGColorRef fillColor;
填充路径的颜色，或不需要填充。默认颜色为不透明的黑色。
** @property(copy) NSString *fillRule;
当在填充颜色的时候则就需要这种填充规则，值有两种，非零和奇偶数，但默认是非零值。
** @property(nullable) CGColorRef strokeColor;
设置描边色，默认无色。
** @property CGFloat strokeStart; @property CGFloat strokeEnd;
这两个值被定义用于绘制边线轮廓路径的子区域。该值必须在[0,1]范围，0代表路径的开始，1代表路径的结束。在0和1之间的值沿路径长度进行线性插值。strokestart默认为0，strokeend默认为1。
** @property CGFloat lineWidth;
lineWidth为线的宽度，默认为1；
** @property CGFloat miterLimit;
miterLimit为最大斜接长度。斜接长度指的是在两条线交汇处和外交之间的距离。只有lineJoin属性为kCALineJoinMiter时miterLimit才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用miterLimit属性。如果斜接长度超过miterLimit的值，边角会以lineJoin的“bevel”即kCALineJoinBevel类型来显示。
** @property(copy) NSString *lineCap;
lineCap为线端点类型，值有三个类型，分别为kCALineCapButt 、kCALineCapRound 、kCALineCapSquare，默认值为Butt；
** @property(copy) NSString *lineJoin;
lineJoin为线连接类型，其值也有三个类型，分别为kCALineJoinMiter、kCALineJoinRound、kCALineJoinBevel，默认值是Miter
** @property CGFloat lineDashPhase;
lineDashPhase为线型模版的起始位置
** @property(nullable, copy) NSArray<NSNumber *> *lineDashPattern;
lineDashPattern为线性模版，这是一个NSNumber的数组，索引从1开始记，奇数位数值表示实线长度，偶数位数值表示空白长度。
*/
1、直线
/*线性的CAShapeLayer*/
- (CAShapeLayer *)lineLayer
{
if(!_lineLayer){
_lineLayer = [[CAShapeLayer alloc] init];
// 设置线条颜色
_lineLayer.strokeColor = [UIColor redColor].CGColor;
// 设置线条宽度
_lineLayer.lineWidth = 5;
// 绘制线条路径
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(200, 100)];
//设置layer的path
_lineLayer.path = path.CGPath;
}
return _lineLayer;
}
效果
直线
2.虚线
/*线性的CAShapeLayer*/
- (CAShapeLayer *)lineLayer
{
if(!_lineLayer){
_lineLayer = [[CAShapeLayer alloc] init];
// 设置线条颜色
_lineLayer.strokeColor = [UIColor redColor].CGColor;
// 设置线条宽度
_lineLayer.lineWidth = 5;
// 绘制线条路径
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(200, 100)];
// 连接类型为round，就是拐角处的线条类型
_lineLayer.lineJoin = kCALineJoinRound;
//线性模版，这是一个NSNumber的数组，索引从1开始记，奇数位数值表示实线长度，偶数位数值表示空白长度。下面表示的是一个等距等宽的虚线。
_lineLayer.lineDashPattern = @[@5,@5];
//设置layer的path
_lineLayer.path = path.CGPath;
}
return _lineLayer;
}
效果
虚线
3、弧线
/*弧线CAShapeLayer*/
- (CAShapeLayer *)radianLayer
{
if(!_radianLayer){
_radianLayer = [[CAShapeLayer alloc] init];
_radianLayer.strokeColor = [UIColor orangeColor].CGColor;
// 设置fillColor填充色为透明，这样绘制的时候才会以线的形式绘制
_radianLayer.fillColor = [UIColor clearColor].CGColor;
// 设置layer的路径
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
// 第一个参数为结束点，第二个参数为控制点
[path addQuadCurveToPoint:CGPointMake(250, 250) controlPoint:CGPointMake(150, 300)];
_radianLayer.path = path.CGPath;
}
return _radianLayer;
}
效果
弧线
4、曲线
/*曲线*/
- (CAShapeLayer *)curveLayer
{
if(!_curveLayer){
_curveLayer = [[CAShapeLayer alloc] init];
_curveLayer.strokeColor = [UIColor greenColor].CGColor;
_curveLayer.fillColor = [UIColor clearColor].CGColor;
// 绘制曲线
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 350)];
// 第一个参数是终点位置；第二个参数是第一个控制点；第三个参数是第二个控制点
[path addCurveToPoint:CGPointMake(250, 350) controlPoint1:CGPointMake(100, 250) controlPoint2:CGPointMake(200, 450)];
_curveLayer.path = path.CGPath;
}
return _curveLayer;
}
效果
曲线
5、空心圆
/*圆形CAShapeLayer*/
- (CAShapeLayer *)circleLayer
{
if(!_circleLayer){
_circleLayer = [[CAShapeLayer alloc] init];
_circleLayer.strokeColor = [UIColor yellowColor].CGColor;
_circleLayer.lineWidth = 5;
_circleLayer.position = CGPointMake(70, 150);
_circleLayer.fillColor = [UIColor clearColor].CGColor;
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
_circleLayer.path = path.CGPath;
}
return _circleLayer;
}
效果
空心圆
6、带填充色的圆
空心圆和带填充色的圆，代码只有一处不同：
_circleLayer.fillColor = [UIColor redColor].CGColor;//填充色为红色
_circleLayer.fillColor = [UIColor clearColor].CGColor;//填充色为透明
/*圆形CAShapeLayer*/
- (CAShapeLayer *)circleLayer
{
if(!_circleLayer){
_circleLayer = [[CAShapeLayer alloc] init];
_circleLayer.strokeColor = [UIColor yellowColor].CGColor;
_circleLayer.lineWidth = 5;
_circleLayer.position = CGPointMake(70, 150);
_circleLayer.fillColor = [UIColor redColor].CGColor;
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
_circleLayer.path = path.CGPath;
}
return _circleLayer;
}
效果
实心圆
这篇说道的是CAShaperLayer的基础绘图，下篇会介绍CAShaperLayer的动画，主要介绍一个进度条和一个注水动画
网友评论