OC - 8.Quartz2D核心要点

简介

---

• 作用

• 绘制
• 绘制图形 : 线条\三角形\矩形\圆\弧等
• 绘制文字
• 绘制\生成图片(图像)
• 读取\生成PDF
• 截图\裁剪图片
• 自定义UI控件（通常为内部结构较复杂的控件）
• UIKit中的绝大部分控件都是由系统绘制的
• 矩阵操作（使绘制到图形啥下文中的所有路径都发生变化）
• 缩放
• 旋转
• 平移

• 简介

  • Quartz2D隶属于Core Graphic框架，是一个二维的绘图引擎，直接操于Layer（图层），通常在-drawRect:方法中获取上下文，将需要绘制的内容绘制到图形上下文中，然后将图层渲染到控件，最后关闭图形上下文。
  • - (void)drawRect:(CGRect)rect，该方法只会界面即将显示的时候调用一次，若要在此调用需要调用重绘方法- (void)setNeedsDisplay

常用的绘制操作

---

• 绘制直线（三种方法）

  • 通过添加路径的方式绘制直线，最后把路径渲染的上下文

  • 开启上下文

    • CGContextRef context = UIGraphicsGetCurrentContext()

  • 描述所要绘制的路径

    • 创建路径
      CGMutablePathRef CGPathCreateMutable(void)
    • 设置起点
      void CGPathMoveToPoint(CGMutablePathRef path, const CGAffineTransform *m, CGFloat x, CGFloat y)
    • 连线
      void CGPathAddLineToPoint(CGMutablePathRef path, const CGAffineTransform *m, CGFloat x, CGFloat y)

  • 将路径添加到上下文

    • void CGContextAddPath(CGContextRef context, CGPathRef path)

  • 渲染上下文

    • void CGContextStrokePath(CGContextRef c)
  • 直接在上下文中绘制直线

  • 开启上下文

    • CGContextRef context = UIGraphicsGetCurrentContext()

  • 描述所要绘制的路径

    • 设置起点
      void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
    • 连线
      void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)

  • 渲染上下文

    • void CGContextStrokePath(CGContextRef c)
  • 通过贝瑟尔绘制直线

  • 常见贝瑟尔路径（最普通的路径）

    • (UIBezierPath *)bezierPath

  • 设置起点

    • (void)moveToPoint:(CGPoint)point

  • 连线

    • (void)addLineToPoint:(CGPoint)point

  • 渲染

    • (void)stroke

• 绘制曲线

  • 获取上下文
  • CGContextRef UIGraphicsGetCurrentContext(void)
  • 绘制路径
  • 设置起点
    void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
  • 连线
    void CGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y)
  • 渲染上下文
    void CGContextStrokePath(CGContextRef c)

• 绘制圆弧（通过贝瑟尔路径）

  • 创建贝瑟尔路径
  • + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
  • - (void)stroke

• 绘制饼状图

  • 思路：
    1) 饼状图其实是在圆弧的基础上增加了两条线而完成
  • 实现步骤

  • 通过贝瑟尔路径绘制圆弧

    • + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

  • 添加直线使路径封闭

    • 从路径终点到圆弧圆心添加直线
    • - (void)addLineToPoint:(CGPoint)point
    • 路径起点到圆弧圆心的直线会被自动添加
      调用- (void)fill方法是自动添加

  • 设置填充颜色

    • - (void)set，此方法是UIColor对象的方法，用于设置上下文填充或渲染的颜色

  • 填充并封闭路径并渲染

    • - (void)fill，通过贝瑟尔路径调用该方法

• 绘制柱状图

  • 思路
    1) 通过贝瑟尔路径可以直接绘制柱状图
  • 实现步骤

  • 创建贝瑟尔路径

    • + (UIBezierPath *)bezierPathWithRect:(CGRect)rect

  • 设置填充颜色

    • - (void)set，此方法是UIColor对象的方法，用于设置上下文中填充或渲染的颜色

  • 填充并封闭路径并渲染

    • - (void)fill

