绘制简单图形---UIBezierPath篇

2017-07-20 本文已影响23人小白进城

一、关于UIBezierPath
UIBezierPath这个类在UIKit中，是Core Graphics框架关于path的一个封装，使用此类可以定义简单的形状，比如我们常用到，矩形，圆形，椭圆，弧，或者不规则的多边形。

二、使用步骤

1、重写View的drawRect方法
2、创建UIBezierPath的对象
3、使用方法moveToPoint: 设置初始点
4、根据具体要求使用UIBezierPath类方法绘图（比如要画线、矩形、圆、弧等）
5、设置UIBezierPath对象相关属性（比如lineWidth、lineJoinStyle、aPath.lineCapStyle、color）
6、使用stroke 或者 fill方法结束绘图

三、初始化

初始化bezierPath对象

UIBezierPath *path = [UIBezierPath bezierPath];

快速获取一个矩形 bezierPath对象

// frame
UIBezierPath *path  = [UIBezierPath bezierPathWithRect:CGRectMake(10, 20, 40, 40)];

快速获取一个椭圆 bezierPath对象

// 宽度相等则为圆形
UIBezierPath *path  = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(80, 20, 80, 40)];

快速获取一个 圆角矩形 bezierPath对象

// 参数一: 矩形范围
// 参数二: 圆角半径, 如果半径大于矩形短边的一半, 则按照一半处理
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(200, 20, 50, 50) cornerRadius:10];

快速获取一个 圆角可选矩形 bezierPath对象

// 参数一: 矩形范围
// 参数二: 圆弧位置, 可以多选
// 参数三: 圆弧半径  取最小
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 100, 50, 50) byRoundingCorners:UIRectCornerTopRight|UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 20)];

快速获取一个圆弧 bezierPath对象

// 参数一: 圆弧圆心
// 参数二: 圆弧半径
// 参数三: 开始弧度
// 参数四: 结束弧度
// 参数五: 是否为顺时针
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(180, 150) radius:50 startAngle:M_PI endAngle:0 clockwise:YES];

使用 CGPath 创建一个bezierPath对象

//
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

四、绘制路径

绘制直线

// 1、初始化
UIBezierPath *path = [UIBezierPath bezierPath];
// 2、设置路径
[path moveToPoint:CGPointMake(250, 150)];   //起点
[path addLineToPoint:CGPointMake(kScreenWidth-10, 150)];   //移动到下一个点
// 3、设置属性
// 4、渲染绘图
[path stroke];

圆弧

坐标系

圆弧坐标系

// 1、初始化
UIBezierPath *path = [UIBezierPath bezierPath];
// 2、设置路径
[path moveToPoint:CGPointMake(20, 200)];    //起点
// 参数一: 圆弧圆心
// 参数二: 圆弧半径
// 参数三: 开始弧度
// 参数四: 结束弧度
// 参数五: 是否为顺时针
[path addArcWithCenter:CGPointMake(80, 200) radius:40 startAngle:M_PI endAngle:0 clockwise:NO];
// 3、设置属性
// 4、渲染绘图
[path stroke];

二次贝塞尔曲线

二次贝塞尔曲线

// 1、初始化
UIBezierPath *path = [UIBezierPath bezierPath];
// 2、设置路径
[path moveToPoint:CGPointMake(160, 200)];   //起点
// 参数一: 曲线的终点位置
// 参数二: 控制点
[path addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(170, 150)];
// 3、设置属性
// 4、渲染绘图
[path stroke];

三次贝塞尔曲线

三次贝塞尔曲线

// 1、初始化
UIBezierPath *path = [UIBezierPath bezierPath];
// 2、设置路径
[path moveToPoint:CGPointMake(220, 230)];   //起点
// 参数一: 曲线的终点位置
// 参数二: 第一控制点
// 参数三: 第二控制点
[path addCurveToPoint:CGPointMake(300, 180) controlPoint1:CGPointMake(240, 100) controlPoint2:CGPointMake(250, 300)];
// 3、设置属性
// 4、渲染绘图
[path stroke];

其他方法

－(void)closePath;       // 封闭路径，可以自动连接起点和终点
- (void)removeAllPoints;      // 移除路径中所有点
- (void)appendPath:(UIBezierPath *)bezierPath;   //添加一条路径
- (UIBezierPath *)bezierPathByReversingPath；  // 路径反转  当前路径的起点作为当前点
- (void)applyTransform:(CGAffineTransform)transform;  // 使用CGAffineTransform

五、path相关属性信息

路径的一些信息（readonly）

// 路径是否为空
@property(readonly,getter=isEmpty) BOOL empty;
// 封闭所有路径点的最小矩形范围, 不包括控制点
@property(nonatomic,readonly) CGRect bounds;
// 当前的点
@property(nonatomic,readonly) CGPoint currentPoint;
// 路径区域中是否包含某个点
 - (BOOL)containsPoint:(CGPoint)point;

绘制中可以设置的相关属性

// 线条宽度
@property(nonatomic) CGFloat lineWidth;
// 起点终点的样式
/*
kCGLineCapButt,    // 默认 (方形结束, 结束位置正好为精确位置),如果线条太宽，看起来不完全封闭
kCGLineCapRound,   // (圆形结束, 结束位置超过精确位置半个线宽)
kCGLineCapSquare   // (方形结束, 结束位置超过精确位置半个线宽)
*/
@property(nonatomic) CGLineCap lineCapStyle;
// 线条连接点样式
/*
kCGLineJoinMiter,    // 默认
kCGLineJoinRound,    // 圆形
kCGLineJoinBevel     // 
*/
@property(nonatomic) CGLineJoin lineJoinStyle;

六、绘制方式

- (void)fill;    // 填充绘图  [[UIColor redColor] setFill];  //设置填充色
- (void)stroke;    // 绘制路径  [[UIColor redColor] setStroke];   //设置线条颜色

例子

七、应用

Demo传送门

1、自定义弹框

自定义弹框

2、画板

画板

八、参考地址

1、iOS开发之画图板(贝塞尔曲线)

绘制简单图形---UIBezierPath篇

猜你喜欢

热点阅读