一、Quartz2D概述
Quartz2D是一个二维绘图引擎,同时支持Mac和iOS系统
Quartz2D能绘制图形、绘制文字、绘制图片、生成PDF、裁剪图片等,还可以用来自定义UI控件。
例如画板应用、手势解锁功能、图形报表等都是用Quartz2D实现的。
1. 图形上下文(Graphics Context)
图形上下文(Graphics Context)是一个CGContextRef类型的数据,它用来保存绘图信息、绘图状态和决定绘制的输出目标(输出目标可以是PDF文件、Bitmap或者显示器的窗口上)。
相同的一套绘图序列,指定不同的图形上下文可将相同的图像绘制到不同的目标上。
Quartz2D提供了一下几种类型的Graphics Context:
- Bitmap Graphics Context
- PDF Graphics Context
- Window Graphics Context
- Layer Graphics Context
- Printer Graphics Context
2. drawRect:方法
当view第一次显示到屏幕上时(被加到UIWindow上显示出来)就会调用drawRect:,调用view的setNeedDisplay或者setNeedDisplayInRect:时也会调用drawRect:
3. drawRect:中取得上下文
在drawRect:方法中取得上下文后,就可以绘制图形到view上面了。view内部有个layer属性,drawRect:方法中取得的是一个Layer Graphics Context,因此绘制的图形其实是绘制到view的layer上去了。
view之所以能显示东西,是因为它内部有layer。
4. Quartz2D的内存管理
使用含有“Create”或“Copy”的函数创建的对象,使用完后必须释放,否则将导致内存泄露,使用不含“Create”或“Copy”的函数获取的对象,则不需要释放。
如果retain了一个对象,不再使用时也需要将其release掉。
可以使用Quartz2D的函数来指定retain和release一个对象,例如,如果创建了一个CGColorSpace对象,则使用函数CGColorSpaceRetain和CGColorSpaceRelease来retain和release对象。
也可以使用Core Foundation的CFRetain和CFRelease。注意不能传递NULL值给这些函数。
二、代码
1. 画三角形
1 /** 2 * 画三角形 3 */ 4 void drawTriangle() 5 { 6 // 1.获得图形上下文 7 CGContextRef contextRef = UIGraphicsGetCurrentContext(); 8 9 // 2.拼接图形路径10 // 设置一个起点11 CGContextMoveToPoint(contextRef, 100, 100);12 // 添加一条线段到(100,100)13 CGContextAddLineToPoint(contextRef, 200, 200);14 // 添加一条线段到(150,40)15 CGContextAddLineToPoint(contextRef, 150, 40);16 // 关闭路径(连接起点和终点)17 CGContextClosePath(contextRef);18 19 // 3.渲染显示到View上面20 CGContextStrokePath(contextRef);21 }
2. 画矩形
1 /** 2 * 画四边形 3 */ 4 void drawQuadrilateral() 5 { 6 // 1.获得图形上下文 7 CGContextRef contextRef = UIGraphicsGetCurrentContext(); 8 // 2.画矩形 9 CGContextAddRect(contextRef, CGRectMake(100, 100, 150, 100));10 // 3.绘制图形11 CGContextStrokePath(contextRef);12 }
3. 画圆
1 /** 2 * 画圆 3 */ 4 void drawCircle() 5 { 6 // 1.获得图形上下文 7 CGContextRef contextRef = UIGraphicsGetCurrentContext(); 8 // 2.画圆 9 CGContextAddEllipseInRect(contextRef, CGRectMake(100, 100, 100, 100));10 // 3.绘制图形11 CGContextFillPath(contextRef);12 }
4. 画圆弧
1 /** 2 * 画圆弧 3 */ 4 void drawArc() 5 { 6 // 1.获得图形上下文 7 CGContextRef contextRef = UIGraphicsGetCurrentContext(); 8 9 // 2.画圆弧10 // x\y : 圆心坐标11 // radius : 半径12 // startAngle : 开始角度13 // endAngle : 结束角度14 // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)15 CGContextAddArc(contextRef, 100, 100, 50, 0, M_PI, 1);16 17 // 3.绘制图形18 CGContextStrokePath(contextRef);19 }
5. 画文字
1 /** 2 * 画文字 3 */ 4 void drawText() 5 { 6 NSString *str = @"画文字"; 7 // 设置文字属性 8 NSMutableDictionary *attrs = [NSMutableDictionary dictionary]; 9 attrs[NSForegroundColorAttributeName] = [UIColor redColor];10 attrs[NSFontAttributeName] = [UIFont systemFontOfSize:20];11 12 // 将文字画在某个位置13 [str drawAtPoint:CGPointMake(100, 100) withAttributes:attrs];14 15 // 将文字画在矩形框内16 // [str drawInRect:CGRectMake(100, 100, 100, 100) withAttributes:attrs];17 }
6. 画图片
1 /**2 * 画图片3 */4 void drawImage()5 {6 UIImage *image = [UIImage imageNamed:@"1.jpg"];7 [image drawAsPatternInRect:CGRectMake(100, 100, 100, 100)];8 }
7. 图形上下文栈
1 /** 2 * 图形上下文栈 3 */ 4 void ContextSaveGState() 5 { 6 // 获得图形上下文 7 CGContextRef contextRef = UIGraphicsGetCurrentContext(); 8 9 // 将contextRef拷贝一份放到栈中10 CGContextSaveGState(contextRef);11 12 // 设置绘图状态13 CGContextSetLineWidth(contextRef, 10);14 [[UIColor redColor] set];15 CGContextSetLineCap(contextRef, kCGLineCapRound);16 17 // 第一根线18 CGContextMoveToPoint(contextRef, 50, 50);19 CGContextAddLineToPoint(contextRef, 120, 190);20 21 // 画线22 CGContextStrokePath(contextRef);23 24 // 将栈顶的上下文出栈,替换当前的上下文25 CGContextRestoreGState(contextRef);26 27 // 第二根线28 CGContextMoveToPoint(contextRef, 10, 70);29 CGContextAddLineToPoint(contextRef, 220, 290);30 31 // 画线32 CGContextStrokePath(contextRef);33 }
8. 矩阵操作(图形整体缩放、移动、旋转等等)
1 /** 2 * 矩阵操作 3 */ 4 void contextMatrix() 5 { 6 // 获得图形上下文 7 CGContextRef contextRef = UIGraphicsGetCurrentContext(); 8 9 // 缩小0.5倍(在画线条之前设置)10 CGContextScaleCTM(contextRef, 0.5, 0.5);11 // 旋转12 CGContextRotateCTM(contextRef, M_PI_4);13 // 移动14 CGContextTranslateCTM(contextRef, 0, 150);15 16 // 画矩形17 CGContextAddRect(contextRef, CGRectMake(100, 100, 100, 100));18 CGContextStrokePath(contextRef);19 }
9. 图片裁剪
1 /** 2 * 图片裁剪 3 */ 4 - (void)imageClip 5 { 6 // 1.加载原图 7 UIImage *oldImage = [UIImage imageNamed:@"1.jpg"]; 8 // 2.开启上下文 9 UIGraphicsBeginImageContextWithOptions(oldImage.size, NO, 0.0);10 // 3.取得当前的上下文11 CGContextRef contextRef = UIGraphicsGetCurrentContext();12 // 4.画圆13 CGRect circleRect = CGRectMake(0, 0, oldImage.size.width, oldImage.size.height);14 CGContextAddEllipseInRect(contextRef, circleRect);15 // 5.按照当前的路径形状(圆形)裁剪,超出这个形状以外的内容都不显示16 CGContextClip(contextRef);17 // 6.画图18 [oldImage drawInRect:circleRect];19 // 7.取图20 UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();21 // 8.结束22 UIGraphicsEndImageContext();23 }
10. 截屏
1 /** 2 * 截屏 3 */ 4 - (void)screenCut 5 { 6 // 1.开启上下文 7 UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0.0); 8 // 2.将控制器view的layer渲染到上下文 9 [self.layer renderInContext:UIGraphicsGetCurrentContext()];10 // 3.取出图片11 UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();12 // 4.结束上下文13 UIGraphicsEndImageContext();14 }
11. 重绘
1 /**2 * 重绘3 */4 - (void)reDraw5 {6 // 重绘(这个方法内部会重新调用drawRect:方法进行绘制)7 [self setNeedsDisplay];8 }
12. 常用属性
1 /** 2 * 常用属性 3 */ 4 void ContextProperty() 5 { 6 // 获得图形上下文 7 CGContextRef contextRef = UIGraphicsGetCurrentContext(); 8 9 // 设置线段宽度10 CGContextSetLineWidth(contextRef, 10);11 // 设置颜色12 CGContextSetRGBStrokeColor(contextRef, 1, 0, 0, 1);13 // 设置线段头尾部样式14 CGContextSetLineCap(contextRef, kCGLineCapRound);15 // 设置线段转折点的样式16 CGContextSetLineJoin(contextRef, kCGLineJoinRound);17 // set : 同时设置为实心和空心颜色18 // setStroke : 设置空心颜色19 // setFill : 设置实心颜色20 [[UIColor whiteColor] set];21 22 // 裁剪,裁剪后所画内容只能在裁剪的范围内显示23 CGContextClip(contextRef);24 }
原标题:Quartz2D
关键词: