1、Quartz 2D是一个二维绘图引擎，同时支持ios和Mac系统； Quart2D的API是纯C语言的，API来自于Core Graphics框架：
2、Quartz 2D可以绘制图形（线段/三角形/矩形/圆和弧）、绘制文字、绘制和生成图片、读取/生成pdf、截图/裁剪图片、自定义UI控件等
3、对于界面复杂且个性化的UI，普通的UI控件无法实现，而Quartz2D技术却可以通过自定义UI控件来实现。其实，ios中大部分控件的内容都是通过Quart2D画出来的
4、图形上下文（GraphicsContext): 是一个CGContextRef类型的数据
图形上下文的作用：1）保存绘制信息、绘图状态；
2）决定绘制的输出目标（绘制到什么地方去：可以是pdf文件、图片或显示器的窗口上）
相同的一套绘图序列，指定不同的GraphicsContext, 就可将相同的图像绘制到不同的目标上，
Quartz2D提供了以下几种类型的Graphics Context :
1)Bitmap Graphics Context
2)PDF Graphics Context
3)Window Graphics Context
4)Layer Graphics Context
5)Printer Graphics Context
5、自定义控件
如何利用Quartz2D自定义UI控件，然后绘制东西到View上？
-->需要图形上下文，保存绘图信息； 然后图形上下文必须跟view相关联，才能将内容绘制到View上面
自定义UI控件的步骤：
1）新建一个类，继承自UIView
2）实现 - (void) drawRect: (CGRect)rect; 方法，然后在这个方法中，可以去的跟当前view相关联的图形上下文； 绘制相应的图形内容（绘制时产生的线条称为路径，路径由一个或多个线段或曲线段组成）；利用图形上下文将绘制的所有内容渲染显示到view上面
为什么要实现drawRect: 方法才能绘图到view上？
--》 因为在drawRect: 方法中才能取得跟view相关联的图形上下文
drawRect: 方法在什么时候被调用？
--》当view第一次显示到屏幕上时（被加到UIWindow上现实出来）
--》调用view的setNeedsDisplay或者setNeedsDisplayInRect: 时
6、view内部有个layer(图层）属性，drawRect: 方法中取得的是一个Layer Graphics Context， 因此，绘制的东西其实是绘制到view的layer上去了。 view之所以能现实东西，完全是因为它内部的layer
7、Quartz2D绘图的代码步骤（举例）：
1）活的图形上下文： CGContextRef ctx = UIGraphicsGetCurrentContext();
2) 拼接路径（假如一条线段）：
CGContextMoveToPoint(ctx, 10, 10); //线段起点坐标（10， 10）
CGContextAddLineToPoint(ctx, 100, 100); //线段绘制到坐标（100， 100）
3）绘制路径（渲染）： CGContextStrokePath(ctx); //CGContextFillPath(ctx);
8、常用拼接路径函数
1)新建一个起点：void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
2)添加新的线段到某个点：void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)
3)添加一个矩形： void CGContextAddRect(CGContextRef c, CGRect rect)
4)添加一个椭圆：void CGContextAddEllipseInRect(CGContextRef context, CGRect rect)
5)添加一个圆弧：void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
6)Mode参数决定绘制的模式： void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)
7)绘制空心路径： void CGContextStrokePath(CGContextRef c)
8)绘制实心路径： void CGContextFillPath(CGContextRef c)
一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数，都是用来绘制路径的
9）将当前的上下文 Copy一份，保存到栈顶（那个栈叫做图形上下文栈）： void CGContextSaveGState(CGContextRef c)
10)将栈顶的上下文出栈，替换掉当前的上下文： void CGContextRestoreGState(CGContextRef c)
9 、 示例代码
效果截图
自定义UIView代码， 自定义View名称为：Quarz2DView
Quarz2DView.h：
#import <UIKit/UIKit.h> @interface Quarz2DView : UIView @end
Quarz2DView.m文件代码：
1 #import "Quarz2DView.h"
2
3 @interface Quarz2DView()
4
5 @property (nonatomic, retain) UILabel *lblProgress;
6 @property (nonatomic, retain) UISlider *slider; //进度条
7 @property (nonatomic, assign) CGFloat snowHeight; //雪花的高度
8
9 @end
10
11 @implementation Quarz2DView
12
13 - (instancetype)init{
14 if (self = [super init]){
15 UISlider *slider = [[UISlider alloc] init];
16 self.slider = slider;
17 self.slider.frame = CGRectMake(10, 260, 100, 20);
18 [self.slider addTarget:self action:@selector(changeProgress:) forControlEvents:UIControlEventValueChanged];
19 [self addSubview: slider];
20
21 CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
22 link.frameInterval = 10; //默认是1，表示一秒中刷新屏幕60次，60hz; 设为2，则每秒刷新30次
23 [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
24 }
25 NSLog(@"init");
26 return self;
27 }
28
29 /*layoutSubviews在以下情况下会被调用：
30 1、init初始化不会触发layoutSubviews
31 2、addSubview会触发layoutSubviews
32 3、设置view的Frame会触发layoutSubviews，当然前提是frame的值设置前后发生了变化
33 4、滚动一个UIScrollView会触发layoutSubviews
34 5、旋转Screen会触发父UIView上的layoutSubviews事件
35 6、改变一个UIView大小的时候也会触发父UIView上的layoutSubviews事件
36 */
37 - (void)layoutSubviews{
38 //NSLog(@"layoutSubviews...");
39 }
40
41 //利用xlb创建的时候会调用这个方法
42 - (void)awakeFromNib{
43 NSLog(@"利用xlb创建控件");
44 }
45
46 // Only override drawRect: if you perform custom drawing.
47 // An empty implementation adversely affects performance during animation.
48 - (void)drawRect:(CGRect)rect {
49 [self drawOne]; //绘制多根线段
50 [self drawTwo]; //绘制带宽度的线段
51 [self drawThree]; //绘制实体三角形
52 [self drawFour]; //绘制方形、圆形、圆弧形
53 [self drawFive]; //画分布率圆，由几部分扇形组成
54 [self drawSix]; //画进度条
55 [self drawSeven]; //画文字和图片, 椭圆
56 [self drawEight]; //画雪花
57 [self drawNine]; //演示图形上下文栈
58 //[self drawTen]; //演示画图旋转、缩放、偏移
59 }
60
61 //绘制多个线段
62 - (void)drawOne{
63 //1、获得上下文对象
64 CGContextRef ctr = UIGraphicsGetCurrentContext();
65 //2、拼接路径
66 UIBezierPath *path = [UIBezierPath bezierPath];
67 //3、开始画起点
68 [path moveToPoint:CGPointMake(10, 10)];
69 //4、画线段
70 [path addLineToPoint:CGPointMake(80, 40)];
71 [path addLineToPoint:CGPointMake(300, 30)];
72 [path closePath]; //关闭路径，相当于：[path addLineToPoint:CGPointMake(10, 10)];
73 //5、将路径添加到图形上下文中
74 CGContextAddPath(ctr, path.CGPath);
75 //6、将图形上下文渲染到视图上
76 CGContextStrokePath(ctr);
77
78 //绘制线段的三种方式
79 // // //第一种方式
80 // // //1.1、获取图形上下文
81 // // CGContextRef crf = UIGraphicsGetCurrentContext();
82 // // //1.2、画起点和终点
83 // // CGContextMoveToPoint(crf, 0, 0);
84 // // CGContextAddLineToPoint(crf, 100, 100);
85 // // //1.3、渲染
86 // // CGContextStrokePath(crf);
87 //
88 // //第二种方式
89 // //2.1、获取图形上下文
90 // CGContextRef crf2 = UIGraphicsGetCurrentContext();
91 // //2.2、起点和终点
92 // CGMutablePathRef pathRef = CGPathCreateMutable();
93 // CGPathMoveToPoint(pathRef, nil, 0, 0);
94 // CGPathAddLineToPoint(pathRef, nil, 100, 100);
95 // CGContextAddPath(crf2, pathRef);
96 // //2.3、渲染
97 // CGContextStrokePath(crf2);
98 // //2.4、释放
99 // CGPathRelease(pathRef);
100 //
101 // // //第三种方式：使用OC对象，前面两种方式是用C语言函数
102 // // UIBezierPath *bezi = [UIBezierPath bezierPath];
103 // // [bezi moveToPoint:CGPointMake(0, 0)]; //起点
104 // // [bezi addLineToPoint:CGPointMake(100, 100)]; //终点
105 // // [bezi stroke]; //渲染
106 }
107
108 //绘制一根带宽度和颜色的线段
109 - (void)drawTwo{
110 //1、获得上下文对象
111 CGContextRef ctr = UIGraphicsGetCurrentContext();
112 /*enum CGLineCap { //线段帽子，单点
113 kCGLineCapButt,
114 kCGLineCapRound, //圆形
115 kCGLineCapSquare //方形
116 };*/
117 CGContextSetLineCap(ctr, kCGLineCapRound); //设置线段结束点：帽子
118 /*enum CGLineJoin { //线段转折点
119 kCGLineJoinMiter, //斜街，转折点很尖
120 kCGLineJoinRound, //转折圆角
121 kCGLineJoinBevel //转折点线段
122 };*/
123 CGContextSetLineJoin(ctr, kCGLineJoinRound); //设置线段转折点
124 CGContextSetLineWidth(ctr, 5); //设置路径的宽度
125 CGContextSetRGBStrokeColor(ctr, 1.0f, 0.8f, 0.1f, 1); //设置颜色
126 //2、拼接路径
127 UIBezierPath *path = [UIBezierPath bezierPath];
128 //3、开始画起点
129 [path moveToPoint:CGPointMake(10, 50)];
130 //4、画线段
131 [path addLineToPoint:CGPointMake(280, 50)];
132 [path addLineToPoint:CGPointMake(200, 20)];
133 //5、将路径添加到图形上下文中
134 CGContextAddPath(ctr, path.CGPath);
135 //6、将图形上下文渲染到视图上
136 CGContextStrokePath(ctr);
137 }
138
139 //绘制一个实体三角形
140 - (void)drawThree{
141 //1、图形上下文
142 CGContextRef ctr = UIGraphicsGetCurrentContext();
143 [[UIColor purpleColor] setFill]; //设置实体颜色
144 [[UIColor redColor] setStroke]; //设置边框颜色
145 CGContextSetLineWidth(ctr, 6); //设置边框宽度
146
147 //2、拼接路径对象
148 UIBezierPath *path = [UIBezierPath bezierPath];
149 //3、绘制路径
150 [path moveToPoint:CGPointMake(10, 60)];
151 [path addLineToPoint:CGPointMake(280, 60)];
152 [path addLineToPoint:CGPointMake(160, 110)];
153 [path closePath];
154 //4、把路径添加到上下文对象中
155 CGContextAddPath(ctr, path.CGPath);
156
157 //5、将图形上下文渲染到视图上
158 // CGContextFillPath(ctr); //既填充又描边，不能用这个
159 CGContextDrawPath(ctr, kCGPathEOFillStroke);
160 /*
161 enum CGPathDrawingMode {
162 kCGPathFill, //非零绕数规则
163 kCGPathEOFill, //奇偶规则
164 kCGPathStroke, //描边
165 kCGPathFillStroke,//填充又描边
166 kCGPathEOFillStroke //填充描边
167 };*/
168 }
169
170 //绘制正方形、圆形、圆角方形
171 - (void)drawFour{
172 CGContextRef ctr = UIGraphicsGetCurrentContext();
173 CGContextSetLineWidth(ctr, 1);
174 [[UIColor greenColor] set];
175
176 //方形 左上角(10, 90) ,宽高都是60
177 UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 90, 60, 60)];
178 CGContextAddPath(ctr, path.CGPath);
179
180 //圆形，左上角(10, 90) 圆心(40, 120) 半径30 cornerRadius < 30则是圆角方形，>=30 则是圆形
181 UIBezierPath *path2 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 90, 60, 60) cornerRadius:30];
182 CGContextAddPath(ctr, path2.CGPath);
183 //圆角方形
184 UIBezierPath *path3 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 100, 40, 40) cornerRadius:10];
185 CGContextAddPath(ctr, path3.CGPath);
186 //圆角矩形
187 UIBezierPath *path4 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(30, 105, 20, 30) cornerRadius:10];
188 CGContextAddPath(ctr, path4.CGPath);
189 //设置某一个角圆形
190 UIBezierPath *path5 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(230, 90, 60, 60) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(20, 20)];
191 CGContextAddPath(ctr, path5.CGPath);
192 /*typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
193 UIRectCornerTopLeft = 1 << 0, //顶部左边
194 UIRectCornerTopRight = 1 << 1,//顶部右边圆角，其他直角
195 UIRectCornerBottomLeft = 1 << 2,//地步左边圆角
196 UIRectCornerBottomRight = 1 << 3,//底部右边圆角
197 UIRectCornerAllCorners = ~0UL //圆形
198 };*/
199
200 //画圆弧 clockwise: 顺时针还是逆时针
201 UIBezierPath *path6 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(160, 120) radius:40 startAngle:0 endAngle:M_PI clockwise:YES];//顺时针从2π到π，圆心(160,100)
202 CGContextAddPath(ctr, path6.CGPath);
203
204 CGContextStrokePath(ctr);
205
206 //画一段圆弧实体
207 UIBezierPath *path7 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(160, 120) radius:30 startAngle:2.8f endAngle:0 clockwise:NO]; //逆时针从0到2.8，圆心(160,100)
208 CGContextAddPath(ctr, path7.CGPath);
209 CGContextFillPath(ctr);
210 }
211
212 //y:150 画一个圆，有几个扇形组成，比如由四个百分比组成：55 + 30 + 12 + 3
213 - (void)drawFive{
214 CGContextRef ctr = UIGraphicsGetCurrentContext();
215 //半径50， 圆心(240, 210), 左上角(190, 160), 右上角(290, 210), 左下角(190, 260), 右下角(290, 260)
216
217 CGPoint center = CGPointMake(240, 210); //圆心
218 CGFloat radius = 50;
219
220 //1、先画55%扇形
221 [[UIColor purpleColor] setFill];
222 CGFloat endAngle = M_PI * 2 * 55 / 100;
223 UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:endAngle clockwise:YES];
224 [path1 addLineToPoint:center]; //原来扇形是这样画的
225 CGContextAddPath(ctr, path1.CGPath);
226 //渲染
227 CGContextFillPath(ctr);
228 //加个文字说明
229 UILabel *lbl1 = [[UILabel alloc] initWithFrame:CGRectMake(220, 225, 40, 20)];
230 lbl1.textAlignment = NSTextAlignmentCenter;
231 lbl1.font = [UIFont systemFontOfSize:10];
232 lbl1.text = @"55.00%";
233 [self addSubview:lbl1];
234
235 //2、再画第二个扇形：30%
236 [[UIColor greenColor] setFill];
237 CGFloat endAngle2 = M_PI * 2 * 30 / 100 + endAngle;
238 UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:endAngle endAngle:endAngle2 clockwise:YES];
239 [path2 addLineToPoint:center]; //原来扇形是这样画的
240 CGContextAddPath(ctr, path2.CGPath);
241 //渲染
242 CGContextFillPath(ctr);
243 //加个文字说明
244 UILabel *lbl2 = [[UILabel alloc] initWithFrame:CGRectMake(210, 170, 40, 20)];
245 lbl2.textAlignment = NSTextAlignmentCenter;
246 lbl2.font = [UIFont systemFontOfSize:10];
247 lbl2.text = @"30.00%";
248 [self addSubview:lbl2];
249
250 //3、再画第三个扇形：12%
251 [[UIColor yellowColor] setFill];
252 CGFloat endAngle3 = M_PI * 2 * 12 / 100 + endAngle2;
253 UIBezierPath *path3 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:endAngle2 endAngle:endAngle3 clockwise:YES];
254 [path3 addLineToPoint:center];
255 CGContextAddPath(ctr, path3.CGPath);
256 //渲染
257 CGContextFillPath(ctr);
258 //加个文字说明
259 UILabel *lbl3 = [[UILabel alloc] initWithFrame:CGRectMake(251, 186, 40, 20)];
260 lbl3.textAlignment = NSTextAlignmentCenter;
261 lbl3.font = [UIFont systemFontOfSize:10];
262 lbl3.text = @"12.00%";
263 [self addSubview:lbl3];
264
265 //4、再画第四个扇形：3%
266 [[UIColor blueColor] setFill];
267 UIBezierPath *path4 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:endAngle3 endAngle:0 clockwise:YES];
268 [path4 addLineToPoint:center];
269 CGContextAddPath(ctr, path4.CGPath);
270 //渲染
271 CGContextFillPath(ctr);
272
273 //第二种方式画一个扇形组合圆
274 NSArray *arr = @[@25, @42, @10, @18, @5];
275 CGFloat startA =0, endA = 0;
276 center = CGPointMake(150, 210);
277 radius = 35;
278
279 for (int i = 0; i < arr.count; i++) {
280 startA = endA;
281 endA = startA + M_PI * 2 * [[arr objectAtIndex:i] floatValue] / 100;
282 [[self randomColor] setFill];
283 UIBezierPath *p = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
284 [p addLineToPoint:center];
285 CGContextAddPath(ctr, p.CGPath);
286 CGContextFillPath(ctr); //渲染
287 }
288 }
289
290 //进度条演示
291 - (UILabel *)lblProgress{
292 if (_lblProgress == nil){
293 _lblProgress = [[UILabel alloc] init];
294 _lblProgress.frame = CGRectMake(20, 200, 80, 20);
295 _lblProgress.textAlignment = NSTextAlignmentCenter;
296 _lblProgress.font = [UIFont systemFontOfSize:12];
297 _lblProgress.text = @"00.00%";
298 [self addSubview:_lblProgress];
299 }
300 return _lblProgress;
301 }
302 //可拖拽进度条
303 - (void)drawSix{
304 CGContextRef ctr = UIGraphicsGetCurrentContext();
305 [self lblProgress];
306
307 //3π/2顺时针走 2π走一个圈360度 2π : 100进度
308 CGFloat startAngle = M_PI * 1.5; //开始角度
309 CGFloat endAngle = M_PI * 1.5 + M_PI * 2 * self.slider.value;
310 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(60, 210) radius:50 startAngle:startAngle endAngle:endAngle clockwise:YES];
311 CGContextAddPath(ctr, path.CGPath);
312 CGContextStrokePath(ctr);
313 }
314
315 //进度条事件
316 - (void)changeProgress:(UISlider *)sender{
317 self.lblProgress.text = [NSString stringWithFormat:@"%.2f%%", sender.value * 100];
318 //调用方法重绘
319 [self setNeedsDisplay];
320 }
321
322 //生成一个随机颜色
323 - (UIColor *)randomColor{
324 /*
325 颜色有两种表示方法：RGB RGBA
326 RGB 24
327 R、G、B每个颜色通道8位
328 8的二进制255
329 R、G、B每个颜色的取值范围0-255
330 120/255.0
331 */
332 CGFloat r = arc4random_uniform(256) / 255.0;
333 CGFloat g = arc4random_uniform(256) / 255.0;
334 CGFloat b = arc4random_uniform(256) / 255.0;
335 return [UIColor colorWithRed:r green:g blue:b alpha:1];
336 }
337
338 //画文字和图片Y: 280 画一个椭圆
339 - (void)drawSeven{
340 CGContextRef ctr = UIGraphicsGetCurrentContext();
341 [[UIColor greenColor] set];
342 //先画一根分割线
343 UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 290, 300, 2)];
344 CGContextAddPath(ctr, path.CGPath);
345 CGContextFillPath(ctr);
346
347 //画文字
348 NSString *str = @"君不见黄河之水天上来, 奔流到海不复回；君不见高堂明镜悲白发，朝如青丝暮成雪";
349 NSDictionary *dicts = @{UITextAttributeFont: [UIFont systemFontOfSize:10],
350 UITextAttributeTextColor: [UIColor purpleColor]};
351 [str drawInRect:CGRectMake(0, 300, 200, 40) withAttributes:dicts];
352
353 //画图片 : 可以想象UIImageView是如何展示图片的
354 UIImage *img = [UIImage imageNamed:@"paddle"];
355 [img drawAtPoint:CGPointMake(220, 300)];
356
357 //画椭圆
358 UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 330, 280, 30)];
359 CGContextAddPath(ctr, path2.CGPath);
360 UIBezierPath *path3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(80, 333, 10, 25)];
361 CGContextAddPath(ctr, path3.CGPath);
362 UIBezierPath *path4 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(140, 330, 10, 30)];
363 CGContextAddPath(ctr, path4.CGPath);
364 UIBezierPath *path5 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(200, 333, 10, 25)];
365 CGContextAddPath(ctr, path5.CGPath);
366 CGContextStrokePath(ctr);
367 }
368
369 //画一个雪花飘落
370 - (void)drawEight{
371 self.snowHeight += 5;
372 UIImage *img = [UIImage imageNamed:@"雪花"];
373 [img drawAtPoint:CGPointMake(30, self.snowHeight)];
374
375 UIImage *img2 = [UIImage imageNamed:@"雪花"];
376 [img2 drawAtPoint:CGPointMake(120, self.snowHeight + 90)];
377
378 UIImage *img3 = [UIImage imageNamed:@"雪花"];
379 [img3 drawAtPoint:CGPointMake(240, self.snowHeight + 150)];
380
381 if (self.snowHeight > 420){
382 self.snowHeight = 0;
383 }
384 }
385
386 //图形上下文栈：可以把图形上下文保存到栈里，到了需要的时候再取出来
387 - (void)drawNine{
388 CGContextRef ctr = UIGraphicsGetCurrentContext();
389 CGContextSaveGState(ctr); //将此时的图形上下文存入栈里
390
391 //原图形上下文画图是这样的
392 UIBezierPath *oldPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(5, 370, 90, 20)];
393 CGContextAddPath(ctr, oldPath.CGPath);
394 CGContextStrokePath(ctr); //渲染
395
396 //变化图形上下文
397 CGContextSetLineWidth(ctr, 5);
398 [[UIColor redColor] set];
399 UIBezierPath *newPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(105, 370, 90, 20)];
400 CGContextAddPath(ctr, newPath.CGPath);
401 CGContextStrokePath(ctr); //渲染
402
403 //取出原图形上下文覆盖当前图形上下文
404 CGContextRestoreGState(ctr);
405
406 //原图形上下文画图
407 UIBezierPath *oldPath2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(205, 370, 90, 20)];
408 CGContextAddPath(ctr, oldPath2.CGPath);
409 CGContextStrokePath(ctr); //渲染
410 }
411
412 //画图形偏移、放大、旋转
413 - (void)drawTen{
414 // 1.获取上下文
415 CGContextRef ctx = UIGraphicsGetCurrentContext();
416
417 // 注意：你的路径一定放在上下文矩阵操作之后
418 // 平移上下文
419 CGContextTranslateCTM(ctx, 50, 100);
420
421 // 旋转上下文
422 CGContextRotateCTM(ctx, M_PI_4);
423
424 // 缩放上下文
425 CGContextScaleCTM(ctx, 0.5, 1.2);
426
427 // 2.拼接路径
428 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-50, -100, 150, 200)];
429
430 // 3.把路径添加到上下文
431 CGContextAddPath(ctx, path.CGPath);
432
433 [[UIColor yellowColor] set];
434
435 // 4.渲染
436 CGContextFillPath(ctx);
437 }
438
439 /*
440 字符属性
441
442 字符属性可以应用于 attributed string 的文本中。
443
444 NSString *const NSFontAttributeName;(字体)
445
446 NSString *const NSParagraphStyleAttributeName;(段落)
447
448 NSString *const NSForegroundColorAttributeName;(字体颜色)
449
450 NSString *const NSBackgroundColorAttributeName;(字体背景色)
451
452 NSString *const NSLigatureAttributeName;(连字符)
453
454 NSString *const NSKernAttributeName;(字间距)
455
456 NSString *const NSStrikethroughStyleAttributeName;(删除线)
457
458 NSString *const NSUnderlineStyleAttributeName;(下划线)
459
460 NSString *const NSStrokeColorAttributeName;(边线颜色)
461
462 NSString *const NSStrokeWidthAttributeName;(边线宽度)
463
464 NSString *const NSShadowAttributeName;(阴影)(横竖排版)
465
466 NSString *const NSVerticalGlyphFormAttributeName;
467
468 常量
469
470 1> NSFontAttributeName(字体)
471
472 该属性所对应的值是一个 UIFont 对象。该属性用于改变一段文本的字体。如果不指定该属性，则默认为12-point Helvetica(Neue)。
473
474 2> NSParagraphStyleAttributeName(段落)
475
476 该属性所对应的值是一个 NSParagraphStyle 对象。该属性在一段文本上应用多个属性。如果不指定该属性，则默认为 NSParagraphStyle 的defaultParagraphStyle 方法返回的默认段落属性。
477
478 3> NSForegroundColorAttributeName(字体颜色)
479
480 该属性所对应的值是一个 UIColor 对象。该属性用于指定一段文本的字体颜色。如果不指定该属性，则默认为黑色。
481
482 4> NSBackgroundColorAttributeName(字体背景色)
483
484 该属性所对应的值是一个 UIColor 对象。该属性用于指定一段文本的背景颜色。如果不指定该属性，则默认无背景色。
485
486 5> NSLigatureAttributeName(连字符)
487
488 该属性所对应的值是一个 NSNumber 对象(整数)。连体字符是指某些连在一起的字符，它们采用单个的图元符号。0 表示没有连体字符。1 表示使用默认的连体字符。2表示使用所有连体符号。默认值为 1（注意，iOS 不支持值为 2）。
489
490 6> NSKernAttributeName(字间距)
491
492 该属性所对应的值是一个 NSNumber 对象(整数)。字母紧排指定了用于调整字距的像素点数。字母紧排的效果依赖于字体。值为 0 表示不使用字母紧排。默认值为0。
493
494 7> NSStrikethroughStyleAttributeName(删除线)
495
496 该属性所对应的值是一个 NSNumber 对象(整数)。该值指定是否在文字上加上删除线，该值参考“Underline Style Attributes”。默认值是NSUnderlineStyleNone。
497
498 8> NSUnderlineStyleAttributeName(下划线)
499
500 该属性所对应的值是一个 NSNumber 对象(整数)。该值指定是否在文字上加上下划线，该值参考“Underline Style Attributes”。默认值是NSUnderlineStyleNone。
501
502 9> NSStrokeColorAttributeName(边线颜色)
503
504 该属性所对应的值是一个 UIColor 对象。如果该属性不指定（默认），则等同于 NSForegroundColorAttributeName。否则，指定为删除线或下划线颜色。更多细节见“Drawing attributedstrings that are both filled and stroked”。
505
506 10> NSStrokeWidthAttributeName(边线宽度)
507
508 该属性所对应的值是一个 NSNumber 对象(小数)。该值改变描边宽度（相对于字体size 的百分比）。默认为 0，即不改变。正数只改变描边宽度。负数同时改变文字的描边和填充宽度。例如，对于常见的空心字，这个值通常为3.0。
509
510 11> NSShadowAttributeName(阴影)
511
512 该属性所对应的值是一个 NSShadow 对象。默认为 nil。
513
514 12> NSVerticalGlyphFormAttributeName(横竖排版)
515
516 该属性所对应的值是一个 NSNumber 对象(整数)。0 表示横排文本。1 表示竖排文本。在 iOS 中，总是使用横排文本，0 以外的值都未定义。
517
518 */
519
520 @end
自定义控制器展示自定义Quarz2DView
Quartz2DViewController.h 文件:
#import <UIKit/UIKit.h> @interface Quartz2DViewController : UIViewController @end
Quartz2DViewController.m文件代码：
1 #import "Quartz2DViewController.h"
2 #import "Quarz2DView.h"
3 #import "Quartz2DControllerTwo.h"
4
5 @interface Quartz2DViewController ()
6
7 @end
8
9 @implementation Quartz2DViewController
10
11 - (void)viewDidLoad {
12 [super viewDidLoad];
13 // Do any additional setup after loading the view.
14 [self.view setBackgroundColor:[UIColor whiteColor]]; //设置白色背景
15
16 Quarz2DView *view = [Quarz2DView new];
17 view.frame = CGRectMake(10, 10, 300, 420);
18 [view setBackgroundColor:[UIColor grayColor]];
19 view.alpha = 0.9; //默认时1，不透明
20 [self.view addSubview:view];
21
22 //增加两个按钮： 上一页按钮
23 UIButton *returnBtn = [UIButton buttonWithType:UIButtonTypeCustom];
24 [returnBtn setTitle:@"上一页" forState:UIControlStateNormal];
25 returnBtn.frame = CGRectMake(40, 440, 80, 30);
26 [returnBtn addTarget:self action:@selector(returnLastPage) forControlEvents:UIControlEventTouchUpInside];
27 [returnBtn setBackgroundColor:[UIColor purpleColor]];
28 [self.view addSubview:returnBtn];
29
30 //下一页按钮
31 UIButton *nextBtn = [UIButton buttonWithType:UIButtonTypeCustom];
32 [nextBtn setTitle:@"下一页" forState:UIControlStateNormal];
33 nextBtn.frame = CGRectMake(200, 440, 80, 30);
34 [nextBtn addTarget:self action:@selector(nextController) forControlEvents:UIControlEventTouchUpInside];
35 [nextBtn setBackgroundColor:[UIColor purpleColor]];
36 [self.view addSubview:nextBtn];
37 }
38
39 //返回上一页
40 - (void)returnLastPage{
41 [self dismissViewControllerAnimated:YES completion:nil];
42 }
43
44 //进入下一个控制器
45 - (void)nextController{
46 Quartz2DControllerTwo *control = [[Quartz2DControllerTwo alloc] init];
47 [self presentViewController:control animated:YES completion:nil];
48 }
49
50 - (void)didReceiveMemoryWarning {
51 [super didReceiveMemoryWarning];
52 // Dispose of any resources that can be recreated.
53 }
54
55 /*
56 #pragma mark - Navigation
57
58 // In a storyboard-based application, you will often want to do a little preparation before navigation
59 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
60 // Get the new view controller using [segue destinationViewController].
61 // Pass the selected object to the new view controller.
62 }
63 */
64
65 @end
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
给图片添加水印，裁剪图片，效果截图：
自定义控制器Quartz2DControllerTwo.h 文件：
#import <UIKit/UIKit.h> @interface Quartz2DControllerTwo : UIViewController @end
Quartz2DControllerTwo.m文件代码：
1 #import "Quartz2DControllerTwo.h"
2 #import "Quartz2DControllerThree.h"
3
4 @interface Quartz2DControllerTwo ()
5
6 @end
7
8 @implementation Quartz2DControllerTwo
9
10 - (void)viewDidLoad {
11 [super viewDidLoad];
12 // Do any additional setup after loading the view.
13 [self.view setBackgroundColor:[UIColor whiteColor]];
14
15 [self testImageContext]; //测试图形上下文的用法
16 [self clipImage]; //裁剪图片
17
18 //添加上一页和下一页按钮
19 UIButton *preBtn = [UIButton buttonWithType:UIButtonTypeCustom];
20 [preBtn setTitle:@"上一页" forState:UIControlStateNormal];
21 preBtn.frame = CGRectMake(10, 430, 80, 30);
22 [preBtn setBackgroundColor:[UIColor purpleColor]];
23 [preBtn addTarget:self action:@selector(prePage) forControlEvents:UIControlEventTouchUpInside];
24 [self.view addSubview:preBtn];
25
26 UIButton *nextBtn = [UIButton buttonWithType:UIButtonTypeCustom];
27 [nextBtn setTitle:@"下一页" forState:UIControlStateNormal];
28 nextBtn.frame = CGRectMake(200, 430, 80, 30);
29 [nextBtn setBackgroundColor:[UIColor purpleColor]];
30 [nextBtn addTarget:self action:@selector(nextPage) forControlEvents:UIControlEventTouchUpInside];
31 [self.view addSubview:nextBtn];
32 }
33
34 //图片上下文应用：将图片缓存到图片上下文，然后合成新的图片，并保存下来，关闭图片上下文，也可以把图片保存在本地
35 - (void)testImageContext{
36 //1、创建图片
37 UIImage *img = [UIImage imageNamed:@"first"];
38 //2、打开图片上下文 opaque:YES表示透明， NO表示不透明 设置图形上下文的尺寸
39 UIGraphicsBeginImageContextWithOptions(img.size, NO, 0.0);
40 //3、将图片写入到图片上下文中
41 [img drawAtPoint:CGPointZero];
42 //4、将文字写入到图片上下文中
43 NSString *str = @"给图片加水印";
44 NSDictionary *dicts = @{NSFontAttributeName: [UIFont systemFontOfSize:18],
45 NSForegroundColorAttributeName: [UIColor purpleColor]}; //设置字体属性
46 [str drawAtPoint:CGPointMake(img.size.width - 120, img.size.height - 30) withAttributes:dicts];
47 //5、从图形上下文中获取新的图片
48 UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
49 //6、关闭图形上下文
50 UIGraphicsEndImageContext();
51
52 //将新图片显示出来
53 UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, img.size.width, img.size.height)];
54 imgView.image = newImg;
55 [self.view addSubview:imgView];
56 //将新图片保存到指定路径
57 // NSData *data = UIImagePNGRepresentation(newImg);
58 // [data writeToFile:@"/Users/tanxiaoming/Desktop/tan.png" atomically:YES];
59 }
60
61 //裁剪图片
62 - (void)clipImage{
63 UIImage *img = [UIImage imageNamed:@"first"];
64 UIGraphicsBeginImageContextWithOptions(img.size, YES, 0.0);
65
66 //画圆弧
67 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, img.size.width, img.size.height)];
68 [path addClip]; //裁剪
69 //将图片画在上下文中
70 [img drawAtPoint:CGPointZero];
71
72 //从当前图片上下文中获取新图片
73 UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
74 //关闭图形上下文
75 UIGraphicsEndImageContext();
76
77 //现实图片
78 UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 20 + img.size.height, newImg.size.width, newImg.size.height)];
79 imgView.image = newImg;
80 [self.view addSubview:imgView];
81 }
82
83 //返回上一页
84 - (void)prePage{
85 [self dismissViewControllerAnimated:YES completion:nil];
86 }
87
88 //下一页
89 - (void)nextPage{
90 Quartz2DControllerThree *controller = [[Quartz2DControllerThree alloc] init];
91 [self presentViewController:controller animated:YES completion:nil];
92 }
93
94 - (void)didReceiveMemoryWarning {
95 [super didReceiveMemoryWarning];
96 // Dispose of any resources that can be recreated.
97 }
98
99 /*
100 #pragma mark - Navigation
101
102 // In a storyboard-based application, you will often want to do a little preparation before navigation
103 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
104 // Get the new view controller using [segue destinationViewController].
105 // Pass the selected object to the new view controller.
106 }
107 */
108
109 @end
---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
屏幕截图，效果截图：
Quartz2DControllerThree.h文件：
#import <UIKit/UIKit.h> @interface Quartz2DControllerThree : UIViewController @end
Quartz2DControllerThree.m文件代码：
1 #import "Quartz2DControllerThree.h"
2
3 @interface Quartz2DControllerThree ()
4
5 @property (nonatomic, retain) UIImageView *imgView;
6
7 @end
8
9 @implementation Quartz2DControllerThree
10
11 - (void)viewDidLoad {
12 [super viewDidLoad];
13 // Do any additional setup after loading the view.
14 [self.view setBackgroundColor:[UIColor whiteColor]]; //设置背景颜色
15
16 [self clipImage]; //裁剪图片
17
18 UIButton *preBtn = [UIButton buttonWithType:UIButtonTypeCustom];
19 [preBtn setTitle:@"上一页" forState:UIControlStateNormal];
20 [preBtn setBackgroundColor:[UIColor purpleColor]];
21 [preBtn setFrame:CGRectMake(10, 420, 80, 30)];
22 [preBtn addTarget:self action:@selector(prePage) forControlEvents:UIControlEventTouchUpInside];
23 [self.view addSubview:preBtn];
24
25 //屏幕截图按钮
26 UIButton *screenBtn = [UIButton buttonWithType:UIButtonTypeCustom];
27 [screenBtn setFrame:CGRectMake(240, 100, 80, 30)];
28 [screenBtn setTitle:@"屏幕截图" forState:UIControlStateNormal];
29 [screenBtn setBackgroundColor:[UIColor grayColor]];
30 [screenBtn addTarget:self action:@selector(screenImg) forControlEvents:UIControlEventTouchUpInside];
31 [self.view addSubview:screenBtn];
32
33 }
34
35 - (UIImageView *)imgView{
36 if (_imgView == nil){
37 _imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 250, 300, 300)];
38 _imgView.contentMode = UIViewContentModeScaleAspectFit; //自适应图片大小
39 [self.view addSubview:_imgView];
40 }
41 return _imgView;
42 }
43
44 //裁剪图片
45 - (void)clipImage{
46 UIImage *img = [UIImage imageNamed:@"first"];
47 CGFloat border = 10;
48 CGFloat radius = 2 * border + (img.size.width > img.size.height ? img.size.height : img.size.width);
49
50 //先画大圆
51 //开启图形上下文
52 UIGraphicsBeginImageContextWithOptions(CGSizeMake(radius, radius), NO, 0.0);
53 CGContextRef ctr = UIGraphicsGetCurrentContext();//获取上下文
54 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, radius, radius)];
55 CGContextAddPath(ctr, path.CGPath); //添加到上下文
56 [[UIColor purpleColor] set]; //设置颜色
57 CGContextFillPath(ctr); //渲染
58
59 //设置小圆
60 UIBezierPath *smallPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(border, border, radius - 2 * border, radius - 2 * border)];
61
62 [smallPath addClip]; //裁剪
63
64 [img drawAtPoint:CGPointMake(border, border)]; //把图画到图形上下文中
65 UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext(); //获取新图片
66
67
68 UIGraphicsEndImageContext(); //关闭图形上下文
69
70 UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, radius, radius)];
71 imgView.image = newImg;
72 [self.view addSubview:imgView];
73 }
74
75 //屏幕截图
76 - (void)screenImg{
77 //1、开启图形上下文
78 UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0.0);
79 //2、获取上下文
80 CGContextRef ctr = UIGraphicsGetCurrentContext();
81 //3、将self.view的图层渲染到上下文，图层只能渲染不能draw
82 [self.view.layer renderInContext:ctr];
83 //4、从图形上下文获取新图片
84 UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
85 //5、关闭图形上下文
86 UIGraphicsEndImageContext();
87 //6、显示或保存
88
89 // NSData *data = UIImagePNGRepresentation(img);
90 // [data writeToFile:@"/Users/tanxiaoming/Desktop/xiao.png" atomically:YES];
91
92 self.imgView.image = img;
93 }
94
95 - (void)prePage{
96 [self dismissViewControllerAnimated:YES completion:nil];
97 }
98
99 - (void)didReceiveMemoryWarning {
100 [super didReceiveMemoryWarning];
101 // Dispose of any resources that can be recreated.
102 }
103
104 /*
105 #pragma mark - Navigation
106
107 // In a storyboard-based application, you will often want to do a little preparation before navigation
108 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
109 // Get the new view controller using [segue destinationViewController].
110 // Pass the selected object to the new view controller.
111 }
112 */
113
114 @end
时间： 2024-10-13 11:12:12