IOS用CGContextRef畫各種圖形

  1. // 覆蓋drawRect方法,你可以在此自定義繪畫和動畫  

  2. - (void)drawRect:(CGRect)rect  

  3. {  

  4.     //An opaque type that represents a Quartz 2D drawing environment.  

  5.     //一個不透明類型的Quartz 2D繪畫環境,相當於一個畫布,你可以在上面任意繪畫  

  6.     CGContextRef context = UIGraphicsGetCurrentContext();  

  7.       

  8.     /*寫文字*/  

  9.     CGContextSetRGBFillColor (context,  1, 0, 0, 1.0);//設置填充顏色  

  10.     UIFont  *font = [UIFont boldSystemFontOfSize:15.0];//設置  

  11.     [@"畫圓:" drawInRect:CGRectMake(10, 20, 80, 20) withFont:font];  

  12.     [@"畫線及孤線:" drawInRect:CGRectMake(10, 80, 100, 20) withFont:font];  

  13.     [@"畫矩形:" drawInRect:CGRectMake(10, 120, 80, 20) withFont:font];  

  14.     [@"畫扇形和橢圓:" drawInRect:CGRectMake(10, 160, 110, 20) withFont:font];  

  15.     [@"畫三角形:" drawInRect:CGRectMake(10, 220, 80, 20) withFont:font];  

  16.     [@"畫圓角矩形:" drawInRect:CGRectMake(10, 260, 100, 20) withFont:font];  

  17.     [@"畫貝塞爾曲線:" drawInRect:CGRectMake(10, 300, 100, 20) withFont:font];  

  18.     [@"圖片:" drawInRect:CGRectMake(10, 340, 80, 20) withFont:font];  

  19.   

  20.     /*畫圓*/  

  21.     //邊框圓  

  22.     CGContextSetRGBStrokeColor(context,1,1,1,1.0);//畫筆線的顏色  

  23.     CGContextSetLineWidth(context, 1.0);//線的寬度  

  24.     //void CGContextAddArc(CGContextRef c,CGFloat x, CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle, int clockwise)1弧度=180°/π (≈57.3°) 度=弧度×180°/π 360°=360×π/180 =2π 弧度   

  25.     // x,y爲圓點座標,radius半徑,startAngle爲開始的弧度,endAngle爲 結束的弧度,clockwise 0爲順時針,1爲逆時針。  

  26.     CGContextAddArc(context, 100, 20, 15, 0, 2*PI, 0); //添加一個圓  

  27.     CGContextDrawPath(context, kCGPathStroke); //繪製路徑  

  28.       

  29.     //填充圓,無邊框  

  30.     CGContextAddArc(context, 150, 30, 30, 0, 2*PI, 0); //添加一個圓  

  31.     CGContextDrawPath(context, kCGPathFill);//繪製填充  

  32.       

  33.     //畫大圓並填充顏  

  34.     UIColor*aColor = [UIColor colorWithRed:1 green:0.0 blue:0 alpha:1];  

  35.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顏色  

  36.     CGContextSetLineWidth(context, 3.0);//線的寬度  

  37.     CGContextAddArc(context, 250, 40, 40, 0, 2*PI, 0); //添加一個圓  

  38.     //kCGPathFill填充非零繞數規則,kCGPathEOFill表示用奇偶規則,kCGPathStroke路徑,kCGPathFillStroke路徑填充,kCGPathEOFillStroke表示描線,不是填充  

  39.     CGContextDrawPath(context, kCGPathFillStroke); //繪製路徑加填充  

  40.       

  41.     /*畫線及孤線*/  

  42.     //畫線  

  43.     CGPoint aPoints[2];//座標點  

  44.     aPoints[0] =CGPointMake(100, 80);//座標1  

  45.     aPoints[1] =CGPointMake(130, 80);//座標2  

  46.     //CGContextAddLines(CGContextRef c, const CGPoint points[],size_t count)  

  47.     //points[]座標數組,和count大小  

  48.     CGContextAddLines(context, aPoints, 2);//添加線  

  49.     CGContextDrawPath(context, kCGPathStroke); //根據座標繪製路徑  

  50.       

  51.     //畫笑臉弧線  

  52.     //左  

  53.     CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);//改變畫筆顏色  

  54.     CGContextMoveToPoint(context, 140, 80);//開始座標p1  

  55.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  

  56.     //x1,y1跟p1形成一條線的座標p2,x2,y2結束座標跟p3形成一條線的p3,radius半徑,注意, 需要算好半徑的長度,  

  57.     CGContextAddArcToPoint(context, 148, 68, 156, 80, 10);  

  58.     CGContextStrokePath(context);//繪畫路徑  

  59.       

  60.     //右  

  61.     CGContextMoveToPoint(context, 160, 80);//開始座標p1  

  62.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  

  63.     //x1,y1跟p1形成一條線的座標p2,x2,y2結束座標跟p3形成一條線的p3,radius半徑,注意, 需要算好半徑的長度,  

  64.     CGContextAddArcToPoint(context, 168, 68, 176, 80, 10);  

  65.     CGContextStrokePath(context);//繪畫路徑  

  66.       

  67.     //右  

  68.     CGContextMoveToPoint(context, 150, 90);//開始座標p1  

  69.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  

  70.     //x1,y1跟p1形成一條線的座標p2,x2,y2結束座標跟p3形成一條線的p3,radius半徑,注意, 需要算好半徑的長度,  

  71.     CGContextAddArcToPoint(context, 158, 102, 166, 90, 10);  

  72.     CGContextStrokePath(context);//繪畫路徑  

  73.     //注,如果還是沒弄明白怎麼回事,請參考:http://donbe.blog.163.com/blog/static/138048021201052093633776/  

  74.       

  75.     /*畫矩形*/  

  76.     CGContextStrokeRect(context,CGRectMake(100, 120, 10, 10));//畫方框  

  77.     CGContextFillRect(context,CGRectMake(120, 120, 10, 10));//填充框  

  78.     //矩形,並填棄顏色  

  79.     CGContextSetLineWidth(context, 2.0);//線的寬度  

  80.     aColor = [UIColor blueColor];//blue藍色  

  81.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顏色  

  82.     aColor = [UIColor yellowColor];  

  83.     CGContextSetStrokeColorWithColor(context, aColor.CGColor);//線框顏色  

  84.     CGContextAddRect(context,CGRectMake(140, 120, 60, 30));//畫方框  

  85.     CGContextDrawPath(context, kCGPathFillStroke);//繪畫路徑  

  86.       

  87.     //矩形,並填棄漸變顏色  

  88.     //關於顏色參考http://blog.sina.com.cn/s/blog_6ec3c9ce01015v3c.html  

  89.     //http://blog.csdn.net/reylen/article/details/8622932  

  90.     //第一種填充方式,第一種方式必須導入類庫quartcore並#import <QuartzCore/QuartzCore.h>,這個就不屬於在context上畫,而是將層插入到view層上面。那麼這裏就設計到Quartz Core 圖層編程了。  

  91.     CAGradientLayer *gradient1 = [CAGradientLayer layer];  

  92.     gradient1.frame = CGRectMake(240, 120, 60, 30);  

  93.     gradient1.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,  

  94.                         (id)[UIColor grayColor].CGColor,  

  95.                         (id)[UIColor blackColor].CGColor,  

  96.                         (id)[UIColor yellowColor].CGColor,  

  97.                         (id)[UIColor blueColor].CGColor,  

  98.                         (id)[UIColor redColor].CGColor,  

  99.                         (id)[UIColor greenColor].CGColor,  

  100.                         (id)[UIColor orangeColor].CGColor,  

  101.                         (id)[UIColor brownColor].CGColor,nil];  

  102.     [self.layer insertSublayer:gradient1 atIndex:0];  

  103.     //第二種填充方式   

  104.     CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();  

  105.     CGFloat colors[] =  

  106.     {  

  107.         1,1,1, 1.00,  

  108.         1,1,0, 1.00,  

  109.         1,0,0, 1.00,  

  110.         1,0,1, 1.00,  

  111.         0,1,1, 1.00,  

  112.         0,1,0, 1.00,  

  113.         0,0,1, 1.00,  

  114.         0,0,0, 1.00,  

  115.     };  

  116.     CGGradientRef gradient = CGGradientCreateWithColorComponents  

  117.     (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));//形成梯形,漸變的效果   

  118.     CGColorSpaceRelease(rgb);  

  119.     //畫線形成一個矩形  

  120.     //CGContextSaveGState與CGContextRestoreGState的作用  

  121.     /* 

  122.      CGContextSaveGState函數的作用是將當前圖形狀態推入堆棧。之後,您對圖形狀態所做的修改會影響隨後的描畫操作,但不影響存儲在堆棧中的拷貝。在修改完成後,您可以通過CGContextRestoreGState函數把堆棧頂部的狀態彈出,返回到之前的圖形狀態。這種推入和彈出的方式是回到之前圖形狀態的快速方法,避免逐個撤消所有的狀態修改;這也是將某些狀態(比如裁剪路徑)恢復到原有設置的唯一方式。 

  123.      */  

  124.     CGContextSaveGState(context);  

  125.     CGContextMoveToPoint(context, 220, 90);  

  126.     CGContextAddLineToPoint(context, 240, 90);  

  127.     CGContextAddLineToPoint(context, 240, 110);  

  128.     CGContextAddLineToPoint(context, 220, 110);  

  129.     CGContextClip(context);//context裁剪路徑,後續操作的路徑  

  130.     //CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)  

  131.     //gradient漸變顏色,startPoint開始漸變的起始位置,endPoint結束座標,options開始座標之前or開始之後開始漸變  

  132.     CGContextDrawLinearGradient(context, gradient,CGPointMake  

  133.                                 (220,90) ,CGPointMake(240,110),  

  134.                                 kCGGradientDrawsAfterEndLocation);  

  135.     CGContextRestoreGState(context);// 恢復到之前的context  

  136.       

  137.     //再寫一個看看效果  

  138.     CGContextSaveGState(context);  

  139.     CGContextMoveToPoint(context, 260, 90);  

  140.     CGContextAddLineToPoint(context, 280, 90);  

  141.     CGContextAddLineToPoint(context, 280, 100);  

  142.     CGContextAddLineToPoint(context, 260, 100);  

  143.     CGContextClip(context);//裁剪路徑  

  144.     //說白了,開始座標和結束座標是控制漸變的方向和形狀  

  145.     CGContextDrawLinearGradient(context, gradient,CGPointMake  

  146.                                 (260, 90) ,CGPointMake(260, 100),  

  147.                                 kCGGradientDrawsAfterEndLocation);  

  148.     CGContextRestoreGState(context);// 恢復到之前的context  

  149.       

  150.     //下面再看一個顏色漸變的圓  

  151.     CGContextDrawRadialGradient(context, gradient, CGPointMake(300, 100), 0.0, CGPointMake(300, 100), 10, kCGGradientDrawsBeforeStartLocation);  

  152.       

  153.     /*畫扇形和橢圓*/  

  154.     //畫扇形,也就畫圓,只不過是設置角度的大小,形成一個扇形  

  155.     aColor = [UIColor colorWithRed:0 green:1 blue:1 alpha:1];  

  156.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顏色  

  157.     //以10爲半徑圍繞圓心畫指定角度扇形  

  158.     CGContextMoveToPoint(context, 160, 180);  

  159.     CGContextAddArc(context, 160, 180, 30,  -60 * PI / 180, -120 * PI / 180, 1);  

  160.     CGContextClosePath(context);  

  161.     CGContextDrawPath(context, kCGPathFillStroke); //繪製路徑  

  162.   

  163.     //畫橢圓  

  164.     CGContextAddEllipseInRect(context, CGRectMake(160, 180, 20, 8)); //橢圓  

  165.     CGContextDrawPath(context, kCGPathFillStroke);  

  166.       

  167.     /*畫三角形*/  

  168.     //只要三個點就行跟畫一條線方式一樣,把三點連接起來  

  169.     CGPoint sPoints[3];//座標點  

  170.     sPoints[0] =CGPointMake(100, 220);//座標1  

  171.     sPoints[1] =CGPointMake(130, 220);//座標2  

  172.     sPoints[2] =CGPointMake(130, 160);//座標3  

  173.     CGContextAddLines(context, sPoints, 3);//添加線  

  174.     CGContextClosePath(context);//封起來  

  175.     CGContextDrawPath(context, kCGPathFillStroke); //根據座標繪製路徑  

  176.       

  177.     /*畫圓角矩形*/  

  178.     float fw = 180;  

  179.     float fh = 280;  

  180.       

  181.     CGContextMoveToPoint(context, fw, fh-20);  // 開始座標右邊開始  

  182.     CGContextAddArcToPoint(context, fw, fh, fw-20, fh, 10);  // 右下角角度  

  183.     CGContextAddArcToPoint(context, 120, fh, 120, fh-20, 10); // 左下角角度  

  184.     CGContextAddArcToPoint(context, 120, 250, fw-20, 250, 10); // 左上角  

  185.     CGContextAddArcToPoint(context, fw, 250, fw, fh-20, 10); // 右上角  

  186.     CGContextClosePath(context);  

  187.     CGContextDrawPath(context, kCGPathFillStroke); //根據座標繪製路徑  

  188.       

  189.     /*畫貝塞爾曲線*/  

  190.     //二次曲線  

  191.     CGContextMoveToPoint(context, 120, 300);//設置Path的起點  

  192.     CGContextAddQuadCurveToPoint(context,190, 310, 120, 390);//設置貝塞爾曲線的控制點座標和終點座標  

  193.     CGContextStrokePath(context);  

  194.     //三次曲線函數  

  195.     CGContextMoveToPoint(context, 200, 300);//設置Path的起點  

  196.     CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//設置貝塞爾曲線的控制點座標和控制點座標終點座標  

  197.     CGContextStrokePath(context);  

  198.       

  199.       

  200.     /*圖片*/  

  201.     UIImage *p_w_picpath = [UIImage p_w_picpathNamed:@"apple.jpg"];  

  202.     [p_w_picpath drawInRect:CGRectMake(60, 340, 20, 20)];//在座標中畫出圖片  

  203. //    [p_w_picpath drawAtPoint:CGPointMake(100, 340)];//保持圖片大小在point點開始畫圖片,可以把註釋去掉看看  

  204.     CGContextDrawImage(context, CGRectMake(100, 340, 20, 20), p_w_picpath.CGImage);//使用這個使圖片上下顛倒了,參考http://blog.csdn.net/koupoo/article/details/8670024  

  205.       

  206. //    CGContextDrawTiledImage(context, CGRectMake(0, 0, 20, 20), p_w_picpath.CGImage);//平鋪圖  

  207.   

  208. }  

  209.   

  210.   

  211. @end  


用法:


  1. CustomView *customView = [[CustomView alloc]initWithFrame:CGRectMake(0, 0, 320, self.view.frame.size.height)];  

  2.     [self.view addSubview:customView];  

 

轉載鏈接:http://blog.csdn.net/rhljiayou/article/details/9919713

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章