基础
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。
UIBezierPath对象是CGPathRef
数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。我们使用直线段
去创建矩形
和多边形
,使用曲线段
去创建弧
(arc),圆
或者其他复杂的曲线形状
。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath
。一个UIBezierPath
对象定义一个完整的路径包括一个或者多个subpaths
。
使用步骤
创建和使用一个path对象的过程是分开的。
创建path是第一步,包含以下步骤:
(1)创建一个path对象。
(2)使用方法moveToPoint:去设置初始线段的起点。
(3)添加line或者curve去定义一个或者多个subpaths。
(4)改变UIBezierPath对象跟绘图相关的属性。例如,我们可以设置stroked path的属性lineWidth和lineJoinStyle。也可以设置filled path的属性usesEvenOddFillRule。
当创建path,我们应该管理path上面的点相对于原点(0,0),这样我们在随后就可以很容易的移动path了。为了绘制path对象,我们要用到stroke和fill方法。这些方法在current graphic context下渲染path的line和curve段。
常用方法
1、根据一个矩形画曲线
+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect
2、根据矩形框的内切圆画曲线
+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
3、根据矩形画带圆角的曲线
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius
4、在矩形中,可以针对四角中的某个角加圆角, 一般用于设置某个视图的顶端两角为圆形
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii
/*
参数:
corners:枚举值,可以选择某个角
cornerRadii:圆角的大小
*/
5、以某个中心点画弧线
+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
/*
参数:
center:弧线中心点的坐标
radius:弧线所在圆的半径
startAngle:弧线开始的角度值
endAngle:弧线结束的角度值
clockwise:是否顺时针画弧线
*/
6、画二元曲线,一般和moveToPoint配合使用
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
/*
参数:
endPoint:曲线的终点
controlPoint:画曲线的基准点
*/
7、以三个点画一段曲线,一般和moveToPoint配合使用
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
/*
参数:
endPoint:曲线的终点
controlPoint1:画曲线的第一个基准点
controlPoint2:画曲线的第二个基准点
*/
补充
//1. 根据矩形 画曲线
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 250, 50)];
bezierPath.lineWidth = 5.0;
bezierPath.lineCapStyle = kCGLineCapRound;
bezierPath.lineJoinStyle = kCGLineCapRound;
[bezierPath stroke];
//2. 根据矩形框的内切圆 画曲线
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, self.control, self.control)];
[[UIColor redColor] set];
[bezierPath stroke];
//3. 根据矩形框 画带圆角的曲线
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 250, 250) cornerRadius:self.control / 10];
[bezierPath stroke];
//4. 在矩形中,可以针对四角中的某个角加圆角, 一般用于设置某个视图的顶端两角为圆形
/**
* corners:枚举值,可以选择某个角
UIRectCornerTopLeft = 1 << 0,
UIRectCornerTopRight = 1 << 1,
UIRectCornerBottomLeft = 1 << 2,
UIRectCornerBottomRight = 1 << 3,
UIRectCornerAllCorners
* cornerRadii:圆角的大小
*
*/
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 250, 250) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(40, 40)];
[bezierPath stroke];
//5. 画弧度
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI / 6.0 clockwise:YES];
/*
center:弧线中心点的坐标
radius:弧线所在圆的半径
startAngle:弧线开始的角度值
endAngle:弧线结束的角度值
clockwise:是否顺时针画弧线
*/
[bezierPath stroke];
//6. 画二元曲线,一般和moveToPoint配合使用
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
//开始点
[bezierPath moveToPoint:CGPointMake(40, 40)];
/**
* endPoint: 曲线的终点
* controlPoint:画曲线的基准点
*/
[bezierPath addQuadCurveToPoint:CGPointMake(200, 250) controlPoint:CGPointMake(self.control, self.control)];
[bezierPath addQuadCurveToPoint:CGPointMake(100, 200) controlPoint:CGPointMake(self.control, self.control)];
//7. 以三个点画一段曲线,一般和moveToPoint配合使用
/**参数:
endPoint:曲线的终点
controlPoint1:画曲线的第一个基准点
controlPoint2:画曲线的第二个基准点
*/
[bezierPath addCurveToPoint:CGPointMake(100, 180) controlPoint1:CGPointMake(self.control, 300) controlPoint2:CGPointMake(110, self.control)];
[bezierPath addCurveToPoint:CGPointMake(200, 180) controlPoint1:CGPointMake(self.control, 300) controlPoint2:CGPointMake(110, self.control)];
[bezierPath stroke];