美文网首页
Quartz2D详解及应用

Quartz2D详解及应用

作者: 杭州七木科技 | 来源:发表于2018-01-20 15:58 被阅读0次
    Quartz2D.png

    首先,我们看下本文学习的大纲,在本文中我们可以了解到以下知识点。

    • Quartz2D的概念及用途
    • drawRect方法的调用
    • 使用Quartz2D绘制简单图形

    Quartz2D的概念及用途

    基本概念

    Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac系统。
    

    用途

    1.绘制图形 : 线条\三角形\矩形\圆\弧等
    2.绘制文字
    3.绘制\生成图片(图像)
    4.读取\生成PDF
    5.截图\裁剪图片
    6.自定义UI控件
    

    我们在使用Quartz2D绘图时,主要是通过图形上下文来绘制,图形上下文就相当于画布,不同类型的画布就是决定着画得内容将展示在哪里。

     * Quartz2D提供了以下几种类型的Graphics Context:
     * Bitmap Graphics Context 位图上下文,在这个上下文上绘制或者渲染的内容,可以获取成图片(需要主动创建一个位图上下文来使用,使用完毕,一定要销毁)
     * PDF Graphics Context
     * Window Graphics Context
     * Layer Graphics Context 图层上下文,针对UI控件的上下文
     * Printer Graphics Context
    

    drawRect的介绍

    我们通过Quartz2D绘图,通常都是在drawRect方法中来实现绘制操作。
    在drawRect方法中取得上下文后,就可以绘制东西到view上了。

    View内部有个layer(图层)属性,drawRect:方法中取得的是一个Layer Graphics Context,因此,绘制的东西其实是绘制到view的layer上去了
    

    为什么要实现drawRect:方法才能绘图到view上?

    因为在drawRect:方法中才能取得跟view相关联的图形上下文
    

    drawRect:方法的调用?

    1.当view第一次显示到屏幕上时,系统会创建好一个跟当前view相关的Layer上下文
    2.系统会通过此上下文,在drawRect:方法中绘制好当前view的内容
    3.主动让view重绘内容的时候,调用setNeedsDisplay或者setNeedsDisplayInRect:。我们主动调用drawRect:方法是无效的。
    4.调用view的setNeedsDisplay或者setNeedsDisplayInRect:时。
    5.注意:setNeedsDisplay和setNeedsDisplayInRect:方法调用后,屏幕并不是立即刷新,而是会在下一次刷新屏幕的时候把绘制的内容显示出来。
    

    使用Path 对象时的内存管理问题?
    使用Path对象的时候,一定要注意内存的问题,一定要注意内存释放。

    1.凡是遇到 retain 、 copy 、 create 出的对象, 都需要进行 release
    2.但是CGPathCreateMutable()不是 OC 方法, 所以不是调用 某个对象的 release方法
    3.CGXxxxxCreate 对应的就有 CGXxxxxRelease。
    4.通过 CFRelease(任何类型)可以释放任何类型。
     CFRelease属于更底层的cocafoundation框架
    5.ARC仅仅是处理oc的引用计数的问题
    

    绘制基本图形

    1.绘制直线


    直线.png
    //1.获取图形上下文,目前我们现在使用的都是UIGraphics开头,CoreGraphics,项目的简称CG
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        //2.描述路径
        //2.1 创建路径
        CGContextMoveToPoint(ctx, 0, 0);
        //2.2 添加线到一个点
        CGContextAddLineToPoint(ctx, 50, 30);
        //3.完成路线
        CGContextStrokePath(ctx);
    

    2.绘制圆弧


    圆弧.png
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        /*
         * cg_nullable  上下文
         * x 圆点坐标 x
         * x 圆点坐标 y
         * radius   半径
         * startAngle 起点弧度
         * endAngle   重点弧度
         * clockwise  0代表顺时针 1代表逆时针
         */
        CGContextAddArc(ctx, 20, 20,20, M_PI_2, M_PI, 1);
        CGContextStrokePath(ctx);
    
    

    绘制圆弧闭合


    圆弧闭合.png
    CGContextRef ctx = UIGraphicsGetCurrentContext();
        /*
         * cg_nullable  上下文
         * x 圆点坐标 x
         * x 圆点坐标 y
         * radius   半径
         * startAngle 起点弧度
         * endAngle   重点弧度
         * clockwise  0代表顺时针 1代表逆时针
         */
        CGContextAddArc(ctx, 50, 50,20, M_PI_2, M_PI, 1);
        CGContextClosePath(ctx);
        CGContextStrokePath(ctx);
    

    3.绘制矩形


    矩形.png
     // 获取context对象
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 创建路劲
        CGContextAddRect(ctx, CGRectMake(20,20, 100, 100));
        // 渲染
        CGContextStrokePath(ctx);
    

    4.绘制扇形


    扇形.png
    //1.获取图形上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        //绘制曲线
        CGFloat centerX = 50;
        CGFloat centerY = 100;
        CGFloat radius = 50;
        //添加一根线 重点需要一根线,否则直接闭合的话,会把圆弧的起点和重点直接连接起来
        CGContextMoveToPoint(ctx, centerX, centerY);
        /*
         CGContextRef: 图形上下文
         x,y: 开始画的坐标
         radius: 半径
         startAngle, endAngle: 开始的弧度,结束的弧度
         
         */
        CGContextAddArc(ctx, centerX, centerY, radius, M_PI, M_PI_2, NO);
        [[UIColor cyanColor] set]; // 填充颜色
        CGContextFillPath(ctx); // 填充 填充就是填满,不填充就是一个轮廓
        //关闭线段
        CGContextClosePath(ctx);
        //渲染
        CGContextStrokePath(ctx);
    

    5.绘制椭圆


    椭圆.png
    // 获取context对象
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 创建内切椭圆
        CGContextAddEllipseInRect(ctx, CGRectMake(20, 20, 100, 50));
        // 渲染
        CGContextStrokePath(ctx);
    

    6.绘制三角形


    三角形.png
        // 获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 设置起点
        CGContextMoveToPoint(ctx, 50, 50);
        // 设置两条线的点
        CGContextAddLineToPoint(ctx, 50, 150);
        CGContextAddLineToPoint(ctx, 150, 150);
        // 闭合path
        CGContextClosePath(ctx);
        // 开始渲染
        CGContextStrokePath(ctx);
    

    附上git地址:
    使用Quartz2D绘制直线、矩形、三角形、椭圆和圆弧git地址

    相关文章

      网友评论

          本文标题:Quartz2D详解及应用

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