自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

iPhone繪圖關(guān)于QuartZ中繪制Curves案例

作者：佚名
移動(dòng)開發(fā) iOS
iPhone繪圖關(guān)于QuartZ中繪制案例是本文要介紹的內(nèi)容，主要來講解如何來繪制Curves的內(nèi)容，本文主要是以代碼來實(shí)現(xiàn)的內(nèi)容，那么來看詳細(xì)代碼講解。

iPhone繪圖關(guān)于QuartZ中繪制案例是本文要介紹的內(nèi)容，主要來講解如何來繪制Curves的內(nèi)容，本文主要是以代碼來實(shí)現(xiàn)的內(nèi)容，那么來看詳細(xì)代碼講解。

1.用Ellipses和Arcs繪制曲線

代碼如下：

  1. // Drawing with a white stroke color  
  2. CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);  
  3. // And draw with a blue fill color  
  4. CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);  
  5. // Draw them with a 2.0 stroke width so they are a bit more visible.  
  6. CGContextSetLineWidth(context, 2.0);  
  7.  
  8. // Add an ellipse circumscribed in the given rect to the current path, then stroke it  
  9. CGContextAddEllipseInRect(context, CGRectMake(30.0, 30.0, 60.0, 60.0));  
  10. CGContextStrokePath(context);  
  11. // Stroke ellipse convenience that is equivalent to AddEllipseInRect(); StrokePath();  
  12. CGContextStrokeEllipseInRect(context, CGRectMake(30.0, 120.0, 60.0, 60.0));  
  13. // Fill rect convenience equivalent to AddEllipseInRect(); FillPath();  
  14. CGContextFillEllipseInRect(context, CGRectMake(30.0, 210.0, 60.0, 60.0));  
  15.  
  16. // Stroke 2 seperate arcs  
  17. CGContextAddArc(context, 150.0, 60.0, 30.0, 0.0, M_PI/2.0, false);  
  18. CGContextStrokePath(context);  
  19. CGContextAddArc(context, 150.0, 60.0, 30.0, 3.0*M_PI/2.0, M_PI, true);  
  20. CGContextStrokePath(context);  
  21.  
  22. // Stroke 2 arcs together going opposite directions.  
  23. CGContextAddArc(context, 150.0, 150.0, 30.0, 0.0, M_PI/2.0, false);  
  24. CGContextAddArc(context, 150.0, 150.0, 30.0, 3.0*M_PI/2.0, M_PI, true);  
  25. CGContextStrokePath(context);  
  26.  
  27. // Stroke 2 arcs together going the same direction..  
  28. CGContextAddArc(context, 150.0, 240.0, 30.0, 0.0, M_PI/2.0, false);  
  29. CGContextAddArc(context, 150.0, 240.0, 30.0, M_PI, 3.0*M_PI/2.0, false);  
  30. CGContextStrokePath(context);  
  31. // Stroke an arc using AddArcToPoint  
  32. CGPoint p[3] =  
  33. {  
  34. CGPointMake(210.0, 30.0),  
  35. CGPointMake(210.0, 60.0),  
  36. CGPointMake(240.0, 60.0),  
  37. };  
  38. CGContextMoveToPoint(context, p[0].x, p[0].y);  
  39. CGContextAddArcToPoint(context, p[1].x, p[1].y, p[2].x, p[2].y, 30.0);  
  40. CGContextStrokePath(context);  
  41.  
  42. // Show the two segments that are used to determine the tangent lines to draw the arc.  
  43. CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);  
  44. CGContextAddLines(context, p, sizeof(p)/sizeof(p[0]));  
  45. CGContextStrokePath(context);  
  46. // As a bonus, we'll combine arcs to create a round rectangle!  
  47. // Drawing with a white stroke color  
  48. CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);  
  49. // If you were making this as a routine, you would probably accept a rectangle  
  50. // that defines its bounds, and a radius reflecting the "rounded-ness" of the rectangle.  
  51. CGRect rrect = CGRectMake(210.0, 90.0, 60.0, 60.0);  
  52. CGFloat radius = 10.0;  
  53. // NOTE: At this point you may want to verify that your radius is no more than half  
  54. // the width and height of your rectangle, as this technique degenerates for those cases.  
  55. // In order to draw a rounded rectangle, we will take advantage of the fact that  
  56. // CGContextAddArcToPoint will draw straight lines past the start and end of the arc  
  57. // in order to create the path from the current position and the destination position.  
  58. // In order to create the 4 arcs correctly, we need to know the min, mid and max positions  
  59. // on the x and y lengths of the given rectangle.  
  60. CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);  
  61. CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);  
  62. // Next, we will go around the rectangle in the order given by the figure below.  
  63. //       minx    midx    maxx  
  64. // miny    2       3       4  
  65. // midy   1 9              5  
  66. // maxy    8       7       6  
  67. // Which gives us a coincident start and end point, which is incidental to this technique, but still doesn't  
  68. // form a closed path, so we still need to close the path to connect the ends correctly.  
  69. // Thus we start by moving to point 1, then adding arcs through each pair of points that follows.  
  70. // You could use a similar tecgnique to create any shape with rounded corners.  
  71. // Start at 1  
  72. CGContextMoveToPoint(context, minx, midy);  
  73. // Add an arc through 2 to 3  
  74. CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);  
  75. // Add an arc through 4 to 5  
  76. CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);  
  77. // Add an arc through 6 to 7  
  78. CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);  
  79. // Add an arc through 8 to 9  
  80. CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);  
  81. // Close the path  
  82. CGContextClosePath(context);  
  83. // Fill & stroke the path  
  84. CGContextDrawPath(context, kCGPathFillStroke); 

繪制出的結(jié)果如下圖：

iPhone繪圖關(guān)于QuartZ中繪制Curves案例

代碼

  1. CGContextAddEllipseInRect(context, CGRectMake(30.0, 30.0, 60.0, 60.0));  
  2. CGContextStrokePath(context); 

就是在指定的矩形區(qū)域內(nèi)添加一個(gè)橢圓，使橢圓和矩形的邊相切，如上圖第一列第一個(gè)圓。

此代碼

  1. CGContextStrokeEllipseInRect(context, CGRectMake(30.0, 120.0, 60.0, 60.0)); 

等價(jià)于上面的兩行代碼。如上圖第一列第二個(gè)。

  1. CGContextFillEllipseInRect(context, CGRectMake(30.0, 210.0, 60.0, 60.0)); 

等價(jià)于AddEllipseInRect(); FillPath();如上圖第一列第三個(gè)。

第二列第一個(gè)為繪制的兩個(gè)單獨(dú)的圓弧，代碼如下：

  1. // Stroke 2 seperate arcs  
  2. CGContextAddArc(context, 150.0, 60.0, 30.0, 0.0, M_PI/2.0, false);  
  3. CGContextStrokePath(context);  
  4. CGContextAddArc(context, 150.0, 60.0, 30.0, 3.0*M_PI/2.0, M_PI, true);  
  5. CGContextStrokePath(context); 

其中（150.0，60.0）為圓弧的圓心。30.0為半徑，接下來兩個(gè)參數(shù)分別為開始的弧度和結(jié)束的弧度，最后一個(gè)參數(shù)如果為false（0），就是逆時(shí)針方向繪制，如果為true（1），就是順時(shí)針方向繪制圓弧。

第二列第二個(gè)會(huì)繪制兩個(gè)方向相反的圓弧，第三個(gè)為繪制兩個(gè)方向相同的圓弧。

  1. // Stroke 2 arcs together going opposite directions.  
  2. CGContextAddArc(context, 150.0, 150.0, 30.0, 0.0, M_PI/2.0, false);  
  3. CGContextAddArc(context, 150.0, 150.0, 30.0, 3.0*M_PI/2.0, M_PI, true);  
  4. CGContextStrokePath(context);  
  5. // Stroke 2 arcs together going the same direction..  
  6. CGContextAddArc(context, 150.0, 240.0, 30.0, 0.0, M_PI/2.0, false);  
  7. CGContextAddArc(context, 150.0, 240.0, 30.0, M_PI, 3.0*M_PI/2.0, false);  
  8. CGContextStrokePath(context); 

（其中角度0.0為圓心的正下方，逆時(shí)針旋轉(zhuǎn)，角度逐漸變大）

第三列第一個(gè)為下列代碼：

  1. // Stroke an arc using AddArcToPoint  
  2. CGPoint p[3] =  
  3. {  
  4. CGPointMake(210.0, 30.0),  
  5. CGPointMake(210.0, 60.0),  
  6. CGPointMake(240.0, 60.0),  
  7. };  
  8. CGContextMoveToPoint(context, p[0].x, p[0].y);  
  9. CGContextAddArcToPoint(context, p[1].x, p[1].y, p[2].x, p[2].y, 30.0);  
  10. CGContextStrokePath(context);  
  11. // Show the two segments that are used to determine the tangent lines to draw the arc.  
  12. CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);  
  13. CGContextAddLines(context, p, sizeof(p)/sizeof(p[0]));  
  14. CGContextStrokePath(context); 

函數(shù)CGContextAddArcToPoint為從current point 到p[1]畫切線，接著從p[1]到p[2]畫切線，30為圓弧的半徑。

第三列第二個(gè)為繪制的一個(gè)圓角矩形

