UIBezierPath基础篇

由于项目中要加入一个类似于购物车的抛物线动画的需求，开始研究了下贝塞尔曲线的相关内容，首先了解下UIBezierPath基础。

UIBezierPath基础
使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。

使用
UIBezierPath的使用
1.创建UIBezierPath对象；
2.调用moveToPoint设置初始路径的地点；
3.添加line(线)或者curve(曲线)去定义一个或者多个subpaths(子路径)；
4.设置UIBezierPath对象绘制的相关属性，例如填充颜色、填充样式、画笔属性等。

创建UIBezierPath方法

+(instancetype)bezierPath;
+(instancetype)bezierPathWithRect:(CGRect)rect;
+(instancetype)bezierPathWithOvalInRect:(CGRect)rect;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        cornerRadius:(CGFloat)cornerRadius;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                    byRoundingCorners:(UIRectCorner)corners 
                          cornerRadii:(CGSize)cornerRadii;
+(instancetype)bezierPathWithArcCenter:(CGPoint)center 
                             radius:(CGFloat)radius 
                         startAngle:(CGFloat)startAngle 
                           endAngle:(CGFloat)endAngle 
                          clockwise:(BOOL)clockwise;
+(instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

通过上面这些工厂方法可以创建任意类型的的图形，下面具体介绍下它们的用途

1.+(instancetype)bezierPath 创建UIBezierPath对象，根据我们的需求画任意样式的图形；
2.+(instancetype)bezierPathWithRect:(CGRect)rect 根据一个矩形画贝塞尔曲线；
3.+(instancetype)bezierPathWithOvalInRect:(CGRect)rect 根据矩形画内切曲线，例如圆或者椭圆；
4.+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        cornerRadius:(CGFloat)cornerRadius 根据矩形画带圆角的矩形；
5.+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                    byRoundingCorners:(UIRectCorner)corners 
                          cornerRadii:(CGSize)cornerRadii 根据矩形制定一个角为圆角；
6.+(instancetype)bezierPathWithArcCenter:(CGPoint)center 
                             radius:(CGFloat)radius 
                         startAngle:(CGFloat)startAngle 
                           endAngle:(CGFloat)endAngle 
                          clockwise:(BOOL)clockwise这个方法用来画弧，五个参数分别代表弧线中心点的坐标、弧线所在圆的半径、弧线开始的角度、弧线结束的角度、是否顺时针画弧线条。

Ps：我们需要在- (void)drawRect:(CGRect)rect中创建UIBezierPath对象并且调用以上工厂方法，因为在drawRect方法中我们才可以获取到上下文。

画直线

// 创建path
UIBezierPath *path = [UIBezierPath bezierPath];
//添加路径(起点(100,100)到终点(200,100)的线段)到path
[path moveToPoint:CGPointMake(100 , 100)];
[path addLineToPoint:CGPointMake(200, 100)];
//将path绘制出来
[path stroke];

效果图：

屏幕快照 2016-10-25 下午4.16.43.png

画三角形

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20, 20)];
[path addLineToPoint:CGPointMake(self.frame.size.width - 45, 20)];
[path addLineToPoint:CGPointMake(self.frame.size.width - 45, self.frame.size.height - 20)];
[path closePath];
//设置描边宽度
path.lineWidth = 2;
//设置填充颜色
UIColor *fillColor = [UIColor cyanColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor orangeColor];
[strokeColor set];
//描边
[path stroke];

Ps：注意填充颜色、画笔颜色的顺序，先设置填充颜色再设置画笔颜色。

效果图如下：

屏幕快照 2016-10-25 下午4.29.27.png

画矩形

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40)];
path.lineCapStyle = kCGLineCapRound;   //线条拐角
path.lineJoinStyle = kCGLineJoinBevel; //终点处理
path.lineWidth = 2;
//设置填充颜色
UIColor *fillColor = [UIColor yellowColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor orangeColor];
[strokeColor set];
//描边
[path stroke];

代码解释：

1.lineCapStyle属性是设置线条拐角帽的样式
 kCGLineCapButt   默认的
 kCGLineCapRound  轻微圆角
 kCGLineCapSquare 正方形

2.lineJoinStyle属性是设置两条线连接点的样式
kCGLineJoinMiter 默认的表示斜接
kCGLineJoinRound 圆滑衔接
kCGLineJoinBevel 斜角连接

