UIBezierPath是UIKit中Core Graphics框架中的一个类，使用UIBezierPath可以绘制各种简单的图形。
入门篇：iOS-贝塞尔曲线(UIBezierPath)的使用(一)
进阶篇：iOS-贝塞尔曲线(UIBezierPath)详解(二)
我在上一篇文章中简单介绍了一下在UIView的- (void)drawRect:(CGRect)rect方法里面绘制图形。但是在实际使用的时候往往用的不多。本篇文章主要介绍一个关于CAShapeLayer的使用
我们会绘制一些常用的图形，以及图形动画。
今天我们将UIBezierPath结合CAShapeLayer使用。
CAShapeLayer和UIView里面的drawRect方法不一样，稍微有点麻烦，我们要先了解一些概念：
👇 👇 👇 👇 👇 👇
CAShapeLayer
先简单介绍一些CAShapeLayer：
- CAShapeLayer继承自CALayer，因此，它具有CALayer的所有特性。但是，CAShapeLayer需要和贝塞尔曲线配合使用才有意义。
CAShapeLayer和drawRect比较：
- CAShapeLayer：属于CoreAnimation框架，通过GPU来渲染图形，不耗费性能。
- drawRect：属于Core Graphics框架爱，占用大量CPU，耗费性能。
CAShapeLayer属性列表简介
-
path: CGPathRef对象，图像形状的路径 -
fillColor：CGColorRef对象，图像填充颜色，默认黑色 -
strokeColor：边线的颜色 -
strokeStart,strokeEnd：CGFloat类型，表示画边线的起点和终点，范围是[0,1]。 -
lineWidth：边线的宽度 -
miterLimit：描边时使用的斜接限制。默认为10。 -
lineCap：线条终点的样式 -
lineJoin：线条拐点的样式 -
lineDashPhase：边线的起始位置，表现是一段空白 -
lineDashPattern：这是一个数组，表示设置边线的样式，默认是实线，数组中的数值依次表示虚线中，单个线段长度，一段空白长度，比如：@[2,3,4,5]表示：长度为2的线，后面长度为3的空白，后面长度为4的线，，长度为5的空白，以此类推，不断循环。
CAShapeLayer与UIBezierPath的关系
- 贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，绘制出shape。
- 贝塞尔曲线可以创建适量路径，UIBezierPath是一个CGPathRef的封装
- 用于CAShapeLayer的贝塞尔曲线作为path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线
也就是说：将UIBezierPath对象转化为CGPathRef对象，赋值给CAShapeLayer的path属性，即可画出各种图形。
下面我们写几个常用的例子：
更详细的可以参考iOS-贝塞尔曲线(UIBezierPath)的使用(一)
折线
使用方法：
//折线
- (void)test1{
// 创建一个路径对象
UIBezierPath *linePath = [UIBezierPath bezierPath];
// 起点
[linePath moveToPoint:CGPointMake(100, 100)];
// 其他点
[linePath addLineToPoint:CGPointMake(200,200)];
[linePath addLineToPoint:CGPointMake(230,130)];
// 设置路径画布
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.bounds = CGRectMake(0, 0, 300, 300);
lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
lineLayer.lineWidth = 3.0;
lineLayer.strokeColor = [UIColor redColor].CGColor; // 边线颜色
lineLayer.path = linePath.CGPath;
lineLayer.fillColor = nil; // 默认是black
[self.bgView.layer addSublayer:lineLayer];
}
效果图如下：
折线
多边形
使用方法：
- (void)test2{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(150, 50)];
[path addLineToPoint:CGPointMake(250, 100)];
[path addLineToPoint:CGPointMake(250, 200)];
[path addLineToPoint:CGPointMake(100, 200)];
[path closePath]; // 最后一根线条,可以直接调此方法
// 设置路径画布
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.bounds = CGRectMake(0, 0, 300, 300);
lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
lineLayer.lineWidth = 3.0;
lineLayer.strokeColor = [UIColor redColor].CGColor; // 边线颜色
lineLayer.path = path.CGPath;
lineLayer.fillColor = [UIColor yellowColor].CGColor; // 默认是black
[self.bgView.layer addSublayer:lineLayer];
}
效果图如下：
多边形
圆弧
使用方法
- (void)test3{
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:100 startAngle:1.25 * M_PI endAngle:1.75 * M_PI clockwise:YES];
[path addLineToPoint:CGPointMake(200, 200)];
[path closePath];
// 设置路径画布
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.bounds = CGRectMake(0, 0, 300, 300);
lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
lineLayer.lineWidth = 3.0;
lineLayer.strokeColor = [UIColor redColor].CGColor; // 边线颜色
lineLayer.path = path.CGPath;
lineLayer.fillColor = [UIColor yellowColor].CGColor; // 默认是black
lineLayer.lineCap = kCALineCapRound;
lineLayer.lineJoin = kCALineJoinRound; //线条拐角
[self.bgView.layer addSublayer:lineLayer];
}
效果图如下：
圆弧
小结：
大家可以看出来CAShapeLayer的使用基本和UIView里面的drawRect使用类似，首选创建UIBezierPath，将path赋值给CAShapeLayer即可。
所以其他的例子：园，椭圆，矩形，曲线等等，就不再一一距离了。
下面我们介绍一下mask
为已有视图画圆角
在项目中经常会有切圆角的情况，我们使用masksToBounds即可，结果就会给视图切四个圆角。
但是，当我们只需要切其中一个，或者两个圆角的时候怎么切呢？
关键在于：self.testView.layer.mask = lineLayer;
使用方法如下：
self.testView.backgroundColor = [UIColor orangeColor];
self.testView.frame = CGRectMake(100, 100, 200, 200);
[self.view addSubview:self.testView];
- (void)test4{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.testView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(25, 25)];
// 设置路径画布
CAShapeLayer *lineLayer = [[CAShapeLayer alloc] init];
lineLayer.frame = self.testView.bounds;
lineLayer.path = path.CGPath;
[self.testView.layer addSublayer:lineLayer];
self.testView.layer.mask = lineLayer;
}
效果如下：
切圆角
动画
我们什么时候会用到贝塞尔曲线呢？
最常见的是走势图，比如：记录最近一周的温度变化，每年度NBA排名趋势，等等。。。
比如：
趋势图
一般就是换一个折线即可。如果我们加上动画，那就更好看了，下面我们举个简单的例子：
先看效果图：
动画图
使用方法：
.h文件
@interface JJBezierAnimationView : UIView
- (void)setItemValues:(NSArray *)items;
@end
.m文件
#import "JJBezierAnimationView.h"
@interface JJBezierAnimationView()
@end
@implementation JJBezierAnimationView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
- (void)setItemValues:(NSArray *)items{
UIBezierPath *pAxisPath = [UIBezierPath bezierPath];
CGFloat margin = 50;
CGFloat w = 30;
CGFloat h = 20;
for (int i = 0; i < items.count; i ++) {
NSString *str = items[i];
CGFloat value = [str floatValue];
CGPoint point = CGPointMake(margin + i * w, h * value+100);
if (i == 0) {
[pAxisPath moveToPoint:point];
} else {
[pAxisPath addLineToPoint:point];
}
}
CAShapeLayer *pAxisLayer = [CAShapeLayer layer];
pAxisLayer.lineWidth = 3;
pAxisLayer.strokeColor = [UIColor redColor].CGColor;
pAxisLayer.fillColor = [UIColor clearColor].CGColor;
pAxisLayer.path = pAxisPath.CGPath;
[self.layer addSublayer:pAxisLayer];
CABasicAnimation *anmi = [CABasicAnimation animation];
anmi.keyPath = @"strokeEnd";
anmi.fromValue = [NSNumber numberWithFloat:0];
anmi.toValue = [NSNumber numberWithFloat:1.0f];
anmi.duration = 5;
anmi.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anmi.autoreverses = NO;
[pAxisLayer addAnimation:anmi forKey:@"stroke"];
}
@end
调用方法：
JJBezierAnimationView *bezierView = [[JJBezierAnimationView alloc] init];
[bezierView setItemValues:@[@"1",@"4",@"3",@"2",@"8",@"6",@"2",@"8",@"5",@"7",@"4",@"6"]];
[self.bgView addSubview:bezierView];
总结
本文简单介绍了CAShapeLayer的使用。
iOS-贝塞尔曲线(UIBezierPath)的使用(一)和本篇文章介绍的都是很基础的使用，后面我们做一些小demo。
网友评论