iOS开发基础32-Quartz2D（一）

一、Quartz 2D简介

1、什么是Quartz 2D

Quartz 2D 是一个功能强大的二维绘图引擎，同时支持 iOS 和 macOS 系统。它提供了丰富的 API，用于绘制图形、文字、生成图片和 PDF 等等。

2、Quartz 2D 能完成的工作

• 绘制图形：如线条、三角形、矩形、圆、弧等。
• 绘制文字。
• 绘制及生成图片（图像）。
• 读取及生成 PDF。
• 截图和裁剪图片。
• 自定义 UI 控件。

3、Quartz 2D 实例

• 图片裁剪
• 涂鸦和画板
• 手势解锁
• 报表展示：如折线图、饼状图和柱状图

二、自定义 View

1、Quartz 2D 在 iOS 开发中的价值

iOS 提供了丰富的 UI 控件，例如 UILabel、UIImageView 和 UIButton 等。这些控件可以通过简单的组合来实现常见的 UI 界面。但是，如果需要定制化和个性化的 UI 界面，普通控件可能无法满足需求。这时，可以利用 Quartz 2D 技术来自定义控件，绘制控件内部的细节。

实际上，iOS 的许多内置控件的内容都是通过 Quartz 2D 绘制的。因此，Quartz 2D 在 iOS 开发中一个重要的价值就是自定义 View（自定义 UI 控件）。

2、图形上下文

图形上下文（Graphics Context） 是一个 CGContextRef 类型的数据，用于保存绘图信息和状态，并决定绘制的输出目标（如屏幕、PDF 文件等）。

Quartz 2D 提供了多种类型的图形上下文：

• 位图图形上下文（Bitmap Graphics Context）
• PDF 图形上下文（PDF Graphics Context）
• 窗口图形上下文（Window Graphics Context）
• 图层图形上下文（Layer Graphics Context）
• 打印机图形上下文（Printer Graphics Context）

3、自定义 View

要在自定义 View 中使用 Quartz 2D 绘图，首先需要获取一个与 View 相关联的图形上下文。以下步骤介绍如何创建自定义 View 并绘制内容：

1. 新建一个类，继承自 UIView。
2. 实现 - (void)drawRect:(CGRect)rect 方法：
   • 获得当前 View 的图形上下文
   • 绘制内容
   • 渲染图形上下文

4、drawRect:

drawRect: 方法是绘制内容到 View 上的核心方法，只有在这个方法中才能获得与 View 相关联的图形上下文。

drawRect: 方法的调用时机：

• 当 View 第一次显示到屏幕上时（被加入到 UIWindow 中显示）
• 调用 View 的 setNeedsDisplay 或 setNeedsDisplayInRect: 方法时

三、绘图实现

1、Quartz 2D 绘图的代码步骤

1. 获取图形上下文

   CGContextRef ctx = UIGraphicsGetCurrentContext();
   

2. 拼接路径

   CGContextMoveToPoint(ctx, 10, 10);
   CGContextAddLineToPoint(ctx, 100, 100);
   

3. 绘制路径

   CGContextStrokePath(ctx); // 或者使用 CGContextFillPath(ctx);
   

2、常用拼接路径函数

以下是一些常用的路径拼接函数：

• 新建一个起点

  void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y);
  

• 添加新的线段到某个点

  void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y);
  

• 添加一个矩形

  void CGContextAddRect(CGContextRef c, CGRect rect);
  

• 添加一个椭圆

  void CGContextAddEllipseInRect(CGContextRef context, CGRect rect);
  

• 添加一个圆弧

  void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise);
  

3、常用绘制路径函数

以下是常用的绘制路径函数：

• 绘制路径

  void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode);
  

• 绘制空心路径

  void CGContextStrokePath(CGContextRef c);
  

• 绘制实心路径

  void CGContextFillPath(CGContextRef c);
  

4、图形上下文栈的操作

• 保存当前上下文

  void CGContextSaveGState(CGContextRef c);
  

• 恢复上下文

  void CGContextRestoreGState(CGContextRef c);
  

5、矩阵操作

利用矩阵操作可以让上下文中的所有路径一起发生变化：

• 缩放

  void CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy);
  

• 旋转

  void CGContextRotateCTM(CGContextRef c, CGFloat angle);
  

• 平移

  void CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty);
  

6、Quartz 2D 的内存管理

使用含有 Create 或 Copy 的函数创建的对象需要手动释放，否则会造成内存泄漏。可以使用 CGColorSpaceRetain 和 CGColorSpaceRelease 等函数来管理对象的生命周期。

四、实用功能

1、图片水印

要在图片上加水印，可以利用 Quartz 2D 将水印（文字、LOGO）绘制到图片的特定位置。

核心代码

• 开启基于位图的图形上下文

  UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale);
  

• 获取上下文中的图片

  UIImage *UIGraphicsGetImageFromCurrentImageContext();
  

• 结束基于位图的图形上下文

  UIGraphicsEndImageContext();
  

2、图片裁剪

可以将普通图片裁剪成圆形，例如用户头像。

核心代码

• 使用裁剪方法

  void CGContextClip(CGContextRef c);
  

3、屏幕截图

截取屏幕上的某一块内容，可以调用 UIView 的 layer 的 renderInContext: 方法。

核心代码

- (void)renderInContext:(CGContextRef)ctx;

结语

懂得如何使用 Quartz 2D 和自定义视图是 iOS 开发中的重要技能，能够帮助开发者创建高度定制化和个性化的用户界面。