• 绘制文字

  • 思路

  • NSString的分类NSStringDrawing实现了将NSString对象的绘制方法

    • - (void)drawAtPoint:(CGPoint)point withAttributes:(NSDictionary *)attrs，从某个点开始绘制文字
    • - (void)drawInRect:(CGRect)rect withAttributes:(NSDictionary *)attrs，在rect区域内绘制文字
  • 在绘制文字是，还可以通过attrs参数设置其属性
  • 实现步骤
  • 创建NSString对象

  • 设置文本属性（其属性不存在一个字典中，通过指定的key去设置相应的属性）

    • 设置文本颜色
      NSForegroundColorAttributeName
    • 设置字体
      NSFontAttributeName
    • 设置渲染时的宽度
      NSStrokeWidthAttributeName
    • 设置渲染时的颜色
      NSStrokeColorAttributeName
    • 设置背景属性
      NSShadowAttributeName
      设置背景颜色：shadowColor(UIColor)
      模糊属性：shadowBlurRadius(CGFloat)
      偏移量：shadowOffset

  • 绘制文字

    • - (void)drawInRect:(CGRect)rect withAttributes:(NSDictionary *)attrs
    • - (void)drawAtPoint:(CGPoint)point withAttributes:(NSDictionary *)attrs，若使用该方法，则文字会单行显示

• 绘制图片

  • 思路
    直接调用UIImage的用于绘制的对象方法即可绘制
  • 实现步骤
  • 创建UIImage对象
  • 创建绘制区域
  • 设置超出绘制区域的内容被剪掉
    UIRectClip(CGRect rect)

  • 绘制图片

    • - (void)drawAsPatternInRect:(CGRect)rect，平铺的方式显示图片，铺满整个绘制区域（rect）
    • - (void)drawAtPoint:(CGPoint)point，显示一张与原来图片大小一样的图片
    • - (void)drawInRect:(CGRect)rect，图片被拉伸，大小等于rect
    • - (void)drawAtPoint:(CGPoint)point blendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha

---恢复内容结束---

简介

---

• 作用

  • 绘制
  • 绘制图形 : 线条\三角形\矩形\圆\弧等
  • 绘制文字
  • 绘制\生成图片(图像)
  • 读取\生成PDF
  • 截图\裁剪图片
  • 自定义UI控件（通常为内部结构较复杂的控件）
  • UIKit中的绝大部分控件都是由系统绘制的
  • 矩阵操作（使绘制到图形啥下文中的所有路径都发生变化）
  • 缩放
  • 旋转
  • 平移

• 简介

  • Quartz2D隶属于Core Graphic框架，是一个二维的绘图引擎，直接操于Layer（图层），通常在-drawRect:方法中获取上下文，将需要绘制的内容绘制到图形上下文中，然后将图层渲染到控件，最后关闭图形上下文。
  • - (void)drawRect:(CGRect)rect，该方法只会界面即将显示的时候调用一次，若要在此调用需要调用重绘方法- (void)setNeedsDisplay

常用的绘制操作

---

• 绘制直线（三种方法）

  • 通过添加路径的方式绘制直线，最后把路径渲染的上下文

  • 开启上下文

    • CGContextRef context = UIGraphicsGetCurrentContext()

  • 描述所要绘制的路径

    • 创建路径
      CGMutablePathRef CGPathCreateMutable(void)
    • 设置起点
      void CGPathMoveToPoint(CGMutablePathRef path, const CGAffineTransform *m, CGFloat x, CGFloat y)
    • 连线
      void CGPathAddLineToPoint(CGMutablePathRef path, const CGAffineTransform *m, CGFloat x, CGFloat y)

  • 将路径添加到上下文

    • void CGContextAddPath(CGContextRef context, CGPathRef path)

  • 渲染上下文

    • void CGContextStrokePath(CGContextRef c)
  • 直接在上下文中绘制直线

  • 开启上下文

    • CGContextRef context = UIGraphicsGetCurrentContext()

  • 描述所要绘制的路径

    • 设置起点
      void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
    • 连线
      void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)

  • 渲染上下文

    • void CGContextStrokePath(CGContextRef c)
  • 通过贝瑟尔绘制直线

  • 常见贝瑟尔路径（最普通的路径）

    • (UIBezierPath *)bezierPath

  • 设置起点

    • (void)moveToPoint:(CGPoint)point

  • 连线

    • (void)addLineToPoint:(CGPoint)point

  • 渲染

    • (void)stroke

