iOS基本图形的绘制

浅浅的花香味﹌ 2023-10-17 08:21 152阅读 0赞

基本图形的绘制 包括： 代码画线，画文字 图片 裁剪 重绘 简单动画

当自定义view的时候 系统会自动调用drawRect 方法

画线

**\[objc\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \- (void)drawRect:(CGRect)rect
2.  \{
3.  // Drawing code
4.  // 1.获得图形上下文
5.  CGContextRef ctx = 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 plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\*
2.   \* 画圆弧
3.   \*/
4.  void drawArc()
5.  \{
6.  // 1.获得上下文
7.  CGContextRef ctx = 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 plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\*
2.   \* 画圆
3.   \*/
4.  void drawCircle()
5.  \{
6.  // 1.获得上下文
7.  CGContextRef ctx = 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 plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\*
2.   \* 画四边形
3.   \*/
4.  void draw4Rect()
5.  \{
6.  // 1.获得上下文
7.  CGContextRef ctx = UIGraphicsGetCurrentContext();
8.  
9.  // 2.画矩形
10. CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));
11. 
12. // set : 同时设置为实心和空心颜色
13. // setStroke : 设置空心颜色
14. // setFill : 设置实心颜色
15. \[\[UIColor whiteColor\] set\];
16. 
17. // CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);
18. 
19. // 3.绘制图形
20. CGContextFillPath(ctx);
21. \}

画三角形

**\[objc\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\*
2.   \* 画三角形
3.   \*/
4.  void drawTriangle()
5.  \{
6.  // 1.获得上下文
7.  CGContextRef ctx = 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. \}

画文字

**\[objc\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\*
2.   \* 画文字
3.   \*/
4.  void drawText()
5.  \{
6.  // 1.获得上下文
7.  CGContextRef ctx = UIGraphicsGetCurrentContext();
8.  // 2.画矩形
9.  CGRect cubeRect = CGRectMake(50, 50, 100, 100);
10. CGContextAddRect(ctx, cubeRect);
11. // 3.显示所绘制的东西
12. CGContextFillPath(ctx);
13. 
14. 
15. 
16. // 4.画文字
17. NSString \*str = @"哈哈哈哈Good morning hello hi hi hi hi";
18. // \[str drawAtPoint:CGPointZero withAttributes:nil\];
19. 
20. NSMutableDictionary \*attrs = \[NSMutableDictionary dictionary\];
21. // NSForegroundColorAttributeName : 文字颜色
22. // NSFontAttributeName : 字体
23. attrs\[NSForegroundColorAttributeName\] = \[UIColor redColor\];
24. attrs\[NSFontAttributeName\] = \[UIFont systemFontOfSize:50\];
25. \[str drawInRect:cubeRect withAttributes:attrs\];
26. \}

画图片

**\[objc\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  void drawImage()
2.  \{
3.  // 1.取得图片
4.  UIImage \*image = \[UIImage imageNamed:@"me"\];
5.  
6.  // 2.画
7.  // \[image drawAtPoint:CGPointMake(50, 50)\];
8.  // \[image drawInRect:CGRectMake(0, 0, 150, 150)\];
9.  \[image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)\];
10. 
11. // 3.画文字
12. NSString \*str = @"为xxx所画";
13. \[str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil\];
14. \}

在绘制的时候 当设置了ctx 的颜色的时候 再绘制其他的图时，颜色需要重置，很麻烦，解决方法是重置 ctx 如下

**\[objc\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  // 将ctx拷贝一份放到栈中
2.  CGContextSaveGState(ctx);
3.  
4.  // 设置绘图状态
5.  CGContextSetLineWidth(ctx, 10);
6.  \[\[UIColor redColor\] 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 plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  CGContextRotateCTM(ctx, M\_PI\_4 \* 0.3);
2.  CGContextScaleCTM(ctx, 0.5, 0.5);
3.  CGContextTranslateCTM(ctx, 0, 150);

图片的裁剪 思路是 裁剪ctx的显示区域

**\[objc\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \- (void)drawRect:(CGRect)rect
2.  \{
3.  CGContextRef ctx = 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 = \[UIImage imageNamed:@"me"\];
15. \[image drawAtPoint:CGPointMake(100, 100)\];
16. 
17. CGContextRestoreGState(ctx);
18. 
19. CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50));
20. CGContextFillPath(ctx);
21. \}

动画

CADisplayLink 是一个定时器，特点 刷新频率高， setNeedsDisplay方法起重新绘制的作用

**\[objc\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \- (void)awakeFromNib
2.  \{
3.  CADisplayLink \*link = \[CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)\];
4.  \[link addToRunLoop:\[NSRunLoop mainRunLoop\] forMode:NSDefaultRunLoopMode\];
5.  
6.  // \[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats: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 = \[UIImage imageNamed:@"snow.jpg"\];
18. \[image drawAtPoint:CGPointMake(0, self.snowY)\];
19. \}

通过路径画图

**\[objc\]** [ view plain][view plain] [ copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \- (void)drawRect:(CGRect)rect
2.  \{
3.  CGContextRef ctx = UIGraphicsGetCurrentContext();
4.  
5.  // 1.先创建一个路径
6.  CGMutablePathRef linePath = 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. CGMutablePathRef circlePath = 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. CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();
30. CGColorSpaceRelease(cs);
31. 
32. // CFRelease(linePath);
33. // CFRelease(circlePath);
34. // CFRelease(cs);
35. \}

[view plain]: http://blog.csdn.net/codywangziham01/article/details/25809523#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/345070
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/345070/fork