Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图
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