Quartz2D 绘图 基本概念及其使用
介绍:
1.什么是Quartz2D?
他是一个二维的绘图引擎,同时支持iOS和Mac系统
2.Quartz2D能完成的工作(实例:QQ头像的裁剪方形变圆形 需求:读取一张方形图片,显示中心圆形)
画基本线条,绘制文字,图片,截图\裁剪,自定义UIView.读取\生成PDF
3.Quartz2D在开发中的价值
当我们的控件样式极其复杂时,可以把控件内部的结构给画出画,就是自定义控件.
4.什么是图形上下文,上下文的类型有哪些?
图形上下文是用来保存用户绘制的内容状态,并决定绘制到哪个地方的.
用户把绘制好的内容先保存到图形上下文,
然后根据选择的图形上下文的不同,绘制的内容显示到地方也不相同,即输出目标也不相同.
图形上下文的类型有:
Bitmap Graphics Context(位图上下文)
PDF Graphics Context
Window Graphics Context
Layer Graphics Context(图层上下文,自定义UIView取得上下文就是图层上下文.
UIView之所以能够显示就是因为他内部有一个图层)
Printer Graphics Context
5.如何自定义UIView,步骤是什么?
首先得要有上下文,有了上下文才能决定把绘制的东西显示到哪个地方去.
其次就是这个上下文必须得和View相关联.才能将内容绘制到View上面.
步骤:
1.要先自定定UIView
2.实现DrawRect方法
3.在DrawRect方法中取得跟View相关联的上下文.
4.绘制路径(描述路径长什么样).
5.把描述好的路径保存到上下文(即:添加路径到上下文)
6.把上下文的内容渲染到View
总结简介:Quartz2D在iOS开发中很重要的一个价值是:自定义view(自定义UI控件)-显示出更好看的界面
Quartz2D使用步骤:(tip:-(void)drawRect:(CGRect)rect程序运行会自动调用一次)
场景1:使用上下文 :搞一条线段
CGContextRefctx =UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx,10,10);
CGContextAddLineToPoint(ctx,100,100);
CGContextStrokePath(ctx);// CGContextFillPath(ctx);
提示:一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数，都是用来绘制路径的
//当系统自动调用drawRect方法时会自动创建跟view相关联的上下文
场景2:BezierPath贝赛尔曲线
1.自定义视图继承UIView
2.打开/实现DrawRect方法
3.在DrawRect方法中取得跟View相关联的上下文.
CGContextRefctx =UIGraphicsGetCurrentContext();
4.绘制路径(描述路径长什么样).
UIBezierPath*path = [UIBezierPathbezierPath];
[pathmoveToPoint:CGPointMake(20,150)];
[pathaddLineToPoint:CGPointMake(280,150)];
5.把描述好的路径保存到上下文(即:添加路径到上下文)
CGContextAddPath(ctx, path.CGPath);
6.把上下文的内容渲染到View
1:CGContextStrokePath(ctx);
2:CGContextFillPath(ctx)
贝赛尔曲线BezierPath能做什么:
1.//画线,如场景2(在DrawRect可以省略上下文,直接使用路径描边,填充)
2.//画正方形(矩形)Rect- (void)rect {
·UIBezierPath* path = [UIBezierPath·bezierPathWithRect:CGRectMake(50,50,50,50)];
[pathfill];
}
2.5.//画正方形可带圆角边rounded,cornerRadius:圆角半径
- (void)cornerRadius {
CGRectrect_1 =CGRectMake(50,50,50,80);
UIBezierPath*path = [UIBezierPathbezierPathWithRoundedRect:rect_1cornerRadius:50];
[pathstroke];
}
3.//画圆形椭圆Oval
- (void)Oval {
UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(50,50,100,100)];
//A填充fil
[pathfill];
[[UIColoryellowColor]set];
//B描边str
[pathstroke];
}
4.//画弧形arc,饼图(详细见饼图)ArcCenter
·UIBezierPath*path = [UIBezierPath·bezierPathWithArcCenter:centerradius:radiusstartAngle:startAendAngle:endAclockwise:YES];
[pathaddLineToPoint:center];
·[pathfill];
注意:(栈在程序运行时是不会释放的,对象先进后出)
1.上下文状态(也是一个栈):会在渲染的时候Draw,stroke,fill给路径赋对应的属性 //1设置颜色,2设置线宽
[[UIColorredColor]set];CGContextSetLineWidth(ctx,10);
因为不会上下文状态释放,再次渲染的时候还会添加状态给路径
2.上下文状态栈:使用上下文创建的栈(可以特意保存当前栈的状态)
保存CGContextSaveGState(ctx);恢复读取CGContextRestoreGState(ctx)
使用字符串画文字:
1. 拿到字符串
NSString*str =@"glglglglglglglglgl";
2.创建初始化可变字典
NSMutableDictionary*dict = [NSMutableDictionarydictionary];
3.在字典里设置需要给文字的属性
字体dict[NSFontAttributeName] = [UIFontsystemFontOfSize:30];
字体颜色NSForegroundColorAttributeName
描边NSStrokeColorAttributeName,NSStrokeWidthAttributeName
阴影对象NSShadow的shadowOffset偏移shadowColor颜色,shadowBlurRadius偏移
dict[NSShadowAttributeName] = shadow;//
4.画字
//drawAtPoint不会自动换行
[str drawAtPoint:CGPointMake(0, 0) withAttributes:dict];
drawInRect会自动换行
[strdrawInRect:self.boundswithAttributes:dict];
加载图片并渲染:
- (void)drawPic:(CGRect)rect{
//1加载图片,可使用下面任意一种方式渲染
UIImage*image = [UIImageimageNamed:@"minion.jpg"];
//裁剪rect范围外的像素,只渲染范围内的
UIRectClip(CGRectMake(0,0,120,150));
//2.1 drawAtPoint画的是原始图片尺寸大小,适应UIView
// [image drawAtPoint:CGPointZero];
//2.2 drawInRect画的是rect范围图片填充
// [image drawInRect:rect];
//2.3从rect开始平铺渲染
[imagedrawAsPatternInRect:self.bounds];
}
重绘:
场景:当渲染的对象需要位移,放大,旋转,改变.等操作的时候,需要在特定的时刻(属性改变时,属性的set方法中.自动刷新方法中)
调用[viewsetNeedsDisplay];
//重绘setNeddsDisplay系统会自动调用drawRect
矩阵操作(渲染的内容进行平移,旋转,缩放):
1.获取上下文
CGContextRefctx =UIGraphicsGetCurrentContext();
2.描述路径
UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(200,100,200,100)];
3.1//平移
CGContextTranslateCTM(ctx,100,0);
3.2//旋转
CGContextRotateCTM(ctx,M_PI_4);
3.2//缩放
CGContextScaleCTM(ctx,0.5,0.5);
4.把描述好的路径保存到上下文(即:添加路径到上下文)
CGContextAddPath(ctx, path.CGPath);
5.填充渲染上下文
CGContextFillPath(ctx);
