贝塞尔曲线 总结

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

自定义View进阶(一)——爱的贝塞尔曲线

这些天项目比较闲,于是在网上闲逛,忽然看到有一篇关于贝塞尔曲线的博客,于是就百度了一下。发现这货用处还真不少。兴趣大起!找了几个相关的案例看了看。照着撸了遍代码,今天就已此主题来完成我的第一篇博客吧!...
  • zhang2030940
  • zhang2030940
  • 2016年03月27日 20:11
  • 693

一分钟就懂贝塞尔曲线

转载:http://gold.xitu.io/entry/574d1fb61532bc00607b62a9 相信很多同学都知道“贝塞尔曲线”这个词,我们在很多地方都能经常看到。但是,可能并不是每位同...
  • LGGisKing
  • LGGisKing
  • 2016年06月30日 15:50
  • 2549

Android开发——贝塞尔曲线解析

相信很多同学都知道“贝塞尔曲线”这个词,我们在很多地方都能经常看到。利用“贝塞尔曲线”可以做出很多好看的UI效果,本篇博客就让我们一起学习“贝塞尔曲线”。贝塞尔曲线的原理贝塞尔曲线是用一系列点来控制曲...
  • SEU_Calvin
  • SEU_Calvin
  • 2017年07月26日 16:13
  • 1102

Android开发——贝塞尔曲线解析

相信很多同学都知道“贝塞尔曲线”这个词,我们在很多地方都能经常看到。利用“贝塞尔曲线”可以做出很多好看的UI效果,本篇博客就让我们一起学习“贝塞尔曲线”。贝塞尔曲线的原理贝塞尔曲线是用一系列点来控制曲...
  • SEU_Calvin
  • SEU_Calvin
  • 2017年07月26日 16:13
  • 1102

贝塞尔曲线总结

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

在Editor模式下编辑贝塞尔曲线

贝塞尔曲线的原理以及具体实现方式在网上随处可见,这里不再赘述。实际上,在Unity的Editor模式下,系统已经提供了现成的接口,只需要简单的几行代码,便能实现可自由拖曳的贝塞尔曲线。 首先,创建一个...
  • mlkmx
  • mlkmx
  • 2016年05月06日 15:31
  • 1076

canvas漂浮动画

代码如下: canvas漂浮动画 body{ margin:0px; } canvas{ display:block; } var canHeigh...
  • MOONCOM
  • MOONCOM
  • 2017年11月21日 10:51
  • 245

Android轻松实现RecyclerView悬浮条

http://blog.csdn.net/findsafety/article/details/76585361在我们在刷Instagram的动态时,你是否注意到这样一个小小的动效,就是当一条动态(以...
  • zhong8888888800
  • zhong8888888800
  • 2018年02月11日 11:31
  • 33

贝塞尔曲线 总结

转载请注明出处:http://blog.csdn.net/tianhai110   Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)...
  • chris_wzxing
  • chris_wzxing
  • 2013年12月08日 12:52
  • 299

三阶贝塞尔曲线一分为二的一般公式

三阶贝塞尔曲线被广泛用于各种需要平滑曲线的设计领域,一般通过多段三阶贝塞尔曲线顺次连接,构成复杂贝塞尔曲线。 每一段三阶贝塞尔曲线由均由两个端点和两个句柄点,一共四个控制点进行控制,其中每个控制点的改...
  • nibiewuxuanze
  • nibiewuxuanze
  • 2015年09月06日 01:59
  • 7363
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:贝塞尔曲线 总结
举报原因:
原因补充:

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