iPhone繪圖關于QuartZ中繪制Curves案例

作者：佚名 2011-08-12 11:08:45

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

繪制出的結果如下圖：

代碼

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

如圖：

上半部分為繪制的bezier曲線，有兩個控制點。

下半部分為繪制的quad曲線，有一個控制點。

小結：iPhone繪圖關于QuartZ中繪制Curves案例的內容介紹完了，希望本文對你有幫助！希望本文對你有所幫助！如果想深入了解iphone繪圖的更多內容，請參考：

iPhone繪圖關于QuartZ中繪制Line案例

iPhone繪圖關于QuartZ中繪制Polygons案例

責任編輯：zhaolei 來源：新浪博客