UIBezierPath :使用UIBezierPath类可以创建基于矢量的路径, 这个类在UIKit中. 此类是Core Graphics框架关于path的一个封装. 使用此类可以定义简单的形状, 如椭圆或者矩形, 或者有多个直线和曲线段组成的形状.
CAShapeLayer:CAShapeLayer 是 CALayer 的子类, 但是比 CALayer 更灵活, 可以画出各种图形. 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape). 具体的形状由其path(类型为CGPathRef)属性指定.
但是, CAShapeLayer 有一条属性 path , 用这个属性配合上 UIBezierPath 这个类使用可以达到很好的效果.
首先,说明下 UIBezierPath贝塞尔弧线常用方法
1 . 根据一个矩形画曲线
+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect
例: 画矩形
矩形.gif
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(130, 10, 100, 80)];
layer.path = path.CGPath;
//填充颜色
layer.fillColor = [UIColor clearColor].CGColor;
//边框颜色
layer.strokeColor = [UIColor redColor].CGColor;
[self.displayView.layer addSublayer:layer];
2 . 根据矩形框的内切圆画曲线
+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
//根据矩形画带圆角的曲线
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius
//在矩形中, 可以针对四角中的某个角加圆角
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii
参数：
corners:枚举值, 可以选择某个角
cornerRadii:圆角的大小
//以某个中心点画弧线
+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
参数：
center:弧线中心点的坐标
radius:弧线所在圆的半径
startAngle:弧线开始的角度值
endAngle:弧线结束的角度值
clockwise:是否顺时针画弧线
例: 通过弧度画圆
画圆.gif
//这个画出来是一个圆形
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:50];
layer.path = path.CGPath;
layer.fillColor = [UIColor orangeColor].CGColor;
layer.strokeColor = [UIColor blueColor].CGColor;
[self.displayView.layer addSublayer:layer];
//这个画出来是带圆角的矩形
CAShapeLayer *layer1 = [CAShapeLayer layer];
UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(120, 10, 100, 100) byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(10, 10)];
layer1.path = path1.CGPath;
layer1.fillColor = [UIColor clearColor].CGColor;
layer1.strokeColor = [UIColor redColor].CGColor;
[self.displayView.layer addSublayer:layer1];
//这是一段弧
CAShapeLayer *layer2 = [CAShapeLayer layer];
/*
param: ArcCenter 圆心 radius 半径 startAngle/endAngle 开始 结束角度 clockwise YES 顺时针 NO 逆时针
*/
UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(280, 60) radius:50 startAngle:0 endAngle:M_PI clockwise:YES];
layer2.path = path2.CGPath;
layer2.fillColor = [UIColor clearColor].CGColor;
layer2.strokeColor = [UIColor brownColor].CGColor;
[self.displayView.layer addSublayer:layer2];
对于涉及到角度的问题，起始角和结束角，这里的角度使使用弧度制来表示可以参考这个:
1455416085288481.png
3 . 画二元曲线, 一般和moveToPoint配合使用
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
参数：
endPoint:曲线的终点
controlPoint:画曲线的基准点
//以三个点画一段曲线, 一般和moveToPoint配合使用
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
参数：
endPoint:曲线的终点
controlPoint1:画曲线的第一个基准点
controlPoint2:画曲线的第二个基准点
例: 双点控制曲线
双点控制曲线.gif
//贝塞尔曲线的画法是由起点,终点,控制点 三个参数来画的
CGPoint startPoint = CGPointMake(50, 70);
CGPoint endPoint = CGPointMake(300, 70);
CGPoint controlPoint1 = CGPointMake(112.5, 10);
CGPoint controlPoint2 = CGPointMake(237.5, 130);
CALayer *layer1 = [CALayer layer];
layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
layer1.backgroundColor = [UIColor redColor].CGColor;
CALayer *layer2 = [CALayer layer];
layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
layer2.backgroundColor = [UIColor redColor].CGColor;
CALayer *layer3 = [CALayer layer];
layer3.frame = CGRectMake(controlPoint1.x, controlPoint1.y, 5, 5);
layer3.backgroundColor = [UIColor redColor].CGColor;
CALayer *layer4 = [CALayer layer];
layer4.frame = CGRectMake(controlPoint2.x, controlPoint2.y, 5, 5);
layer4.backgroundColor = [UIColor redColor].CGColor;
UIBezierPath *path = [UIBezierPath bezierPath];
CAShapeLayer *layer = [CAShapeLayer layer];
[path moveToPoint:startPoint];
//在这里使用两个控制点
[path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blackColor].CGColor;
[self.displayView.layer addSublayer:layer];
[self.displayView.layer addSublayer:layer1];
[self.displayView.layer addSublayer:layer2];
[self.displayView.layer addSublayer:layer3];
[self.displayView.layer addSublayer:layer4];
当然, 无聊时也可以绘个字
字.gif
//设置起点坐标
CGFloat startX = 50;
CGFloat startY = 50;
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(startX, startY)];
[path addLineToPoint:CGPointMake(startX+50, startY)];
[path addLineToPoint:CGPointMake(startX+25, startY+25)];
[path addArcWithCenter:CGPointMake(startX+25, startY+50) radius:25 startAngle:M_PI*3/2 endAngle:M_PI clockwise:YES];
[path moveToPoint:CGPointMake(startX, startY+25)];
[path addLineToPoint:CGPointMake(startX, startY+150)];
//
[path moveToPoint:CGPointMake(startX+60, startY)];
[path addLineToPoint:CGPointMake(startX+120, startY)];
[path moveToPoint:CGPointMake(startX+95, startY-50)];
[path addQuadCurveToPoint:CGPointMake(startX+60, startY+50) controlPoint:CGPointMake(startX+100, startY)];
[path addLineToPoint:CGPointMake(startX+130, startY+50)];
[path moveToPoint:CGPointMake(startX+95, startY+25)];
[path addLineToPoint:CGPointMake(startX+95, startY+150)];
[path addLineToPoint:CGPointMake(startX+60, startY+125)];
[path moveToPoint:CGPointMake(startX+80, startY+60)];
[path addLineToPoint:CGPointMake(startX+35, startY+145)];
[path moveToPoint:CGPointMake(startX+100, startY+60)];
[path addLineToPoint:CGPointMake(startX+140, startY+145)];
//
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor redColor].CGColor;
[self.displayView.layer addSublayer:layer];
demo 下载点这里
