iOS贝塞尔曲线 总结

释放双眼,带上耳机,听听看~!

基础


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

工具


这个可以看到贝塞尔曲线的形成过程:
http://myst729.github.io/bezier-curve/

参考


  1. http://blog.csdn.net/guo_hongjun1611/article/details/7842110
  2. http://blog.csdn.net/guo_hongjun1611/article/details/7839371
  3. http://www.cnblogs.com/moyunmo/p/3600091.html
  4. http://www.cnblogs.com/easonoutlook/archive/2013/05/02/3055388.html
  5. 官方文档

人已赞赏
iOS文章

iOS关于 timeIntervalSince1970 计算出错的问题(4s)

2020-3-5 14:59:20

iOS文章

iOSUIView中间透明周围半透明(四种方法)

2020-3-5 16:13:58

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索