IOS-Quartz2D（画基本图形）

Posted 2020-06-14

  1 //
  2 //  BWView.m
  3 //  ios_0221_Quartz2D画矩形
  4 //
  5 //  Created by ma c on 16/2/21.
  6 //  Copyright © 2016年 博文科技. All rights reserved.
  7 //
  8 
  9 #import "BWView.h"
 10 
 11 @implementation BWView
 12 /*
 13  一、什么是Quartz2D
 14  1.Quartz2D是一个二维绘图引擎，同时支持IOS和MAC系统
 15  
 16  2.Quartz2D能完成的工作
 17  1>绘制图形：线条\三角形\矩形\圆形\弧
 18  2>绘制文字：
 19  3>绘制\生成图片（图像）
 20  4>读取\生成PDF
 21  5>裁图\裁剪图片
 22  6>自定义UI控件
 23  
 24  3.实例
 25  1>裁剪图片（圆形）
 26  2>涂鸦\画板
 27  3>手势解锁
 28  
 29  4.最重要的价值
 30  1>自定义UI控件:因为有些UI界面及其复杂，而且比较个性化，用普通的UI控件根本无法实现，
 31  此时可以利用Quartz2D技术将控件内部结构画出来。
 32  
 33  5.最重要的概念
 34  1>图形上下文
 35  a.图形上下文（Graghics Context）：是一个CGContextRef类型的数据
 36  b.作用：
 37  保留绘图信息，绘图状态
 38  决定绘制的输出目标
 39  绘制好的图形 -> （保存）图形上下文 -> （显示）输出目标
 40  c.相同的一套绘制序列，指定不同的Graghics Context，就可以将相同的图像绘制到不同的
 41  目标上。
 42  
 43  6.Quartz2D提供了以下几种类型的Graghics Context：
 44  1>Bitmap Graphics Context
 45  2>PDF Graphics Context
 46  3>Window Graghics Context
 47  4>Layer Graghics Context
 48  5>Printer Graghics Context
 49  
 50  7.如何利用Quartz2D自定义view
 51  1>新建一个类，继承自UIView
 52  2>实现 -(void)drawRect:(CGRect)rect方法
 53  a.取得跟当前view相关联的图形上下文
 54  b.绘制相应的图形内容
 55  c.利用图形上下文将绘制的所有内容显示到view上面
 56  
 57  8.常识：
 58  1>绘图顺序：后绘制的图形覆盖前一个图形
 59  2>Quartz2D的API是纯C语言
 60  3>Quartz2D的API来自于Core Graphics框架
 61  4>数据类型和函数基本都以CG作为前缀
 62  
 63  */
 64 
 65 
 66 // Only override drawRect: if you perform custom drawing.
 67 // An empty implementation adversely affects performance during animation.
 68 - (void)drawRect:(CGRect)rect {
 69     
 70     //drawRectangle();
 71     //drawLine();
 72     //drawCircle();
 73     drawArc();
 74     
 75 }
 76 
 77 ///画圆弧
 78 void drawArc()
 79 {
 80     // 1.获得上下文
 81     CGContextRef ctf = UIGraphicsGetCurrentContext();
 82     
 83     // 2.画1/4圆
 84     CGContextMoveToPoint(ctf, 100, 50);
 85     CGContextAddLineToPoint(ctf, 100, 100);
 86     
 87     //画圆弧
 88     /*
 89             x/y:圆心
 90          radius:半径
 91      startAngle:开始角度
 92        endAngle:结束角度
 93       clockwise:圆弧的伸展方向（0：顺时针，1：逆时针）
 94      */
 95     CGContextAddArc(ctf, 100, 50, 50, M_PI_2, M_PI, 0);
 96     
 97     // 关闭路径（连接起点和最后一个点）
 98     CGContextClosePath(ctf);
 99     
100     // 设置颜色
101     [[UIColor redColor] set];
102 
103     // 3.显示
104     CGContextFillPath(ctf);
105 
106 }
107 
108 ///画圆
109 void drawCircle()
110 {
111     // 1.获得上下文
112     CGContextRef ctf = UIGraphicsGetCurrentContext();
113     
114     // 2.画圆
115     CGContextAddEllipseInRect(ctf, CGRectMake(60, 30, 100, 100));
116     
117     // 3.显示
118     CGContextStrokePath(ctf);
119 }
120 
121 ///画线
122 void drawLine()
123 {
124     // 1.获得上下文
125     CGContextRef ctf = UIGraphicsGetCurrentContext();
126     
127     // 2.拼接图形（路径）
128     
129     //画线
130     //设置起点
131     CGContextMoveToPoint(ctf, 10, 10);
132     //添加一条线段到（100，100）
133     CGContextAddLineToPoint(ctf, 100, 100);
134     
135     //设置起点
136     CGContextMoveToPoint(ctf, 100, 50);
137     //添加一条线段到（100，100）
138     CGContextAddLineToPoint(ctf, 200, 100);
139     CGContextAddLineToPoint(ctf, 230, 50);
140     
141     // 设置线宽
142     CGContextSetLineWidth(ctf, 5);
143     // 设置颜色
144     CGContextSetRGBStrokeColor(ctf, 1, 1, 0.1, 1);
145     //设置线段头尾部样式
146     CGContextSetLineCap(ctf, kCGLineCapRound);
147     //设置线段转折点样式
148     CGContextSetLineJoin(ctf, kCGLineJoinRound);
149     
150     // 3.渲染显示到view上面
151     CGContextStrokePath(ctf);
152 }
153 
154 ///画矩形
155 void drawRectangle()
156 {
157     // 1.获得上下文
158     CGContextRef ctf = UIGraphicsGetCurrentContext();
159     
160     // 2.画矩形
161     CGContextAddRect(ctf, CGRectMake(10, 10, 100, 100));
162     
163     // 3.绘制图形
164     //CGContextStrokePath(ctf);
165     CGContextFillPath(ctf);
166 }
167 
168 ///画三角形
169 void drawTriangle()
170 {
171     // 1.获得上下文
172     CGContextRef ctf = UIGraphicsGetCurrentContext();
173     
174     // 2.画三角形
175     CGContextMoveToPoint(ctf, 0, 0);
176     CGContextAddLineToPoint(ctf, 100, 100);
177     CGContextAddLineToPoint(ctf, 150, 80);
178     // 关闭路径（连接起点和最后一个点）
179     CGContextClosePath(ctf);
180     
181     // 3.绘制图形
182     CGContextStrokePath(ctf);
183     
184 }
185 
186 @end