美文网首页iOS动画iOS 开发 iOS绘图与动画
Quartz2D 绘图 基本概念及其使用

Quartz2D 绘图 基本概念及其使用

作者: 木木小林酱 | 来源:发表于2016-02-27 21:42 被阅读400次

    介绍:

    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);

    相关文章

      网友评论

      本文标题:Quartz2D 绘图 基本概念及其使用

      本文链接:https://www.haomeiwen.com/subject/bdgwkttx.html