iOS繪圖教程 – iPhone手機開發 iPhone軟體開發教學課程

基本圖形的繪制 包括: 代碼畫線,畫文字 圖片 裁剪 重繪 簡單動畫

當自定義view的時候 系統會自動調用drawRect 方法

畫線

[objc]view plaincopy

 

在CODE上查看代碼片派生到我的代碼片

  1. -(void)drawRect:(CGRect)rect
  2. {
  3. //Drawingcode
  4. //1.獲得圖形上下文
  5. CGContextRefctx=UIGraphicsGetCurrentContext();
  6.  
  7. //2.拼接圖形(路徑)
  8. //設置線段寬度
  9. CGContextSetLineWidth(ctx,10);
  10.  
  11. //設置線段頭尾部的樣式
  12. CGContextSetLineCap(ctx,kCGLineCapRound);
  13.  
  14. //設置線段轉折點的樣式
  15. CGContextSetLineJoin(ctx,kCGLineJoinRound);
  16.  
  17. /**第1根線段**/
  18. //設置顏色
  19. CGContextSetRGBStrokeColor(ctx,1,0,0,1);
  20. //設置一個起點
  21. CGContextMoveToPoint(ctx,10,10);
  22. //添加一條線段到(100,100)
  23. CGContextAddLineToPoint(ctx,100,100);
  24.  
  25. //渲染一次
  26. CGContextStrokePath(ctx);
  27.  
  28.  
  29. /**第2根線段**/
  30. //設置顏色
  31. CGContextSetRGBStrokeColor(ctx,0,0,1,1);
  32. //設置一個起點
  33. CGContextMoveToPoint(ctx,200,190);
  34. //添加一條線段到(150,40)
  35. CGContextAddLineToPoint(ctx,150,40);
  36. CGContextAddLineToPoint(ctx,120,60);
  37.  
  38.  
  39. //3.渲染顯示到view上面
  40. CGContextStrokePath(ctx);
  41. } 畫圓弧

[objc]view plaincopy在CODE上查看代碼片派生到我的代碼片

  1. /**
  2. *畫圓弧
  3. */
  4. voiddrawArc()
  5. {
  6. //1.獲得上下文
  7. CGContextRefctx=UIGraphicsGetCurrentContext();
  8.  
  9. //2.畫圓弧
  10. //x\y:圓心
  11. //radius:半徑
  12. //startAngle:開始角度
  13. //endAngle:結束角度
  14. //clockwise:圓弧的伸展方向(0:順時針,1:逆時針)
  15. CGContextAddArc(ctx,100,100,50,M_PI_2,M_PI,0);
  16.  
  17.  
  18. //3.顯示所繪制的東西
  19. CGContextFillPath(ctx);
  20. } 畫圓

[objc]view plaincopy

 

在CODE上查看代碼片派生到我的代碼片

  1. /**
  2. *畫圓
  3. */
  4. voiddrawCircle()
  5. {
  6. //1.獲得上下文
  7. CGContextRefctx=UIGraphicsGetCurrentContext();
  8.  
  9. //2.畫圓
  10. CGContextAddEllipseInRect(ctx,CGRectMake(50,10,100,100));
  11.  
  12. CGContextSetLineWidth(ctx,10);
  13.  
  14. //3.顯示所繪制的東西
  15. CGContextStrokePath(ctx);
  16. } 畫矩形

[objc]view plaincopy

 

在CODE上查看代碼片派生到我的代碼片

  1. /**
  2. *畫四邊形
  3. */
  4. voiddraw4Rect()
  5. {
  6. //1.獲得上下文
  7. CGContextRefctx=UIGraphicsGetCurrentContext();
  8.  
  9. //2.畫矩形
  10. CGContextAddRect(ctx,CGRectMake(10,10,150,100));
  11.  
  12. //set:同時設置為實心和空心顏色
  13. //setStroke:設置空心顏色
  14. //setFill:設置實心顏色
  15. [[UIColorwhiteColor]set];
  16.  
  17. //CGContextSetRGBFillColor(ctx,0,0,1,1);
  18.  
  19. //3.繪制圖形
  20. CGContextFillPath(ctx);
  21. } 畫三角形

[objc]view plaincopy在CODE上查看代碼片派生到我的代碼片

  1. /**
  2. *畫三角形
  3. */
  4. voiddrawTriangle()
  5. {
  6. //1.獲得上下文
  7. CGContextRefctx=UIGraphicsGetCurrentContext();
  8.  
  9. //2.畫三角形
  10. CGContextMoveToPoint(ctx,0,0);
  11. CGContextAddLineToPoint(ctx,100,100);
  12. CGContextAddLineToPoint(ctx,150,80);
  13. //關閉路徑(連接起點和最後一個點)
  14. CGContextClosePath(ctx);
  15.  
  16. //
  17. CGContextSetRGBStrokeColor(ctx,0,1,0,1);
  18.  
  19. //3.繪制圖形
  20. CGContextStrokePath(ctx);
  21. }
  22. 畫文字

[objc]view plaincopy在CODE上查看代碼片派生到我的代碼片

  1. /**
  2. *畫文字
  3. */
  4. voiddrawText()
  5. {
  6. //1.獲得上下文
  7. CGContextRefctx=UIGraphicsGetCurrentContext();
  8. //2.畫矩形
  9. CGRectcubeRect=CGRectMake(50,50,100,100);
  10. CGContextAddRect(ctx,cubeRect);
  11. //3.顯示所繪制的東西
  12. CGContextFillPath(ctx);
  13.  
  14.  
  15.  
  16. //4.畫文字
  17. NSString*str=@"哈哈哈哈Goodmorninghellohihihihi";
  18. //[strdrawAtPoint:CGPointZerowithAttributes:nil];
  19.  
  20. NSMutableDictionary*attrs=[NSMutableDictionarydictionary];
  21. //NSForegroundColorAttributeName:文字顏色
  22. //NSFontAttributeName:字體
  23. attrs[NSForegroundColorAttributeName]=[UIColorredColor];
  24. attrs[NSFontAttributeName]=[UIFontsystemFontOfSize:50];
  25. [strdrawInRect:cubeRectwithAttributes:attrs];
  26. }
  27. 畫圖片

 

