Quardz2D

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方便出来数据。

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

推荐阅读更多精彩内容

  • --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益...
    韩七夏阅读 2,717评论 2 10
  • Quartz2D以及drawRect的重绘机制字数1487 阅读21 评论1 喜欢1一、什么是Quartz2D Q...
    PurpleWind阅读 766评论 0 3
  • 什么是Quartz2D 是一个二维的绘图引擎,同时支持iOS和Mac系统 Quartz2D的API是纯C语言的,它...
    Mario_ZJ阅读 577评论 0 1
  • 即便时光荏苒,岁月变迁,你我再也回不到从前,可我还是希望以后你我都各自安好。我也依旧会继续相信爱情,勇敢去爱,哪怕...
    式薇胡不归阅读 1,190评论 13 19
  • 在武志红先生的《身体知道答案》里面讲了这样一个例子:他的一位朋友企业陷入了一种瓶颈,原来是因为他和牛人合作的时候...
    林玉珍阅读 185评论 0 2