UIBezierPath
2018-04-18 本文已影响7人
霸_霸霸
一. 初始化方法
+ (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. 属性
//场合CAKeyFrameAnimation结合使用, 类似于keyFrameAnimation.path = bezierPath.CGPath
@property(nonatomic) CGPathRef CGPath;
- (CGPathRef)CGPath NS_RETURNS_INNER_POINTER CF_RETURNS_NOT_RETAINED;
@property(readonly,getter=isEmpty) BOOL empty;
@property(nonatomic,readonly) CGRect bounds;
//画笔当前的位置
@property(nonatomic,readonly) CGPoint currentPoint;
//线段宽度
@property(nonatomic) CGFloat lineWidth;
//线段尾部样式
@property(nonatomic) CGLineCap lineCapStyle;
//两个线段接头处的样式
@property(nonatomic) CGLineJoin lineJoinStyle;
2. 方法介绍
//将画笔移动到某一点
- (void)moveToPoint:(CGPoint)point;
//天剑一条线到某一点
- (void)addLineToPoint:(CGPoint)point;
//添加控制点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//添加弧线
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
//关闭path
- (void)closePath;
// 移除所有的点，删除所有的subPath
- (void)removeAllPoints;
//为path内填充颜色
- (void)fill;
//绘制路径
- (void)stroke;
三. 实例演示
- 简单的初始化, 可以用来初始化直线, 二次曲线, 三次曲线等
+ (instancetype)bezierPath;
用例: 三条直线构成三角形
UIBezierPath *path1 = [UIBezierPath bezierPath];
//设置初始位置
[path1 moveToPoint:CGPointMake(10, 10)];
//添加线段的三个两个转折点和终点
[path1 addLineToPoint:CGPointMake(100, 110)];
[path1 addLineToPoint:CGPointMake(10, 110)];
[path1 addLineToPoint:CGPointMake(10, 10)];
//设置线宽
path1.lineWidth = 3;
//设置线头和线尾的样式
path1.lineCapStyle = kCGLineCapRound;
//设置线的连接处的样式
path1.lineJoinStyle = kCGLineJoinRound;
//设置线的颜色
[[UIColor brownColor] set];
//设置填充色
[[UIColor blackColor] setFill];
[path1 fill];
//画线
[path1 stroke];
效果: 灰色的是self.view的背景
11524023105_.pic.jpg
- 初始化为一个矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;
用例: 创建一个宽高为(100, 100)的矩形
UIBezierPath *path4 = [UIBezierPath bezierPathWithRect:CGRectMake(120, 120, 100, 100)];
path4.lineWidth = 5;
path4.lineJoinStyle = kCGLineJoinMiter;
[[UIColor whiteColor] set];
[[UIColor brownColor] setFill];
[path4 fill];
[path4 stroke];
效果: 灰色的是self.view的背景
41524028595_.pic.jpg
- 初始化为一个标准圆形或者椭圆(椭圆只需要设置标准圆的宽高不同即可实现)
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
用例:
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 200, 100)];
[[UIColor redColor] set];
path.lineWidth = 5.f;
[path stroke];
效果: 灰色的是self.view的背景
61524030225_.pic.jpg
- 初始化一个四个角都是相同的圆角值的矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:
(CGFloat)cornerRadius;
用例:
path2.lineWidth = 2;
[[UIColor blackColor] set];
[path2 stroke];
效果:
121524036203_.pic.jpg
- 初始化某个特定角为圆角的矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
用例: 左上角和右上角为圆角
UIBezierPath *path6 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(230, 10, 100, 100) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(30, 30)];
[[UIColor whiteColor] set];
path6.lineWidth = 3;
[path6 stroke];
效果:
71524032172_.pic.jpg
- 初始化一个标准的圆弧线
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
用例: 创建一个半径为50的圆弧
CGPoint center = CGPointMake(50, 170);
UIBezierPath *path3 = [UIBezierPath bezierPathWithArcCenter:center radius:50 startAngle:0 endAngle:M_PI / 2.0 clockwise:YES];
path3.lineWidth = 3;
[path3 stroke];
效果:
111524036089_.pic.jpg
- 按照CGPathRef初始化一个曲线
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
-
画一个二次曲线
101524035711_.pic.jpg
我们可以看到 起点的切线和终点的切线交于控制点
//这个view用来在图中显示控制点的位置
UIView *controlView = [[UIView alloc]initWithFrame:CGRectMake(149, 49, 2, 2)];
controlView.backgroundColor = [UIColor redColor];
[self addSubview:controlView];
//设置Bezier曲线
UIBezierPath *path8 = [UIBezierPath bezierPath];
[path8 moveToPoint:CGPointMake(100, 100)];
[path8 addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(150, 50)];
[[UIColor whiteColor] setFill];
[path8 stroke];
81524034986_.pic.jpg
解析: 起点是(100,100), 终点是(200,100), 控制点是(150,50), 图中的红点就是控制点
建立一个简单的坐标系, 配合一元二次方程可以解出曲线顶点的位置
91524035353_.pic.jpg
- 创建一个一元三次曲线
UIBezierPath *path9 = [UIBezierPath bezierPath];
[path9 moveToPoint:CGPointMake(20, 280)];
[path9 addCurveToPoint:CGPointMake(220, 280) controlPoint1:CGPointMake(70, 200) controlPoint2:CGPointMake(170, 360)];
[[UIColor whiteColor] set];
效果:
131524036703_.pic.jpg
