Quartz2D详解及应用

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地址

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容