iPhone繪圖關(guān)于QuartZ中繪制Curves案例
iPhone繪圖關(guān)于QuartZ中繪制案例是本文要介紹的內(nèi)容,主要來講解如何來繪制Curves的內(nèi)容,本文主要是以代碼來實(shí)現(xiàn)的內(nèi)容,那么來看詳細(xì)代碼講解。
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);
 
繪制出的結(jié)果如下圖:
代碼
- CGContextAddEllipseInRect(context, CGRectMake(30.0, 30.0, 60.0, 60.0));
 - CGContextStrokePath(context);
 
就是在指定的矩形區(qū)域內(nèi)添加一個(gè)橢圓,使橢圓和矩形的邊相切,如上圖第一列第一個(gè)圓。
此代碼
- CGContextStrokeEllipseInRect(context, CGRectMake(30.0, 120.0, 60.0, 60.0));
 
等價(jià)于上面的兩行代碼。如上圖第一列第二個(gè)。
- CGContextFillEllipseInRect(context, CGRectMake(30.0, 210.0, 60.0, 60.0));
 
等價(jià)于AddEllipseInRect(); FillPath();如上圖第一列第三個(gè)。
第二列第一個(gè)為繪制的兩個(gè)單獨(dú)的圓弧,代碼如下:
- // 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為半徑,接下來兩個(gè)參數(shù)分別為開始的弧度和結(jié)束的弧度,最后一個(gè)參數(shù)如果為false(0),就是逆時(shí)針方向繪制,如果為true(1),就是順時(shí)針方向繪制圓弧。
第二列第二個(gè)會(huì)繪制兩個(gè)方向相反的圓弧,第三個(gè)為繪制兩個(gè)方向相同的圓弧。
- // 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為圓心的正下方,逆時(shí)針旋轉(zhuǎn),角度逐漸變大)
第三列第一個(gè)為下列代碼:
- // 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);
 
函數(shù)CGContextAddArcToPoint為從current point 到p[1]畫切線,接著從p[1]到p[2]畫切線,30為圓弧的半徑。
第三列第二個(gè)為繪制的一個(gè)圓角矩形
代碼如下:
- 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
 - // 本例中開始點(diǎn)和結(jié)束點(diǎn)一樣只是一個(gè)巧合,所以,我們在最后最好要加上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曲線,有兩個(gè)控制點(diǎn)。
下半部分為繪制的quad曲線,有一個(gè)控制點(diǎn)。
小結(jié):iPhone繪圖關(guān)于QuartZ中繪制Curves案例的內(nèi)容介紹完了,希望本文對你有幫助!希望本文對你有所幫助!如果想深入了解iphone繪圖的更多內(nèi)容,請參考:

















 
 
 
 
 
 
 