UIBezierPath基础篇

最新推荐文章于 2017-04-21 11:04:03 发布
最新推荐文章于 2017-04-21 11:04:03 发布
阅读量386 收藏
点赞数
分类专栏： iOS开发 移动开发 文章标签： iOS开发 core graphics 动画 画曲线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013134119/article/details/53540006
版权

由于项目中要加入一个类似于购物车的抛物线动画的需求，开始研究了下贝塞尔曲线的相关内容，首先了解下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];

效果图：

这里写图片描述

画三角形

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：注意填充颜色、画笔颜色的顺序，先设置填充颜色再设置画笔颜色。

效果图如下：

这里写图片描述

画矩形

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 斜角连接

效果图：

这里写图片描述

画圆

//注意需要传入正方形
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参数不是正方，画出来是椭圆。

效果图：

这里写图片描述

画椭圆

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参数不传正方形，画出来的就是椭圆。

效果图如下:

这里写图片描述

画带圆角的矩形

+(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];

效果图如下：

这里写图片描述

接下来画右上角是圆角的

//制定右上角为圆角
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];

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

效果图如下:

这里写图片描述

画弧

下图为弧线的参考系

这里写图片描述

#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代表开始和结束的弧度，不是我们日常的角度，使用时候需要转换成弧度。

效果图如下：

这里写图片描述

画二次贝塞尔曲线

这里写图片描述

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];

效果图如下：

这里写图片描述

画三次贝塞曲线

这里写图片描述

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

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];

效果图如下：

这里写图片描述

###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];

效果图如下：

这里写图片描述

###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"];
 }

效果图如下：

这里写图片描述

本文demo

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

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

伍骁辛
关注
专栏目录
UIBezierPath 基础方法属性的全面介绍
Dyoung26的博客
07-20 735
UIKit中的UIBezierPath是Core Graphics框架关于path的一个封装。可以创建基于矢量的路径，例如椭圆或者矩形，或者有多个直线和曲线段组成的形状.
0420--iOS之UIBezierPath类
qq_30185503的博客
04-20 299
Class UIBezierPath A path that consists of straight and curved line segments that you can render in your custom views. --路径由直线段和曲线段组成，可以在自定义视图中进行渲染。 Declaration class UIBezierPath : N...
UIBezierPath
01-14
UIBezierPath的简单介绍，希望有助于你的理解与应用
UIBezierPath精讲
weixin_34384915的博客
12-03 187
学习UIBezierPath画图 笔者在写本篇文章之前，也没有系统学习过贝塞尔曲线，只是曾经某一次的需求需要使用到，才临时百度看了一看而且使用最基本的功能。现在总算有时间停下来好好研究研究这个神奇而伟大的贝塞尔先生！ 笔者在学习时，首先看了两遍UIBezierPath类头文件定义，熟悉了一下相关的属性和方法。 支持...
使用Bezier Paths[转]
weixin_30867015的博客
03-27 214
使用UIBezierPath类可以创建基于矢量的路径。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。1.Bezier Path 基础UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段...
iOS利用UIBezierPath + CAAnimation实现路径动画效果
08-29
在这篇文章中，我们将探讨如何结合这两个类来实现一个有趣的心形路径动画。 首先，我们需要理解UIBezierPath。UIBezierPath是一个用于创建矢量图形路径的类，可以用来定义形状，如线条、曲线等。在示例代码中，我们...
Swift－贝赛尔曲线画扇形、弧线、圆形、多边形——UIBezierPath实现App下载时的动画效果
iCodeWoods
05-08 1万+
上篇文章提到了使用贝赛尔曲线实现画图板（传送门），顿时就对贝赛尔曲线兴趣大增有木有。 之所以接触贝赛尔曲线，多亏了师父。周五下班前师父给我留了个任务，让我周末回家研究研究 iPhone 手机下载 App 时的效果是怎么实现的（不知道效果的童鞋请看下图） 如果所示，下载 App 的过程效果，就是 App 图标中间有一个顺时针旋转的圆圈。当一圈走完时 App 就下载完成了。 刚给我交代这
IOS开发基础篇--CAShapeLayer的strokeStart和strokeEnd属性
热门推荐
yixiangboy的博客
02-14 1万+
在不知道有CAShapeLayer的strokeStart和strokeEnd属性的时候，我采取的方法就是实时的 移除旧的CAShapeLayer 然后重绘这个圆形的CAShapeLayer。显然这种方式的效率是不高的。后来在一次看别人Demo的时候，发现别人使用了CAShapeLayer的strokeStart和strokeEnd属性，实现这一个效果十分的简单方便。下面就和大家来讲一讲这两个属性的使用。
iOS开发篇——教你如何搭建环境
06-13
例如，你可以在`drawRect:`中使用`UIBezierPath`和`UIColor`来绘制一条简单的消息，如"Hello, World!"。 以上就是iOS开发环境的基本搭建步骤和一个简单的HelloWorld应用的创建。通过这些基础知识，你可以开始学习...
iOS 利用贝塞尔曲线实现的圆环进度指示器
01-05
在这个视图中，我们将使用`UIBezierPath`来绘制圆环的基础形状。我们可以先画一个完整的圆形，然后根据进度百分比裁剪出部分圆环。 ```swift class CircleProgressView: UIView { var progress: CGFloat = 0.0 { ...
iOS10下在UIWebView加载页面, WF: _WebFilterIsActive returning: NO
u013134119的专栏
04-21 8821
UIWebView加载的网址链接是我们后台给的一个H5的链接, 但是我们发现在iOS9系统上可以正常加载网页内容, 在iOS10系统上却无法加载, 会出现以下Log信息：WF: _userSettingsForUser mobile: { filterBlacklist = ( ); filterWhitelist = ( ); restrictWeb = 1; useContent
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值