一、Quartz2D概述Quartz2D是一个二维绘图引擎,同时支持Mac和iOS系统
Quartz2D能绘制图形、绘制文字、绘制图片、生成PDF、裁剪图片等,还可以用来自定义UI控件。
例如画板应用、手势解锁功能、图形报表等都是用Quartz2D实现的。
1. 图形上下文(Graphics Context)图形上下文(Graphics Context)是一个CGContextRef类型的数据,它用来保存绘图信息、绘图状态和决定绘制的输出目标(输出目标可以是PDF文件、Bitmap或者显示器的窗口上)。
相同的一套绘图序列,指定不同的图形上下文可将相同的图像绘制到不同的目标上。
Quartz2D提供了一下几种类型的Graphics Context:
Bitmap Graphics ContextPDF Graphics ContextWindow Graphics ContextLayer Graphics ContextPRinter Graphics Context2. 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*/4voiddrawTriangle()5{6//1.获得图形上下文7CGContextRef contextRef =UIGraphicsGetCurrentContext();89//2.拼接图形路径10//设置一个起点11CGContextMoveToPoint(contextRef,100,100);12//添加一条线段到(100,100)13CGContextAddLineToPoint(contextRef,200,200);14//添加一条线段到(150,40)15CGContextAddLineToPoint(contextRef,150,40);16//关闭路径(连接起点和终点)17CGContextClosePath(contextRef);1819//3.渲染显示到View上面20CGContextStrokePath(contextRef);21}
2. 画矩形1/**2* 画四边形3*/4voiddrawQuadrilateral()5{6//1.获得图形上下文7CGContextRef contextRef =UIGraphicsGetCurrentContext();8//2.画矩形9CGContextAddRect(contextRef, CGRectMake(100,100,150,100));10//3.绘制图形11CGContextStrokePath(contextRef);12}
3. 画圆1/**2* 画圆3*/4voiddrawCircle()5{6//1.获得图形上下文7CGContextRef contextRef =UIGraphicsGetCurrentContext();8//2.画圆9CGContextAddEllipseInRect(contextRef, CGRectMake(100,100,100,100));10//3.绘制图形11CGContextFillPath(contextRef);12}
4. 画圆弧1/**2* 画圆弧3*/4voiddrawArc()5{6//1.获得图形上下文7CGContextRef contextRef =UIGraphicsGetCurrentContext();89//2.画圆弧10//x\y : 圆心坐标11//radius : 半径12//startAngle : 开始角度13//endAngle : 结束角度14//clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)15CGContextAddArc(contextRef,100,100,50,0, M_PI,1);1617//3.绘制图形18CGContextStrokePath(contextRef);19}
5. 画文字1/**2* 画文字3*/4voiddrawText()5{6NSString *str =@"画文字";7//设置文字属性8NSMutableDictionary *attrs =[NSMutableDictionary dictionary];9attrs[NSForegroundColorAttributeName] =[UIColor redColor];10attrs[NSFontAttributeName] = [UIFont systemFontOfSize:20];1112//将文字画在某个位置13[str drawAtPoint:CGPointMake(100,100) withAttributes:attrs];1415//将文字画在矩形框内16//[str drawInRect:CGRectMake(100, 100, 100, 100) withAttributes:attrs];17}
6. 画图片1/**2* 画图片3*/4voiddrawImage()5{6UIImage *image = [UIImage imageNamed:@"1.jpg"];7[image drawaspatternInRect:CGRectMake(100,100,100,100)];8}
7. 图形上下文栈1/**2* 图形上下文栈3*/4voidContextSaveGState()5{6//获得图形上下文7CGContextRef contextRef =UIGraphicsGetCurrentContext();89//将contextRef拷贝一份放到栈中10CGContextSaveGState(contextRef);1112//设置绘图状态13CGContextSetLineWidth(contextRef,10);14[[UIColor redColor]set];15CGContextSetLineCap(contextRef, kCGLineCapRound);1617//第一根线18CGContextMoveToPoint(contextRef,50,50);19CGContextAddLineToPoint(contextRef,120,190);2021//画线22CGContextStrokePath(contextRef);2324//将栈顶的上下文出栈,替换当前的上下文25CGContextRestoreGState(contextRef);2627//第二根线28CGContextMoveToPoint(contextRef,10,70);29CGContextAddLineToPoint(contextRef,220,290);3031//画线32CGContextStrokePath(contextRef);33}
8. 矩阵操作(图形整体缩放、移动、旋转等等)1/**2* 矩阵操作3*/4voidcontextMatrix()5{6//获得图形上下文7CGContextRef contextRef =UIGraphicsGetCurrentContext();89//缩小0.5倍(在画线条之前设置)10CGContextScaleCTM(contextRef,0.5,0.5);11//旋转12CGContextRotateCTM(contextRef, M_PI_4);13//移动14CGContextTranslateCTM(contextRef,0,150);1516//画矩形17CGContextAddRect(contextRef, CGRectMake(100,100,100,100));18CGContextStrokePath(contextRef);19}
9. 图片裁剪1/**2* 图片裁剪3*/4- (void)imageClip5{6//1.加载原图7UIImage *oldImage = [UIImage imageNamed:@"1.jpg"];8//2.开启上下文9UIGraphicsBeginImageContextWithOptions(oldImage.size, NO,0.0);10//3.取得当前的上下文11CGContextRef contextRef =UIGraphicsGetCurrentContext();12//4.画圆13CGRect circleRect = CGRectMake(0,0, oldImage.size.width, oldImage.size.height);14CGContextAddEllipseInRect(contextRef, circleRect);15//5.按照当前的路径形状(圆形)裁剪,超出这个形状以外的内容都不显示16CGContextClip(contextRef);17//6.画图18[oldImage drawInRect:circleRect];19//7.取图20UIImage *newImage =UIGraphicsGetImageFromCurrentImageContext();21//8.结束22UIGraphicsEndImageContext();23}
10. 截屏1/**2* 截屏3*/4- (void)screenCut5{6//1.开启上下文7UIGraphicsBeginImageContextWithOptions(self.frame.size, NO,0.0);8//2.将控制器view的layer渲染到上下文9[self.layer renderInContext:UIGraphicsGetCurrentContext()];10//3.取出图片11UIImage *newImage =UIGraphicsGetImageFromCurrentImageContext();12//4.结束上下文13UIGraphicsEndImageContext();14}
11. 重绘1/**2* 重绘3*/4- (void)reDraw5{6//重绘(这个方法内部会重新调用drawRect:方法进行绘制)7[self setNeedsDisplay];8}
12. 常用属性1/**2* 常用属性3*/4voidContextProperty()5{6//获得图形上下文7CGContextRef contextRef =UIGraphicsGetCurrentContext();89//设置线段宽度10CGContextSetLineWidth(contextRef,10);11//设置颜色12CGContextSetRGBStrokeColor(contextRef,1,0,0,1);13//设置线段头尾部样式14CGContextSetLineCap(contextRef, kCGLineCapRound);15//设置线段转折点的样式16CGContextSetLineJoin(contextRef, kCGLineJoinRound);17//set : 同时设置为实心和空心颜色18//setStroke : 设置空心颜色19//setFill : 设置实心颜色20[[UIColor whiteColor]set];2122//裁剪,裁剪后所画内容只能在裁剪的范围内显示23CGContextClip(contextRef);24}