效果图：

屏幕快照 2016-10-25 下午4.46.13.png

画圆

//注意需要传入正方形
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(60, 60, 150, 150)];
path.lineWidth = 2;
//设置填充颜色
UIColor *fillColor = [UIColor greenColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor orangeColor];
[strokeColor set];
//描边
[path stroke];

Ps:使用+ bezierPathWithOvalInRect创建UIBezierPath对象，当rect参数传入正方形的时候，画出来的是圆形，若rect参数不是正方，画出来是椭圆。
效果图：

屏幕快照 2016-10-25 下午4.54.33.png

画椭圆

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20,  20,  40,  60)];
path.lineWidth = 2;
//设置填充颜色
UIColor *fillColor = [UIColor magentaColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor orangeColor];
[strokeColor set];
//描边
[path stroke];

使用bezierPathWithOvalInRect画椭圆，rect参数不传正方形，画出来的就是椭圆。

效果图如下:

屏幕快照 2016-10-25 下午4.58.16.png

画带圆角的矩形

+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                        cornerRadius:(CGFloat)cornerRadius;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
                    byRoundingCorners:(UIRectCorner)corners 
                          cornerRadii:(CGSize)cornerRadii;

第一个方法可以画带圆角的矩形，rect参数是矩形，cornerRadius参数是圆角的大小；第二个方法可以制定某一个角画成圆角。

首先来画四个角都是圆角的

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 40, 40) cornerRadius:20];
//设置填充颜色
UIColor *fillColor = [UIColor orangeColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
//描边
[path stroke];

效果图如下：

屏幕快照 2016-10-25 下午5.06.23.png

接下来画右上角是圆角的

//制定右上角为圆角
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, self.frame.size.width - 40, self.frame.size.height - 40) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
//设置填充颜色
UIColor *fillColor = [UIColor orangeColor];
[fillColor set];
//填充
[path fill];
//设置画笔颜色
UIColor *strokeColor = [UIColor blueColor];
[strokeColor set];
//描边
[path stroke];

代码解释：第一个参数传矩形，第二个参数制定哪个角为圆角，第三个参数指定水平和垂直方向半径的大小。
效果图如下:

屏幕快照 2016-10-25 下午5.13.55.png

画弧
下图为弧线的参考系

20130904200813921.jpg
#define kDegreesToRadians(degrees)  ((M_PI * degrees)/ 180)

CGPoint centerPoint = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centerPoint radius:100 startAngle:0 endAngle:kDegreesToRadians(135) clockwise:YES];
path.lineCapStyle = kCGLineCapRound;  //线条拐角
path.lineJoinStyle = kCGLineJoinRound;//终点处理
path.lineWidth = 5.0;
UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path stroke];

代码解释：startAngle、endAngle代表开始和结束的弧度，不是我们日常的角度，使用时候需要转换成弧度。

效果图如下：

屏幕快照 2016-10-25 下午5.40.00.png

画二次贝塞尔曲线

20130904201943296.jpg

controlPoint为控制点

UIBezierPath *path = [UIBezierPath bezierPath];
//设置一个起始点
[path moveToPoint:CGPointMake(20, self.frame.size.height - 100)];
//添加二次曲线 controlPoint控制点
[path addQuadCurveToPoint:CGPointMake(self.frame.size.width - 20, self.frame.size.height - 100) controlPoint:CGPointMake(self.frame.size.width / 2, 0)];
path.lineCapStyle = kCGLineCapRound;   //线条拐角
path.lineJoinStyle = kCGLineJoinRound; //终点处理
path.lineWidth = 5.0;
UIColor *strokeColor = [UIColor purpleColor];
[strokeColor set];
[path stroke];

效果图如下：

屏幕快照 2016-10-25 下午5.50.07.png

画三次贝塞曲线

20130904201939421.jpg

三次贝塞尔曲线有两个控制点

UIBezierPath *path = [UIBezierPath bezierPath];
//设置起始点
[path moveToPoint:CGPointMake(20, 150)];
//添加三次曲线 controlPoint1控制点1 controlPoint2控制点2
[path addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(160, 0) controlPoint2:CGPointMake(160, 250)];
path.lineCapStyle = kCGLineCapRound;   //线条拐角
path.lineJoinStyle = kCGLineJoinRound; //终点处理
path.lineWidth = 5.0;
UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path stroke];

