簡介

• 作用

• 繪制
• 繪制圖形 : 線條/三角形/矩形/圓/弧等
• 繪制文字
• 繪制/生成圖片(圖像)
• 讀取/生成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