Quardz2D

作者: 夏天不冷 | 来源:发表于2017-02-02 16:55 被阅读0次
    1. Quartz 2D
    • 使用前须知:
      Quartz2D的API是纯C语言的
      Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统
      Quartz2D的API来自于Core Graphics框架,故数据类型和函数基本都以CG作为前缀
      比如:
      CGContextRef
      CGPathRef
      CGContextStrokePath(ctx);

    • Quartz 2D能完成的工作如下:
      绘制图形 : 线条\三角形\矩形\圆\弧等
      绘制文字
      绘制/生成图片(图像)
      读取\生成PDF
      截图\裁剪图片
      自定义UI控件
      。。。

    2.开发中Quartz2D实例:
    • 裁剪图片
    • 涂鸦画板
    • 手势解锁
    • 报表(折线图/饼状图/柱状图等)
    • 图片水印
    • 图片裁剪
    • 屏幕截图
      • 原因:
        为了便于搭建美观的UI界面,iOS提供了UIKit框架,里面不仅提供了各种各样的UI控件,还使用OC封装了CoreGraphics的API,使开发更简单。利用UIKit框架提供的控件,拼拼凑凑,能搭建和实现一些简单、常见的UI界面, 但是有些UI界面极其复杂、而且比较个性化,用普通的UI控件无法实现,这时可以利用Quartz2D技术将控件内部的结构画出来,自定义控件的样子,其实,iOS中大部分控件的内容都是通过Quartz2D画出来的。因此,Quartz2D在iOS开发中很重要的一个价值是:自定义view(自定义UI控件)
    3.图形上下文(Graphics Context):是一个CGContextRef类型的数据
    • 作用:
      1.保存绘图信息、绘图状态
      2.决定绘制的输出目标(绘制到什么地方去?)
      (输出目标可以是PDF文件、Bitmap或者显示器的窗口上)

    • Quartz2D提供了以下几种类型的Graphics Context:

      ①Bitmap   Graphics  Context     (位图上下文)
      ②PDF         Graphics  Context  (PDF上下文)
      ③Window  Graphics   Context     (窗口上下文)
      ④Layer       Graphics   Context  (图层上下文)
      ⑤Printer      Graphics   Context  (打印上下文)
      

    => 相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上

    • 总结:
      1.开发前确定好你的输出目标(即显示到哪里),再选择正确的上下文。
      2.drawRect:方法中取得上下文就是Layer Graphics Context ,View之所以能显示东西,完全是因为它内部的layer
    4.View中绘图(故输出目标是:图层上下文)
    • 方式:利用View中系统提供的DrawRect方法。可以直接获取Layer Graphics Context(图层上下文),

    • DrawRect方法作用?什么时候调用?

      • 作用: 专门在这个方法当中绘图到View的Layer上的,只有在这个方法中才能获得跟View相关联的图层上下文。
      • 调用时间:
        ① 当view第一次显示到屏幕上时(被加到UIWindow上显示出来)
        ②调用view的setNeedsDisplay或者setNeedsDisplayInRect:时
    • 本质上,Quardz2D绘图的步骤如下:
      ①获取xxx上下文
      ②描述路径
      ③将路径添加到xxx上下文
      ④将上下文内容渲染到你的输出目标上(可以渲染到:图层(layer)上下文上,位图(图片)上下文上,PDF上下文上等。。)

      • 注意:
        <1>图层(Layer)上下文的绘制,只能在系统提供的DrawRect方法里操作。好处就是:该方法中可以直接获得图层上下文, 不需要手动创建和开启。
        <2>像位图(图片)上下文上等,要想使用得自己手动开启和关闭,好处就是:可以写在任意方法里。
        实现途径:
        <1>完全使用 Core Graphics 框架,纯c语言,每次写起来有点难度。但底层地东西性能好。
        <2>使用苹果封装了这些具体操作的,UIKit框架,简单易上手
    5.Core Graphics 框架(纯c,性能好)
    • 常用的拼接路径函数:

      • 新建一个起点
        void CGContextMoveToPoint(CGContextRefc, CGFloatx, CGFloaty)
      • 添加新的线段到某个点
        void CGContextAddLineToPoint(CGContextRefc, CGFloatx, CGFloaty)
      • 添加一个矩形
        void CGContextAddRect(CGContextRefc, CGRectrect)
      • 添加一个椭圆
        void CGContextAddEllipseInRect(CGContextRefcontext, CGRectrect)
    • 添加一个圆弧
      void CGContextAddArc(CGContextRefc, CGFloatx, CGFloaty,
      CGFloatradius, CGFloatstartAngle, CGFloatendAngle, intclockwise)

    • 常用绘制路径函数

      • Mode参数决定绘制的模式
        void CGContextDrawPath(CGContextRefc, CGPathDrawingModemode)
      • 绘制空心路径
        void CGContextStrokePath(CGContextRefc)
      • 绘制实心路径
        void CGContextFillPath(CGContextRefc)
        提示:一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数,都是用来绘制路径的
    • 图形上下文栈的操作

      • 将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”)
        void CGContextSaveGState(CGContextRef c)

      • 将栈顶的上下文出栈,替换掉当前的上下文
        void CGContextRestoreGState(CGContextRef c)

      • 注意:一个路径只能对应一个状态.为了互不影响:
        ①一个路径分别设置一个状态(即写好一个路径就渲染对应的状态),
        ②利用状态栈,先存用时再取,注意,不能取得越界否则会报错。

    • 矩阵操作

      • 缩放
        void CGContextScaleCTM(CGContextRefc, CGFloatsx, CGFloatsy)

      • 旋转
        void CGContextRotateCTM(CGContextRefc, CGFloatangle)

      • 平移
        void CGContextTranslateCTM(CGContextRefc, CGFloattx, CGFloatty)

    6.Quardz2D的内存管理(前提:你直接使用Core Graphics的API)
    • ① 使用含有“Create”或“Copy”的函数创建的对象,使用完后必须释放,否则将导致内存泄露。使用不含有“Create”或“Copy”的函数获取的对象,则不需要释放
    • ② 如果retain了一个对象,不再使用时,需要将其release掉
      可以使用Quartz 2D的函数来指定retain和release一个对象。
      例如,如果创建了一个CGColorSpace对象,
      则使用函数CGColorSpaceRetain 和CGColorSpaceRelease来retain和release对象。
      ③也可以使用Core Foundation的CFRetain和CFRelease。注意不能传递NULL值给这些函数
      ④CGPathCreateMutable方法返回的路径是一个Core Fundation Object而这并不在ARC的管理范围之内 所以需要手动释放对象
      即:
      CGMutablePathRef path = CGPathCreateMutable();
      。。。。。。。。。
      CGPathRelease(path);
    7.UIKit框架绘图(输出目标随你定)
    • 绘制基本线条
      ①画路径 : UIBezierPath
      设置起始点 : moveToPoint:
      添加一根线到某个点: addLineToPoint
      ② 绘图 :
      <1> fill : 填充,默认是黑色
      <2> stroke :空心拼接

    • 注意:
      CGContextRef ctx = UIGraphicsGetCurrentContext();
      CGContextStrokePath(ctx);
      等于如下:
      [path stroke]; => 如果用UIKit框架,都可以不用自己写获得当前上下文
      [path fill] 等于 CGContextFillPath(ctx);

    • 绘制文字或图片
      利用:drawAtPoint或者drawInRect
      区别:

    • 绘制文字时:
      drawAtPoint: 不会换行
      drawInRect: 会换行.

    • 绘制图片时:
      drawAtPoint:绘制是图片的原始大小.
      drawInRect: 绘制的图片大小为指定的rect区域,一般会拉伸

    • 拓展:
      ①画图片时指定裁剪范围必须在绘制之前设置。(超出裁剪范围的内容不显示)
      例如:UIRectClip(CGRectMake(20, 20, 50, 50)); //相对于rect坐标系
      ②画文字时指定文字,字体,颜色,描边等属性 用字典去包装
      例如:

      NSString *text = @“哈哈哈哈哈哈哈哈哈哈哈”;
      NSMutableDictionary *dict = [NSMutableDictionary dictionary];
      //文字字体
      dict[NSFontAttributeName] = [UIFont systemFontOfSize:30];
      //颜色
      dict[NSForegroundColorAttributeName] = [UIColor redColor];
      //描边
      dict[NSStrokeColorAttributeName] = [UIColor blueColor];
      dict[NSStrokeWidthAttributeName] = @1;
       //阴影
      NSShadow *shadow = [[NSShadow alloc] init];
      //设置阴影的偏移量
      shadow.shadowOffset = CGSizeMake(-20, -10);
      shadow.shadowColor = [UIColor greenColor];
      shadow.shadowBlurRadius = 3.0;
      dict[NSShadowAttributeName] = shadow;
      
      [text drawInRect:rect withAttributes:dict];
      
    8.UIKit框架实现基本线条UIBezierPath常用方法:
    • 画圆 => 圆角矩形
      => + (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;

    • 画矩形
      => + (instancetype)bezierPathWithRect:(CGRect)rect;
      => + (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; //圆角矩形

    • 画椭圆 => 圆
      => + (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

    • 画弧线 => 可以画圆 => 画饼状图(几个不同颜色的弧度凑成一个圆)
      => + (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
      注:
      ①开始角度和结束角度均为弧度 ,默认设置起始点弧度:X轴水平向右为0弧度,顺时针递增,x轴上面为负,下面为正
      ②clockwise:是否为顺时针

    • 画曲线
      => - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

    9.UIView的setNeedsDisplay和setNeedsLayout方法区别

    1、首先两个方法都是异步执行的。
    2、setNeedsDisplay:会调用自动调用drawRect方法,这样可以拿到UIGraphicsGetCurrentContext,就可以画画了。
    3、setNeedsLayout:会默认调用layoutSubViews,就可以处理子视图中的一些数据。
    总结:setNeedsDisplay方便绘图,而setNeedsLayout方便出来数据。

    相关文章

      网友评论

          本文标题:Quardz2D

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