贝塞尔曲线 总结

原创 2015年11月19日 16:02:35

基础


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. 官方文档
版权声明:尊重原作者, 转载注明出处! 谢谢

UIBezierPath贝塞尔弧线 附代码

//根据一个矩形画曲线 + (UIBezierPath*)bezierPathWithRect:(CGRect)rect //根据矩形框的内切圆画曲线 + (UIBezierPath*)bezi...

SVG字体图标格式解析

SVG字体图标格式解析,并生成APP图标
  • do168
  • do168
  • 2016年05月31日 15:09
  • 2492

Android工具类---格式化文件

简述: 该工具类用于格式化文件大小,将文件大小格式化为用户熟悉的样式。 上代码: /** * 格式化为常见文件大小形式(保留两位小数) 如4.32G,2.15M等 * * @...

贝塞尔曲线画特殊线条总结

  • 2016年04月09日 13:05
  • 83KB
  • 下载

贝塞尔曲线 总结

Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierr...

关于贝塞尔曲线画特殊线条的总结

#import "MyView.h" #define UMColor(R,G,B) [UIColor colorWithRed:R/255.f green:G/255.f blue:B/255.f ...

贝塞尔曲线-拉弓射箭的动画效果

  • 2017年08月14日 01:18
  • 27.09MB
  • 下载

线性贝塞尔曲线的说明

  • 2017年02月26日 10:51
  • 30.44MB
  • 下载

【Android开源项目解析】QQ“一键下班”功能实现解析——学习Path及贝塞尔曲线的基本使用

早在很久很久以前,QQ就实现了“一键下班”功能。何为“一键下班”?当你QQ有信息时,下部会有信息数量提示红点,点击拖动之后,就会出现“一键下班”效果。本文将结合github上关于此功能的一个简单实现,...

二阶贝塞尔曲线Test

  • 2017年03月25日 23:41
  • 23.26MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:贝塞尔曲线 总结
举报原因:
原因补充:

(最多只允许输入30个字)