效果图如下：

屏幕快照 2016-10-25 下午6.03.06.png

CAShapeLayer结合UIBezierPath画图

CAShapeLayer *circleShapeLayer = [CAShapeLayer layer];
//设置frame
circleShapeLayer.frame = CGRectMake(0, 0, 200, 200);
circleShapeLayer.position = self.view.center;
//设置填充颜色
circleShapeLayer.fillColor = [UIColor clearColor].CGColor;
//设置线宽
circleShapeLayer.lineWidth = 2.0;
//设置线的颜色
circleShapeLayer.strokeColor = [UIColor redColor].CGColor;
CGRect frame = CGRectMake(0, 0, 200, 200);
//使用UIBezierPath创建路径
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:frame];
//关联CAShapeLayer与UIBezierPath
circleShapeLayer.path = circlePath.CGPath;
//将CAShaperLayer添加到某个层上显示
[self.view.layer addSublayer:circleShapeLayer];

效果图如下：

屏幕快照 2016-10-25 下午6.11.08.png

UIBezierPath动画

-(void)startAnimation
{
AppDelegate *appDelegate = APP_DELEGATE;
if (!windowLayer) {
    windowLayer = [CALayer layer];
    windowLayer.bounds = [UIScreen mainScreen].bounds;
    [appDelegate.window.layer addSublayer:windowLayer];
}
if (!layer)
{
    layer = [CALayer layer];
    layer.contents = (__bridge id)[UIImage imageNamed:@"icon_redDot.png"].CGImage;
    layer.contentsGravity = kCAGravityResizeAspectFill;
    layer.bounds = CGRectMake(100, 100, 20, 20);
    [layer setCornerRadius:CGRectGetHeight([layer bounds]) / 2];
    layer.masksToBounds = YES;
    layer.position =CGPointMake(50, 150);
    [appDelegate.window.layer addSublayer:layer];
}
layer.hidden = NO;
[self groupAnimation];
}

-(void)groupAnimation
{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = _path.CGPath;
animation.rotationMode = kCAAnimationRotateAuto;

//缩小
CABasicAnimation *narrowAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
narrowAnimation.beginTime = 0.5;
narrowAnimation.duration = 0.25f;
narrowAnimation.fromValue = [NSNumber numberWithFloat:2.0f];
narrowAnimation.toValue = [NSNumber numberWithFloat:0.5f];
narrowAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[animation,narrowAnimation];
groups.duration = 0.5f;
groups.removedOnCompletion=NO;
groups.fillMode=kCAFillModeForwards;
groups.delegate = self;
[layer addAnimation:groups forKey:@"group"];
}

效果图如下：


BDA9B7C7F7EF2A142239ACBE13EC1E33.png

本文demo
仅供交流学习，喜欢的随手给个星星。
Have fun！

参考文献
http://blog.csdn.net/crayondeng/article/details/11093689
http://blog.csdn.net/yongyinmg/article/details/38844879

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,258评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,335评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,225评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,126评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,140评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,098评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,018评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,857评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,298评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,400评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,993评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2赞 352

推荐阅读更多精彩内容

  • UIBezierPath类
    UIBezierPath Class Reference 译：UIBezierPath类封装了Core Graph...
    鋼鉄侠阅读 1,723评论 0赞 3
  • UIBezierPath详解
    UIBezierPath详解 我在写本篇文章之前，也没有系统学习过贝塞尔曲线，只是曾经某一次的需求需要使用到，才临...
    白水灬煮一切阅读 1,172评论 0赞 4
  • UIBezierPath精讲
    基础知识 使用UIBezierPath可以创建基于矢量的路径，此类是Core Graphics框架关于路径的封装。...
    十里桃花不及你阅读 855评论 0赞 5
  • UIBezierPath
    1.使用UIBezierPath画图步骤 创建一个UIBezierPath对象 调用-moveToPoint:设置...
    翘楚iOS9阅读 731评论 1赞 2
  • 是你吗？
    昨天晚上第二次梦见你 我们穿梭在陌生的街道 跟你走过杂乱的菜市场 突然你停下开心的大笑 指着想象中的那些东西 真的...
    东清儿阅读 159评论 0赞 0