CGContextAddCurveToPoint 的深入理解

CGContextAddCurveToPoint 这个函数看上去一般般,仔细琢磨发现不简单,为什么三个点就可以确定一条曲线呢? 网上查了查,小小研究了一下下。

1.关键知识 窃取自 (http://learn.gxtc.edu.cn/NCourse/jxcamcad/cadcam/Mains/main4-2.htm

Bezier曲线

在工程设计中,由给定型值点进行曲线设计往往由于型值点的误差而得不到满意的结果。另一方面,在一些更注重外观的设计中,型值点的精度又不很重要。从 1962年起,法国雷诺汽车公司的Bezier开始构造他的以“逼近”为基础的参数曲线表示法。以这种方法为基础,完成了一种自由型曲线和曲面的设计系统 UNIS-URF,1972年在雷诺汽车公司正式使用。

Bezier曲线的形状是通过一组多边折线(称为特征多边形)的各顶点唯一地定义出来的。在多边形的各顶点中,只有第一点和最后一点在曲线上,其余的顶 点则使用控制曲线的导数、阶次和形式。第一条和最后一条折线则表示出曲线在起点和终点处的切线方向。曲线的形状趋向仿效多边折线的形状。改变控制点与改变 曲线形状有着形象生动的直接联系。如图2.6所示。

1)Bezier曲线的定义

给定 n+ l个空间向量bi(i= 0,l,…,n),称 n次参数曲线段

为Bezier曲线。式中使用了Bernstein多项式Bi,n(u)作为基函数:

u是局部参数,u∈[0,1]。我们给出n=3的Bezier曲线的矩阵表示:



则有 P(u)=UMB

2)Bezier曲线的性质
Bezier曲线的基本数学表达式:


这说明Bezier曲线在始点和终点处的切线方向是与Bezier控制多边形的第一边及最后一边的走向一致。

这 说明曲线在起点和终点处的二阶导数仅与相邻的二点位置有关,而与其余各点的位置关。Bezier曲线的这一特性说明,只需适当移动控制点就能获得满意的曲 线位置和形状。利用这个特性,当采用分段Bezier曲线时,只要保证曲线在接点处的折线共线,就可以得到C1连续性。如图2.7所示的一个公共端点的二 条Bezier曲线,当两段曲线的控制折线在接点处共线时,就保证了它们连成的曲线在公共端点的一阶连续。

Bezier曲线还具有凸包性,即B6zier曲线均落在由它的控制点形成的凸壳内。所谓凸壳是指用橡皮图从外面去套所有控制点所形成的凸多边形。研究表明,分段Bezier曲线的凸包性体现更明显,这对于曲线的分割求交将更为有利。

此外,Bezier曲线的形状仅与特征多边形各控制点bi有关,它不依赖于坐标系的选择,因此具有几何不变性。没有局部控制能力是 Bezier曲线的一个缺点。在工程中,产品的模型常常需要局部修改。缺乏局部控制的能力在工程中是难以接受的。Bezier曲线另一缺点是随着控制点的 增加,曲线的次数也增加,因而计算量增大。下面介绍的B样条曲线可克服这两个缺点。

3)Bezier曲线的计算及分割作图法
Bezier曲线在工程中广泛接受的一个重要原因是其可以采用非常简单的方法制作。下面推导Bezier多项式的递归关系,这种关系可方便用计算机程序实现,而且便于用图形来解释。重写Bezier曲线方程为



可以看到,第一个括号内的项形成对控制点b0,b1,…,bn-1的Bezier多项式,而第二个方括号内的项对b1,b2,…,bn形成多项式。现在引人符号Pk,i(u)表示对bk,bk+l,…,b的Bezier多项式,那么上述
方程可以重写为

上式表明,Bezier多项式可以由另外两个这种多项式求得。其求法为用一条线连接相应的点(即在同一参数U),并与u成比例地分那条线。

我 们再用图2.8所示的例子来看一下Bezier曲线的分割作图法。前例给出的由点b0,b1,b2,b3控制成的一条三次Bezier曲线可在u=l/2 处分段,分成b4的两段均为Bezier曲线,它们由各自的四个控制点控制。在图2.8中,点b0,b1,b2和b3控制形成一条三次,Bezier曲 线。取线段bobl的中点b4,线段b1b2的中点b5,线段 b2b3的中点 b6,线段 b4b5的中点 b7,线段 b5 b6的中点b8,以及线段b7bs的中点bg,则可以证明,b9在由b。,b1,b2,b3确定的三次Bezier曲线上,且为u=l/2时的点 P(l/2)。我们将u=l/2代人矩阵方程就可得到:


图 2.8的分割,我们获得折线b0b4 b7b9b8b6b3,它比折线b0blb2b3更接近该BeZier曲线,且b9在曲线上。继续分别对由b9分成的两段曲线作分割,除获得更接近曲线的 折线外,还获得曲线上的两个点。分割次数越多,新的折线越逼近曲线,当到达某种精度时,可将获得的折线近似的表达Bezier曲线。由于分割操作仅涉及加 法和移位操作,所以便于硬件实现,提高作图速度。读者可根据送推式写出相应的计算机程序,进一步从几何作图的角度,对计算式改进,以便使算法更为简单。

以上部分为算法原理,下面是实际的应用

    使用函数CGContextAddCurveToPoint去 使用一个三次Bezier 曲线,要我们指定control point和endpoint。下图是一个三次的Bezier曲线,有两个控制点。两个控制点的定义了曲线的几何形状。如果两个控制点都在起点和终点的下 面,则则曲线向上供。如果第二个控制点相比第一个控制点更接近起点,则曲线会构成一个循环。
   使用函数CGContextAddQuadCurveToPoint 去使用添加一个二次Bezier曲线,要我们指定一个control point和endpoint。下图展示了相同的endpoint,不同的control point的结果。control point定义了曲线的供的方向。利用二次Bezier曲线不可能创造用三次Bezier曲线那么多的有趣的曲线。例如,用二次不可能创造一个交叉的曲 线。

CGContextAddArc的使用

这两天学习 IOS ,对于  CGContextAddArc 函数,盯了半天,没琢磨明白怎么个意思,不好意思剽窃一下别人的理解,呵呵。1.这个函数只能画圆形(废话,不过刚刚开始,还真的以为可以绘制椭圆,想要椭圆的哥们用CGContextAddEllipseInRect 吧)

2.函数参数理解,此处剽窃(http://differentisnotdifferent.diandian.com/post/2012-07-30/40032320467),怕哪天他的链接无效了,直接剽窃到自己的文章里面。

这个函数让我在纸上画了半天才搞明白,把我的理解给大家分享下。

void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)

CGContextRef不解释了,x,y为圆点坐标,startAngle为开始的弧度,endAngle为 结束的弧度,clockwise 0为顺时针,1为逆时针。

CGContextAddArc(context, 160, 200, 100, 0, 45*(M_PI/180), 0);

所以对上面这对代码的解释是这样的:

1)startAngle为0,绿色箭头的地方。

2)endAngle为45,黄色箭头的地方。

3)clockwise为0,按照红色箭头往下绘制图形。

4)所以效果就是红色的扇形。

补充:如果clockwise为1,则是蓝色部分区域。

92DCCB6032AE1851F544775DA20ABF55_286_260