• 绘制曲线

  • 获取上下文
  • CGContextRef UIGraphicsGetCurrentContext(void)
  • 绘制路径
  • 设置起点
    void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
  • 连线
    void CGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y)
  • 渲染上下文
    void CGContextStrokePath(CGContextRef c)

• 绘制圆弧（通过贝瑟尔路径）

  • 创建贝瑟尔路径
  • + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
  • - (void)stroke

• 绘制饼状图

  • 思路：
    1) 饼状图其实是在圆弧的基础上增加了两条线而完成
  • 实现步骤

  • 通过贝瑟尔路径绘制圆弧

    • + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

  • 添加直线使路径封闭

    • 从路径终点到圆弧圆心添加直线
    • - (void)addLineToPoint:(CGPoint)point
    • 路径起点到圆弧圆心的直线会被自动添加
      调用- (void)fill方法是自动添加

  • 设置填充颜色

    • - (void)set，此方法是UIColor对象的方法，用于设置上下文填充或渲染的颜色

  • 填充并封闭路径并渲染

    • - (void)fill，通过贝瑟尔路径调用该方法

• 绘制柱状图

  • 思路
    1) 通过贝瑟尔路径可以直接绘制柱状图
  • 实现步骤

  • 创建贝瑟尔路径

    • + (UIBezierPath *)bezierPathWithRect:(CGRect)rect

  • 设置填充颜色

    • - (void)set，此方法是UIColor对象的方法，用于设置上下文中填充或渲染的颜色

  • 填充并封闭路径并渲染

    • - (void)fill

• 绘制文字

  • 思路

  • NSString的分类NSStringDrawing实现了将NSString对象的绘制方法

    • - (void)drawAtPoint:(CGPoint)point withAttributes:(NSDictionary *)attrs，从某个点开始绘制文字
    • - (void)drawInRect:(CGRect)rect withAttributes:(NSDictionary *)attrs，在rect区域内绘制文字
  • 在绘制文字是，还可以通过attrs参数设置其属性
  • 实现步骤
  • 创建NSString对象

  • 设置文本属性（其属性不存在一个字典中，通过指定的key去设置相应的属性）

    • 设置文本颜色
      NSForegroundColorAttributeName
    • 设置字体
      NSFontAttributeName
    • 设置渲染时的宽度
      NSStrokeWidthAttributeName
    • 设置渲染时的颜色
      NSStrokeColorAttributeName
    • 设置背景属性
      NSShadowAttributeName
      设置背景颜色：shadowColor(UIColor)
      模糊属性：shadowBlurRadius(CGFloat)
      偏移量：shadowOffset

  • 绘制文字

    • - (void)drawInRect:(CGRect)rect withAttributes:(NSDictionary *)attrs
    • - (void)drawAtPoint:(CGPoint)point withAttributes:(NSDictionary *)attrs，若使用该方法，则文字会单行显示

• 绘制图片

  • 思路
    直接调用UIImage的用于绘制的对象方法即可绘制
  • 实现步骤
  • 创建UIImage对象
  • 创建绘制区域
  • 设置超出绘制区域的内容被剪掉
    UIRectClip(CGRect rect)

  • 绘制图片

    • - (void)drawAsPatternInRect:(CGRect)rect，平铺的方式显示图片，铺满整个绘制区域（rect）
    • - (void)drawAtPoint:(CGPoint)point，显示一张与原来图片大小一样的图片
    • - (void)drawInRect:(CGRect)rect，图片被拉伸，大小等于rect
    • - (void)drawAtPoint:(CGPoint)point blendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha