iPhone绘图关于QuartZ中绘制Curves案例
iPhone绘图关于QuartZ中绘制案例是本文要介绍的内容，主要来讲解如何来绘制Curves的内容，本文主要是以代码来实现的内容，那么来看详细代码讲解。1.用Ellipses和Arcs绘制曲线
代码如下：
[*]// Drawing with a white stroke color
[*]CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
[*]// And draw with a blue fill color
[*]CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
[*]// Draw them with a 2.0 stroke width so they are a bit more visible.
[*]CGContextSetLineWidth(context, 2.0);
[*]
[*]// Add an ellipse circumscribed in the given rect to the current path, then stroke it
[*]CGContextAddEllipseInRect(context, CGRectMake(30.0, 30.0, 60.0, 60.0));
[*]CGContextStrokePath(context);
[*]// Stroke ellipse convenience that is equivalent to AddEllipseInRect(); StrokePath();
[*]CGContextStrokeEllipseInRect(context, CGRectMake(30.0, 120.0, 60.0, 60.0));
[*]// Fill rect convenience equivalent to AddEllipseInRect(); FillPath();
[*]CGContextFillEllipseInRect(context, CGRectMake(30.0, 210.0, 60.0, 60.0));
[*]
[*]// Stroke 2 seperate arcs
[*]CGContextAddArc(context, 150.0, 60.0, 30.0, 0.0, M_PI/2.0, false);
[*]CGContextStrokePath(context);
[*]CGContextAddArc(context, 150.0, 60.0, 30.0, 3.0*M_PI/2.0, M_PI, true);
[*]CGContextStrokePath(context);
[*]
[*]// Stroke 2 arcs together going opposite directions.
[*]CGContextAddArc(context, 150.0, 150.0, 30.0, 0.0, M_PI/2.0, false);
[*]CGContextAddArc(context, 150.0, 150.0, 30.0, 3.0*M_PI/2.0, M_PI, true);
[*]CGContextStrokePath(context);
[*]
[*]// Stroke 2 arcs together going the same direction..
[*]CGContextAddArc(context, 150.0, 240.0, 30.0, 0.0, M_PI/2.0, false);
[*]CGContextAddArc(context, 150.0, 240.0, 30.0, M_PI, 3.0*M_PI/2.0, false);
[*]CGContextStrokePath(context);
[*]// Stroke an arc using AddArcToPoint
[*]CGPoint p =
[*]{
[*]CGPointMake(210.0, 30.0),
[*]CGPointMake(210.0, 60.0),
[*]CGPointMake(240.0, 60.0),
[*]};
[*]CGContextMoveToPoint(context, p.x, p.y);
[*]CGContextAddArcToPoint(context, p.x, p.y, p.x, p.y, 30.0);
[*]CGContextStrokePath(context);
[*]
[*]// Show the two segments that are used to determine the tangent lines to draw the arc.
[*]CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
[*]CGContextAddLines(context, p, sizeof(p)/sizeof(p));
[*]CGContextStrokePath(context);
[*]// As a bonus, we'll combine arcs to create a round rectangle!
[*]// Drawing with a white stroke color
[*]CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
[*]// If you were making this as a routine, you would probably accept a rectangle
[*]// that defines its bounds, and a radius reflecting the "rounded-ness" of the rectangle.
[*]CGRect rrect = CGRectMake(210.0, 90.0, 60.0, 60.0);
[*]CGFloat radius = 10.0;
[*]// NOTE: At this point you may want to verify that your radius is no more than half
[*]// the width and height of your rectangle, as this technique degenerates for those cases.
[*]// In order to draw a rounded rectangle, we will take advantage of the fact that
[*]// CGContextAddArcToPoint will draw straight lines past the start and end of the arc
[*]// in order to create the path from the current position and the destination position.
[*]// In order to create the 4 arcs correctly, we need to know the min, mid and max positions
[*]// on the x and y lengths of the given rectangle.
[*]CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);
[*]CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);
[*]// Next, we will go around the rectangle in the order given by the figure below.
[*]// minx midx maxx
[*]// miny 2 3 4
[*]// midy 1 9 5
[*]// maxy 8 7 6
[*]// Which gives us a coincident start and end point, which is incidental to this technique, but still doesn't
[*]// form a closed path, so we still need to close the path to connect the ends correctly.
[*]// Thus we start by moving to point 1, then adding arcs through each pair of points that follows.
[*]// You could use a similar tecgnique to create any shape with rounded corners.
[*]// Start at 1
[*]CGContextMoveToPoint(context, minx, midy);
[*]// Add an arc through 2 to 3
[*]CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
[*]// Add an arc through 4 to 5
[*]CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
[*]// Add an arc through 6 to 7
[*]CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
[*]// Add an arc through 8 to 9
[*]CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
[*]// Close the path
[*]CGContextClosePath(context);
[*]// Fill & stroke the path
[*]CGContextDrawPath(context, kCGPathFillStroke);
绘制出的结果如下图：
http://images.51cto.com/files/uploadimg/20110812/1113440.png
代码
[*]CGContextAddEllipseInRect(context, CGRectMake(30.0, 30.0, 60.0, 60.0));
[*]CGContextStrokePath(context);
就是在指定的矩形区域内添加一个椭圆，使椭圆和矩形的边相切，如上图第一列第一个圆。
此代码
[*]CGContextStrokeEllipseInRect(context, CGRectMake(30.0, 120.0, 60.0, 60.0));
等价于上面的两行代码。如上图第一列第二个。
[*]CGContextFillEllipseInRect(context, CGRectMake(30.0, 210.0, 60.0, 60.0));
等价于AddEllipseInRect(); FillPath();如上图第一列第三个。
第二列第一个为绘制的两个单独的圆弧，代码如下：
[*]// Stroke 2 seperate arcs
[*]CGContextAddArc(context, 150.0, 60.0, 30.0, 0.0, M_PI/2.0, false);
[*]CGContextStrokePath(context);
[*]CGContextAddArc(context, 150.0, 60.0, 30.0, 3.0*M_PI/2.0, M_PI, true);
[*]CGContextStrokePath(context);
其中（150.0，60.0）为圆弧的圆心。30.0为半径，接下来两个参数分别为开始的弧度和结束的弧度，最后一个参数如果为false（0），就是逆时针方向绘制，如果为true（1），就是顺时针方向绘制圆弧。
第二列第二个会绘制两个方向相反的圆弧，第三个为绘制两个方向相同的圆弧。
[*]// Stroke 2 arcs together going opposite directions.
[*]CGContextAddArc(context, 150.0, 150.0, 30.0, 0.0, M_PI/2.0, false);
[*]CGContextAddArc(context, 150.0, 150.0, 30.0, 3.0*M_PI/2.0, M_PI, true);
[*]CGContextStrokePath(context);
[*]// Stroke 2 arcs together going the same direction..
[*]CGContextAddArc(context, 150.0, 240.0, 30.0, 0.0, M_PI/2.0, false);
[*]CGContextAddArc(context, 150.0, 240.0, 30.0, M_PI, 3.0*M_PI/2.0, false);
[*]CGContextStrokePath(context);
（其中角度0.0为圆心的正下方，逆时针旋转，角度逐渐变大）
第三列第一个为下列代码：
[*]// Stroke an arc using AddArcToPoint
[*]CGPoint p =
[*]{
[*]CGPointMake(210.0, 30.0),
[*]CGPointMake(210.0, 60.0),
[*]CGPointMake(240.0, 60.0),
[*]};
[*]CGContextMoveToPoint(context, p.x, p.y);
[*]CGContextAddArcToPoint(context, p.x, p.y, p.x, p.y, 30.0);
[*]CGContextStrokePath(context);
[*]// Show the two segments that are used to determine the tangent lines to draw the arc.
[*]CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
[*]CGContextAddLines(context, p, sizeof(p)/sizeof(p));
[*]CGContextStrokePath(context);
函数CGContextAddArcToPoint为从current point 到p画切线，接着从p到p画切线，30为圆弧的半径。
第三列第二个为绘制的一个圆角矩形
代码如下：
[*] CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
[*]CGRect rrect = CGRectMake(210.0, 90.0, 60.0, 60.0);
[*]CGFloat radius = 10.0;
[*]CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);
[*]CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);
[*]// 下面代码的绘制路线如下所示了：
[*]// minx midx maxx
[*]// miny 2 3 4
[*]// midy 1 9 5
[*]// maxy 8 7 6
[*]// 本例中开始点和结束点一样只是一个巧合，所以，我们在最后最好要加上CGContextClosePath
[*]// Start at 1
[*]CGContextMoveToPoint(context, minx, midy);
[*]// Add an arc through 2 to 3
[*]CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
[*]// Add an arc through 4 to 5
[*]CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
[*]// Add an arc through 6 to 7
[*]CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
[*]// Add an arc through 8 to 9
[*]CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
[*]// Close the path
[*]CGContextClosePath(context);
[*]// Fill & stroke the path
[*]CGContextDrawPath(context, kCGPathFillStroke);
2.绘制Beziers &Quadratics曲线
绘制代码如下：
[*]// Drawing with a white stroke color
[*]CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
[*]// Draw them with a 2.0 stroke width so they are a bit more visible.
[*]CGContextSetLineWidth(context, 2.0);
[*]// Draw a bezier curve with end points s,e and control points cp1,cp2
[*]CGPoint s = CGPointMake(30.0, 120.0);
[*]CGPoint e = CGPointMake(300.0, 120.0);
[*]CGPoint cp1 = CGPointMake(120.0, 30.0);
[*]CGPoint cp2 = CGPointMake(210.0, 210.0);
[*]CGContextMoveToPoint(context, s.x, s.y);
[*]CGContextAddCurveToPoint(context, cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y);
[*]CGContextStrokePath(context);
[*]// Show the control points.
[*]CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
[*]CGContextMoveToPoint(context, s.x, s.y);
[*]CGContextAddLineToPoint(context, cp1.x, cp1.y);
[*]CGContextMoveToPoint(context, e.x, e.y);
[*]CGContextAddLineToPoint(context, cp2.x, cp2.y);
[*]CGContextStrokePath(context);
[*]// Draw a quad curve with end points s,e and control point cp1
[*]CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
[*]s = CGPointMake(30.0, 300.0);
[*]e = CGPointMake(270.0, 300.0);
[*]cp1 = CGPointMake(150.0, 180.0);
[*]CGContextMoveToPoint(context, s.x, s.y);
[*]CGContextAddQuadCurveToPoint(context, cp1.x, cp1.y, e.x, e.y);
[*]CGContextStrokePath(context);
[*]// Show the control point.
[*]CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
[*]CGContextMoveToPoint(context, s.x, s.y);
[*]CGContextAddLineToPoint(context, cp1.x, cp1.y);
[*]CGContextStrokePath(context);
如图：
http://images.51cto.com/files/uploadimg/20110812/1113441.png
上半部分为绘制的bezier曲线，有两个控制点。
下半部分为绘制的quad曲线，有一个控制点。
小结：iPhone绘图关于QuartZ中绘制Curves案例的内容介绍完了，希望本文对你有帮助！希望本文对你有所帮助！如果想深入了解iphone绘图的更多内容，请参考：
iPhone绘图关于QuartZ中绘制Line案例
iPhone绘图关于QuartZ中绘制Polygons案例
【编辑推荐】
[*]iPhone应用开发之模型对象归档
[*]详解iPhone开发Quratz 2D学习
[*]iPhone开发应用中CoreLocation定位学习笔记
[*]iPhone开发问题汇总
[*]详解iPhone开发应用为视图加边框
[*]iPhone开发关于NSInvocationOperation多线程教程
页:
[1]