iOS贝塞尔曲线UIBezierPath

简介

贝塞尔(Bezier)曲线，应用于二维图形应用的数学曲线，依据四个位置任意的点坐标绘制出一条光滑曲线。由线段和节点组成,节点是可拖动的节点，线段像可伸缩的皮筋。通过控制起始点，终止点以及两个相互分离的中间点来绘制图形。皮筋效应： 随着点有规律的移动，曲线将产生皮筋伸缩一样的变换。
贝塞尔曲线于1962年由法国数学家皮埃尔·贝塞尔(Pierre Bézier)所发表，他运用贝塞尔曲线为汽车的主体进行设计。而该曲线最早由Paul de Castejau于1959年运用de Casteljau演算法开发。

使用

基本步骤

1.创建UIBezierPath对象；
2.设置初始点;
3.添加直线或曲线；
4.设置线条属性

使用环境:

1.在drawRect中进行绘制
2.结合CAShapeLayer,通过CAShapeLayer的path属性将UIBezierPath赋给图层;

绘制过程中线条颜色与填充颜色的设置

// 当前绘制上下文设置颜色,之后直接调用stroke或者fill则会以相应的颜色进行绘制.有点像先选择画笔(setStroke,setFill)，然后进行绘制(stroke,fill)
[[UIColor greenColor] setStroke];
[[UIColor redColor] setFill];

UIBezierPath *path = ...
[path stroke];
[path fill];

Demo

drawRect中绘制

// 绘制二级贝塞尔曲线
[[UIColor greenColor] setStroke];

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10, 100)];
[path addQuadCurveToPoint:CGPointMake(70, 100) controlPoint:CGPointMake(47, 170)];
[path setLineWidth:3];
[path stroke];

结合CAShapeLayer

// 绘制一个椭圆，宽高相等则是圆
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(80, 10, 70, 70)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.path = path.CGPath;

[self.view.layer addSublayer:shapeLayer];

UIBezierPath API

+ (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;// 弧线,参数分别为圆弧的中心，半径，开始角度，结束角度，是否顺时针绘制

- (void)moveToPoint:(CGPoint)point; // 设置线段的起点
- (void)closePath; // 结束一个图形的subpath，也会连接最后一个点与初始点之间的直线
// add*系列--定义一个或多个subpaths
- (void)addLineToPoint:(CGPoint)point;// 添加直线
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);// 添加弧线
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;// 添加二阶曲线
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2; // 添加三阶曲线

// 绘制
- (void)fill;// 线条区域颜色填充
- (void)stroke;// 线条颜色绘制

r:未完待续，之后用到慢慢补充对相应API的理解
[todo] 使用Core Graphics函数去修改path ,涉及属性@property(nonatomic) CGPathRef CGPath;

总结

延伸–贝塞尔曲线公式

该部分整理自贝塞尔曲线 总结–tianhai110
以下公式中：B(t)为t时间下 点的坐标； P0为起点,Pn为终点,Pi为控制点

一阶贝塞尔曲线(线段)：

意义：由 P0 至 P1 的连续点， 描述的一条线段

二阶贝塞尔曲线(抛物线)

原理：由 P0 至 P1 的连续点 Q0，描述一条线段。
由 P1 至 P2 的连续点 Q1，描述一条线段。
由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。
经验：P1-P0为曲线在P0处的切线。
通用公式：

三阶贝塞尔曲线

高阶贝塞尔曲线

四阶曲线

五阶曲线

参考资料

贝塞尔曲线 总结
iOS开发 贝塞尔曲线UIBezierPath（后记）