[objc]view plaincopy

 

在CODE上查看代碼片派生到我的代碼片

  1. voiddrawImage()
  2. {
  3. //1.取得圖片
  4. UIImage*image=[UIImageimageNamed:@"me"];
  5.  
  6. //2.畫
  7. //[imagedrawAtPoint:CGPointMake(50,50)];
  8. //[imagedrawInRect:CGRectMake(0,0,150,150)];
  9. [imagedrawAsPatternInRect:CGRectMake(0,0,200,200)];
  10.  
  11. //3.畫文字
  12. NSString*str=@"為xxx所畫";
  13. [strdrawInRect:CGRectMake(0,180,100,30)withAttributes:nil];
  14. }
    在繪制的時候 當設置瞭ctx 的顏色的時候 再繪制其他的圖時,顏色需要重置,很麻煩,解決方法是重置 ctx 如下

 

[objc]view plaincopy

 

在CODE上查看代碼片派生到我的代碼片

  1. //將ctx拷貝一份放到棧中
  2. CGContextSaveGState(ctx);
  3.  
  4. //設置繪圖狀態
  5. CGContextSetLineWidth(ctx,10);
  6. [[UIColorredColor]set];
  7. CGContextSetLineCap(ctx,kCGLineCapRound);
  8.  
  9. //第1根線
  10. CGContextMoveToPoint(ctx,50,50);
  11. CGContextAddLineToPoint(ctx,120,190);
  12.  
  13. CGContextStrokePath(ctx);
  14.  
  15. //將棧頂的上下文出棧,替換當前的上下文
  16. CGContextRestoreGState(ctx);
    整個ctx 的旋轉 移動

 

 

[objc]view plaincopy

 

在CODE上查看代碼片派生到我的代碼片

  1. CGContextRotateCTM(ctx,M_PI_4*0.3);
  2. CGContextScaleCTM(ctx,0.5,0.5);
  3. CGContextTranslateCTM(ctx,0,150); 圖片的裁剪 思路是 裁剪ctx的顯示區域

[objc]view plaincopy在CODE上查看代碼片派生到我的代碼片

  1. -(void)drawRect:(CGRect)rect
  2. {
  3. CGContextRefctx=UIGraphicsGetCurrentContext();
  4.  
  5. CGContextSaveGState(ctx);
  6.  
  7. //0.畫圓
  8. CGContextAddEllipseInRect(ctx,CGRectMake(100,100,50,50));
  9. //裁剪
  10. CGContextClip(ctx);
  11. CGContextFillPath(ctx);
  12.  
  13. //1.顯示圖片
  14. UIImage*image=[UIImageimageNamed:@"me"];
  15. [imagedrawAtPoint:CGPointMake(100,100)];
  16.  
  17. CGContextRestoreGState(ctx);
  18.  
  19. CGContextAddRect(ctx,CGRectMake(0,0,50,50));
  20. CGContextFillPath(ctx);
  21. } 動畫

[objc]view plaincopy在CODE上查看代碼片派生到我的代碼片

  1. -(void)awakeFromNib
  2. {
  3. CADisplayLink*link=[CADisplayLinkdisplayLinkWithTarget:selfselector:@selector(setNeedsDisplay)];
  4. [linkaddToRunLoop:[NSRunLoopmainRunLoop]forMode:NSDefaultRunLoopMode];
  5.  
  6. //[NSTimerscheduledTimerWithTimeInterval:0.1target:selfselector:@selector(setNeedsDisplay)userInfo:nilrepeats:YES];
  7. }
  8.  
  9. -(void)drawRect:(CGRect)rect
  10. {
  11. self.snowY+=5;
  12.  
  13. if(self.snowY>=rect.size.height){
  14. self.snowY=-100;
  15. }
  16.  
  17. UIImage*image=[UIImageimageNamed:@"snow.jpg"];
  18. [imagedrawAtPoint:CGPointMake(0,self.snowY)];
  19. }

[objc]view plaincopy在CODE上查看代碼片派生到我的代碼片

  1. -(void)drawRect:(CGRect)rect
  2. {
  3. CGContextRefctx=UIGraphicsGetCurrentContext();
  4.  
  5. //1.先創建一個路徑
  6. CGMutablePathReflinePath=CGPathCreateMutable();
  7.  
  8.  
  9.  
  10. //2.拼接路徑
  11. CGPathMoveToPoint(linePath,NULL,0,0);
  12. CGPathAddLineToPoint(linePath,NULL,100,100);
  13.  
  14. //3.添加路徑到上下文
  15. CGContextAddPath(ctx,linePath);
  16.  
  17. CGMutablePathRefcirclePath=CGPathCreateMutable();
  18. CGPathAddArc(circlePath,NULL,150,150,50,0,M_PI*2,0);
  19. CGContextAddPath(ctx,circlePath);
  20.  
  21. //4.渲染
  22. CGContextStrokePath(ctx);
  23.  
  24.  
  25. CGPathRelease(linePath);
  26. CGPathRelease(circlePath);
  27.  
  28.  
  29. CGColorSpaceRefcs=CGColorSpaceCreateDeviceRGB();
  30. CGColorSpaceRelease(cs);
  31.  
  32. //CFRelease(linePath);
  33. //CFRelease(circlePath);
  34. //CFRelease(cs);
  35. }

You May Also Like