代碼如下：

  1.  CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);  
  2. CGRect rrect = CGRectMake(210.0, 90.0, 60.0, 60.0);  
  3. CGFloat radius = 10.0;  
  4. CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);  
  5. CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);  
  6. // 下面代碼的繪制路線如下所示了：  
  7. //       minx    midx    maxx  
  8. // miny    2       3       4  
  9. // midy   1 9              5  
  10. // maxy    8       7       6  
  11. // 本例中開始點(diǎn)和結(jié)束點(diǎn)一樣只是一個(gè)巧合，所以，我們?cè)谧詈笞詈靡由螩GContextClosePath  
  12. // Start at 1  
  13. CGContextMoveToPoint(context, minx, midy);  
  14. // Add an arc through 2 to 3  
  15. CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);  
  16. // Add an arc through 4 to 5  
  17. CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);  
  18. // Add an arc through 6 to 7  
  19. CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);  
  20. // Add an arc through 8 to 9  
  21. CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);  
  22. // Close the path  
  23. CGContextClosePath(context);  
  24. // Fill & stroke the path  
  25. CGContextDrawPath(context, kCGPathFillStroke); 

2.繪制Beziers &Quadratics曲線

繪制代碼如下：

  1. // Drawing with a white stroke color  
  2. CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);  
  3. // Draw them with a 2.0 stroke width so they are a bit more visible.  
  4. CGContextSetLineWidth(context, 2.0);  
  5. // Draw a bezier curve with end points s,e and control points cp1,cp2  
  6. CGPoint s = CGPointMake(30.0, 120.0);  
  7. CGPoint e = CGPointMake(300.0, 120.0);  
  8. CGPoint cp1 = CGPointMake(120.0, 30.0);  
  9. CGPoint cp2 = CGPointMake(210.0, 210.0);  
  10. CGContextMoveToPoint(context, s.x, s.y);  
  11. CGContextAddCurveToPoint(context, cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y);  
  12. CGContextStrokePath(context);  
  13. // Show the control points.  
  14. CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);  
  15. CGContextMoveToPoint(context, s.x, s.y);  
  16. CGContextAddLineToPoint(context, cp1.x, cp1.y);  
  17. CGContextMoveToPoint(context, e.x, e.y);  
  18. CGContextAddLineToPoint(context, cp2.x, cp2.y);  
  19. CGContextStrokePath(context);  
  20. // Draw a quad curve with end points s,e and control point cp1  
  21. CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);  
  22. s = CGPointMake(30.0, 300.0);  
  23. e = CGPointMake(270.0, 300.0);  
  24. cp1 = CGPointMake(150.0, 180.0);  
  25. CGContextMoveToPoint(context, s.x, s.y);  
  26. CGContextAddQuadCurveToPoint(context, cp1.x, cp1.y, e.x, e.y);  
  27. CGContextStrokePath(context);  
  28. // Show the control point.  
  29. CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);  
  30. CGContextMoveToPoint(context, s.x, s.y);  
  31. CGContextAddLineToPoint(context, cp1.x, cp1.y);  
  32. CGContextStrokePath(context); 

如圖：

iPhone繪圖關(guān)于QuartZ中繪制Curves案例

上半部分為繪制的bezier曲線，有兩個(gè)控制點(diǎn)。

下半部分為繪制的quad曲線，有一個(gè)控制點(diǎn)。

小結(jié)：iPhone繪圖關(guān)于QuartZ中繪制Curves案例的內(nèi)容介紹完了，希望本文對(duì)你有幫助！希望本文對(duì)你有所幫助！如果想深入了解iphone繪圖的更多內(nèi)容，請(qǐng)參考：

iPhone繪圖關(guān)于QuartZ中繪制Line案例

iPhone繪圖關(guān)于QuartZ中繪制Polygons案例

責(zé)任編輯：zhaolei 來源： 新浪博客
iPhone繪圖QuartZ繪制
相關(guān)推薦

2011-08-12 11:01:09

iPhone繪圖QuartZ繪制

2011-08-12 10:46:18

iPhone繪圖繪制QuartZ

2011-08-17 14:32:44

iOS開發(fā)繪制

2011-08-09 14:54:29

iPhoneNSDateanotherDate

2011-08-18 15:24:40

iPhone國(guó)際化

2011-08-10 18:24:22

iPhone 圖形 繪圖

2011-08-19 10:05:30

iPhone開發(fā)

2011-08-15 15:44:46

iPhone開發(fā)PDF

2011-08-18 16:24:44

iPhone開發(fā)圖片

2011-08-17 14:27:17

Core AnimatQuartz2D

2011-08-09 17:12:30

iPhoneCFRunLoop

2011-07-29 13:27:48

iPhone 開發(fā) Nib

2011-08-16 15:48:37

iPhone開發(fā)抓圖程序

2011-08-22 14:21:24

iPhone開發(fā)UIView Anim

2014-04-29 14:27:59

OpenGL ES 2Android繪制紋理

2011-08-15 13:44:07

iPhone開發(fā)UITableView

2011-08-22 15:15:49

iPhone開發(fā)NSMutableAr排序

2011-08-08 14:07:49

iPhone開發(fā) 類 字體

2011-08-15 09:58:25

iPhoneXib文件UITableView

2011-08-16 18:56:11

iPhone開發(fā)Three20
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)