QuarZ例子-CSDN博客

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

CGPointp[3] =

{

CGPointMake(210.0,30.0),

CGPointMake(210.0,60.0),

CGPointMake(240.0,60.0),

};

CGContextMoveToPoint(context, p[0].x, p[0].y);

CGContextAddArcToPoint(context, p[1].x, p[1].y, p[2].x, p[2].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[0]));

CGContextStrokePath(context);

// As a bonus, we'll combine arcs to create a round rectangle!

// Drawing with a white stroke color

// 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.

CGRectrrect =CGRectMake(210.0,90.0,60.0,60.0);

CGFloatradius =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.

CGFloatminx =CGRectGetMinX(rrect), midx =CGRectGetMidX(rrect), maxx =CGRectGetMaxX(rrect);

CGFloatminy =CGRectGetMinY(rrect), midy =CGRectGetMidY(rrect), maxy =CGRectGetMaxY(rrect);

// Next, we will go around the rectangle in the order given by the figure below.

// minxmidxmaxx

// miny2 3 4

// midy 1 95

// maxy8 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);

绘制出的结果如下图：

代码

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

CGPointp[3] =

{

CGPointMake(210.0,30.0),

CGPointMake(210.0,60.0),

CGPointMake(240.0,60.0),

};

CGContextMoveToPoint(context, p[0].x, p[0].y);

CGContextAddArcToPoint(context, p[1].x, p[1].y, p[2].x, p[2].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[0]));

CGContextStrokePath(context);

函数 CGContextAddArcToPoint为从current point 到p[1]画切线，接着从p[1]到p[2]画切线，30为圆弧的半径。

第三列第二个为绘制的一个圆角矩形

代码如下：

CGContextSetRGBStrokeColor(context,1.0,1.0,1.0,1.0);

CGRectrrect =CGRectMake(210.0,90.0,60.0,60.0);

CGFloatradius =10.0;

CGFloatminx =CGRectGetMinX(rrect), midx =CGRectGetMidX(rrect), maxx =CGRectGetMaxX(rrect);

CGFloatminy =CGRectGetMinY(rrect), midy =CGRectGetMidY(rrect), maxy =CGRectGetMaxY(rrect);

// 下面代码的绘制路线如下所示了：

// minxmidxmaxx

// miny2 3 4

// midy 1 95

// maxy8 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

// 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

CGPoints =CGPointMake(30.0,120.0);

CGPointe =CGPointMake(300.0,120.0);

CGPointcp1 =CGPointMake(120.0,30.0);

CGPointcp2 =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

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

如图：

上半部分为绘制的bezier曲线，有两个控制点。

下半部分为绘制的quad曲线，有一个控制点。