iOS开发UI-利用Quartz2D 实现基本绘图（画三角形、矩形、圆、圆弧）

1.画三角形  运行结果如下

1.1具体实现步骤

1.1.1首先新建一个project，然后自定义一个view

1.2代码

1. #import "htingShapeView.h"
2. @implementation htingShapeView
3. - (id)initWithFrame:(CGRect)frame
4. {
5. self = [super initWithFrame:frame];
6. if (self) {
7. // Initialization code
8. }
9. return self;
10. }
11. - (void)drawRect:(CGRect)rect
12. {
13. //    draw4Rect();
14. drawTriangle();
15. }
16. /**
17. *  画四边形
18. */
19. void draw4Rect()
20. {
21. // 1.获得上下文
22. CGContextRef ctx = UIGraphicsGetCurrentContext();
23. // 2.画矩形
24. CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));
25. // set : 同时设置为实心和空心颜色
26. // setStroke : 设置空心颜色
27. // setFill : 设置实心颜色
28. [[UIColor whiteColor] set];
29. //    CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);
30. // 3.绘制图形
31. CGContextFillPath(ctx);
32. }
33. /**
34. *  画三角形
35. */
36. void drawTriangle()
37. {
38. // 1.获得上下文
39. CGContextRef ctx = UIGraphicsGetCurrentContext();
40. // 2.画三角形
41. CGContextMoveToPoint(ctx, 0, 0);
42. CGContextAddLineToPoint(ctx, 100, 100);
43. CGContextAddLineToPoint(ctx, 150, 80);
44. // 关闭路径(连接起点和最后一个点)起点和终点连起来
45. CGContextClosePath(ctx);
46. //
47. CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);
48. // 3.绘制图形
49. CGContextStrokePath(ctx);
50. }
51. @end

2.画矩形运行效果如下

2.1具体实现步骤

2.1.1搭建界面同上

2.1.2代码

1. #import "htingShapeView.h"
2. @implementation htingShapeView
3. - (id)initWithFrame:(CGRect)frame
4. {
5. self = [super initWithFrame:frame];
6. if (self) {
7. // Initialization code
8. }
9. return self;
10. }
11. - (void)drawRect:(CGRect)rect
12. {
13. draw4Rect();
14. //    drawTriangle();
15. }
16. /**
17. *  画四边形
18. */
19. void draw4Rect()
20. {
21. // 1.获得上下文
22. CGContextRef ctx = UIGraphicsGetCurrentContext();
23. // 2.画矩形
24. CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));
25. // set : 同时设置为实心和空心颜色
26. // setStroke : 设置空心颜色
27. // setFill : 设置实心颜色
28. [[UIColor whiteColor] set];
29. //    CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);
30. // 3.绘制图形
31. CGContextFillPath(ctx);
32. }
33. /**
34. *  画三角形
35. */
36. void drawTriangle()
37. {
38. // 1.获得上下文
39. CGContextRef ctx = UIGraphicsGetCurrentContext();
40. // 2.画三角形
41. CGContextMoveToPoint(ctx, 0, 0);
42. CGContextAddLineToPoint(ctx, 100, 100);
43. CGContextAddLineToPoint(ctx, 150, 80);
44. // 关闭路径(连接起点和最后一个点)起点和终点连起来
45. CGContextClosePath(ctx);
46. //
47. CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);
48. // 3.绘制图形
49. CGContextStrokePath(ctx);
50. }
51. @end

3.画圆  圆弧  等 运行效果如下

3.1代码实现

1. #import "htingCircleView.h"
2. @implementation htingCircleView
3. - (id)initWithFrame:(CGRect)frame
4. {
5. self = [super initWithFrame:frame];
6. if (self) {
7. // Initialization code
8. }
9. return self;
10. }
11. /**
12. *  在view第一次显示到屏幕上的时候会调用一次
13. */
14. - (void)drawRect:(CGRect)rect
15. {
16. //    drawCircle2();
17. drawCircle();
18. }
19. void drawCircle2()
20. {
21. // 1.获得上下文
22. CGContextRef ctx = UIGraphicsGetCurrentContext();
23. // 2.画1/4圆
24. CGContextMoveToPoint(ctx, 100, 100);
25. CGContextAddLineToPoint(ctx, 100, 150);
26. CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);
27. CGContextClosePath(ctx); //合并路径  把起点和终点连起来
28. [[UIColor redColor] set];//设置颜色  红色
29. // 3.显示所绘制的东西   FillPath实心
30. CGContextFillPath(ctx);
31. }
32. /**
33. *  画圆弧
34. */
35. void drawArc()
36. {
37. // 1.获得上下文
38. CGContextRef ctx = UIGraphicsGetCurrentContext();
39. // 2.画圆弧
40. // x\y : 圆心
41. // radius : 半径
42. // startAngle : 开始角度
43. // endAngle : 结束角度
44. // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
45. //    CGContextAddArc(<#CGContextRef c#>, <#CGFloat x#>, <#CGFloat y#>, <#CGFloat radius#>, <#CGFloat startAngle#>, <#CGFloat endAngle#>, <#int clockwise#>)
46. CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
47. //    CGContextAddArc(ctx, 100（圆心x）, 100（圆心y), 50, M_PI_2, M_PI, 0);
48. // 3.显示所绘制的东西
49. CGContextFillPath(ctx); //把绘制的路径用空心显示出来
50. //CGContextStrokePath(ctx);画实心
51. }
52. /**
53. *  画圆
54. */
55. void drawCircle()
56. {
57. // 1.获得上下文
58. CGContextRef ctx = UIGraphicsGetCurrentContext();
59. // 2.画圆
60. CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));//(50, 10,是坐标也就是这个圆的位置   100, 100表示宽高都是100
61. CGContextSetLineWidth(ctx, 10); //设置线宽画圆环
62. // 3.显示所绘制的东西
63. CGContextStrokePath(ctx);
64. }
65. @end