iOS之Quartz2D的学习

前言：Quartz2D在iOS开发中的价值；

在平时的开发过程中，利用UIKit框架提供的控件能搭建实现一些简单的UI界面，当遇到一些复杂而且个性化的界面普通UI控件无法实现，这时候可以借助Quartz2D技术来绘制内部结构，自定义控件；

Quartz2D的简单了解

Quartz2D的API是纯C语言的（iOS和OSX系统都能使用，UIKit则只能iOS系统使用）；
Quartz2D的API来源于Core Graphics框架；
数据类型和函数基本都以CG作为前缀；

使用Quartz2D来自定义view

Q：如何将Quartz2D绘制到view上？

首先，有图形上下文，因为能够保存绘图信息，并且决定绘制到什么地方去；
其次，该图形上下文必须跟view相关联，才能将内容绘制到view上。

Q：自定义view的步骤：

1，新建一个类，继承自UIView；
2，实现-(void)drawRect:(CGRet)rect方法，然后在该方法中：
--获取跟当前view相关联的图形上下文
--绘制图形内容
--利用图形上下文将绘制的所有内容渲染显示到view上

Q：为什么要实现-(void)drawRect:(CGRet)rect方法才能将图形绘制到view上？

因为在-(void)drawRect方法中能获取跟当前view相关联的图形上下文

Q：-(void)drawRect:(CGRet)rect什么时候被调用？

在view第一次显示到屏幕上时会被调用；
调用view的setNeedsDisplay方法或者setNeedsDisplayInRect：方法时；

Quartz2D绘图的代码步骤（以画直线演示）：

//1，获取图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//2，路径
CGContextMoveToPoint(context, 10, 10);
CGContextAddLineToPoint(context, 100, 100);
//3，绘制路径
CGContextStrokePath(context);

常用的路径拼接函数

//新建一个起点
void CGContextMoveToPoint(CGContextRef cg_nullable c,
    CGFloat x, CGFloat y)
//添加一条线段到某个点
void CGContextAddLineToPoint(CGContextRef cg_nullable c,
    CGFloat x, CGFloat y)
//添加一个矩形
void CGContextAddRect(CGContextRef cg_nullable c, CGRect rect)
//添加椭圆（圆）
void CGContextAddEllipseInRect(CGContextRef cg_nullable c, CGRect rect)
//添加一段圆弧
void CGContextAddArc(CGContextRef cg_nullable c, CGFloat x, CGFloat y,
    CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
//渲染--空心路径的函数
void CGContextStrokePath(CGContextRef cg_nullable c)
//渲染--实心路径的函数
void CGContextFillPath(CGContextRef cg_nullable c)

注意：在画弧时候CGContextAddArc，涉及到一个弧线的旋转方向参数：clockwise，官方文档的解释是

`clockwise' is 1 if the arc is to be drawn clockwise, 0 otherwise.

clockwise设为1为顺时针旋转，反之设为0是逆时针旋转。

大家在自己写demo时候可能会觉得文档是不是有错？得到的图形与设置的参数不一致。其实这里要理清楚Quartz2D的坐标系与iOS的坐标系是不一致的：

当我们设置clockwise为0，逆时针旋转；
当我们设置clockwise为1，顺时针旋转；

下面绘制一个饼状图：

//自定义饼状图view.h文件
#import <UIKit/UIKit.h>
@interface customView : UIView

@property (nonatomic, strong)  NSArray* dataArray;//饼状图的各个部分所组成的数组
@property (nonatomic, strong)  NSArray* colorArray;//饼状图的各个部分颜色所组成的数组

@end

//自定义饼状图view.m文件
#import "customView.h"

@implementation customView

- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    //1,获取图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //2,绘制图形
      //2.1 圆心
    CGFloat x = rect.size.width*.5;
    CGFloat y = rect.size.height*.5;
    
      //2.2 饼状图
    if (self.dataArray.count == 0) return;//如果没有数据则不绘制图形；
    
    float sum = 0;
    for (int i = 0; i<self.dataArray.count; i++) {
         sum += [self.dataArray[i] floatValue];
    }
    
    CGFloat startAngle = 0;
    for (int i = 0; i<self.dataArray.count; i++) {
        CGContextMoveToPoint(context, x, y);
#warning 当前饼图的结束角度 = 上个饼图的起始角度 + 当前饼图角度
        CGFloat endAngle = [self.dataArray[i] floatValue]/sum * 2*M_PI + startAngle;
        CGContextAddArc(context, x, y, 100, startAngle, endAngle, 0);
#warning 当前饼图的结束角度即为下一个饼图的起始角度
        startAngle = endAngle;
        
        UIColor *color = self.colorArray[i];
        [color set];
        //2.3 填充
        CGContextFillPath(context);
    }
}
@end

//在控制器view viewDidLoad方法里
/**
 * 绘制饼状图
 **/
    customView *pieView = [[customView alloc]initWithFrame:CGRectMake(50, 50, 200, 200)];
    pieView.backgroundColor = [UIColor grayColor];
    
    //在view添加之前进行传参（饼状图所需参数）
    pieView.dataArray = @[@"120.0",@"90.0",@"150.0"];
    pieView.colorArray = @[[UIColor redColor], [UIColor greenColor], [UIColor blueColor]];
    [self.view addSubview:pieView];