在iOS开发中，视图的绘制无处不在，例如使用UILable组件显示文本标签，使用UIImageView组件显示图片视图等。在日常开发中我们使用的大多数视图组件都是基于UIKit框架的，其实关于图像绘制，CoreGraphics是一个更加底层、也更加强大的图形绘制框架。

1、CGPath路径绘制

CoreGraphics核心图形框架相较于UIKit框架更加偏向底层。在OC中，CoreGraphics中的方法都是采用的C语言风格进行编写的，同时他并不支持OC的自动引用计数功能，在使用这个框架时，开发者要手动对内存进行管理。
CGPath可以理解为图形的路径，在OC工程中，他是系统定义的一个内部结构体，开发者不可以直接使用。可以使用CGPathRef和CGMutablePathRef别名作为对CGPath的引用。
下面使用代码来演示自定义绘制的视图，绘制一个闭合的圆角矩形。

- (void)drawRect:(CGRect)rect {
        //获取当前绘图上下文
        CGContextRef contentextRef = UIGraphicsGetCurrentContext();
        CGPoint center = CGPointMake(rect.size.width/2.0, rect.size.height/2.0);
        //创建圆角矩形路径,30-横向的圆角尺寸 10-纵向的圆角尺寸
        CGPathRef pathRef = CGPathCreateWithRoundedRect(CGRectMake(center.x - 50, center.y - 50, 50*2, 50*2), 30, 10, nil);
        //将路线虚化
        CGFloat floats[] = {10,5};
        //创建虚线路径-path：虚线的逻辑，phase：从lengths数组的第几部分开始绘制虚线，lengths：表示每段虚线的长度，例如传入的是{10，5}则表示虚线先绘制长度为10的实现，再绘制长度为5的空白，如此循环；count：设置为lengths数组的长度
    
    //    CGPathCreateCopyByDashingPath(<#CGPathRef  _Nullable path#>, <#const CGAffineTransform * _Nullable transform#>, <#CGFloat phase#>, <#const CGFloat * _Nullable lengths#>, <#size_t count#>)
        pathRef = CGPathCreateCopyByDashingPath(pathRef, nil, 0, floats, 2);
        //设置绘制颜色
        [[UIColor blackColor] setStroke];
        //将路径添加到绘图上下文中
        CGContextAddPath(contentextRef, pathRef);
        //进行绘制
        CGContextDrawPath(contentextRef, kCGPathStroke);
        //释放内存
        CGPathRelease(pathRef);
}

效果图如下：

image.png

CGPath除了上面的简单的绘制方法外，还有如下的更多复杂的方法：

  //将路径移动到一个点作为起始
CG_EXTERN void CGPathMoveToPoint(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m, CGFloat x, CGFloat y)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//将路径移到某个点画出一条线
CG_EXTERN void CGPathAddLineToPoint(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m, CGFloat x, CGFloat y)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//向路径中添加一段二次贝济埃曲线
/*
cpx:控制点的X坐标
cpy:控制点的Y坐标
*/
CG_EXTERN void CGPathAddQuadCurveToPoint(CGMutablePathRef cg_nullable path,
    const CGAffineTransform *__nullable m, CGFloat cpx, CGFloat cpy,
    CGFloat x, CGFloat y)
    CG_AVAILABLE_STARTING(10.2, 2.0);
//添加一段三次贝济埃曲线
CG_EXTERN void CGPathAddCurveToPoint(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m, CGFloat cp1x, CGFloat cp1y,
    CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//闭合路径，在调用这个方法后，路径最后的端点讲和起点闭合
CG_EXTERN void CGPathCloseSubpath(CGMutablePathRef cg_nullable path)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//向路径中追加一个矩形
CG_EXTERN void CGPathAddRect(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m, CGRect rect)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//向路径中追加一组矩形
CG_EXTERN void CGPathAddRects(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m, const CGRect * __nullable rects,
    size_t count)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//向路径中追加一条线
CG_EXTERN void CGPathAddLines(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m, const CGPoint * __nullable points,
    size_t count)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//添加椭圆
CG_EXTERN void CGPathAddEllipseInRect(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m, CGRect rect)
    CG_AVAILABLE_STARTING(10.4, 2.0);

//向路径中追加一组圆弧
/*
X:圆心x坐标
y:圆心y坐标
radius：弧线半径
startAngle：起始角度
delta：圆弧绘制的长度为弧度制，2π位整个圆
*/
CG_EXTERN void CGPathAddRelativeArc(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable matrix, CGFloat x, CGFloat y,
    CGFloat radius, CGFloat startAngle, CGFloat delta)
    CG_AVAILABLE_STARTING(10.7, 5.0);

//向路径中追加一组圆弧
/*
X:圆心x坐标
y:圆心y坐标
radius：弧线半径
startAngle：起始角度
endAngle：终止角度
clockwise：是否沿顺时针方向绘制
*/
CG_EXTERN void CGPathAddArc(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m,
    CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle,
    bool clockwise)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//向路径中追加一段圆弧，弧线是以（x1,y1）到（x2,y2）为切线的弧线
CG_EXTERN void CGPathAddArcToPoint(CGMutablePathRef cg_nullable path,
    const CGAffineTransform * __nullable m, CGFloat x1, CGFloat y1,
    CGFloat x2, CGFloat y2, CGFloat radius)
    CG_AVAILABLE_STARTING(10.2, 2.0);

//向路径中追加一段路径
CG_EXTERN void CGPathAddPath(CGMutablePathRef cg_nullable path1,
    const CGAffineTransform * __nullable m, CGPathRef cg_nullable path2)
    CG_AVAILABLE_STARTING(10.2, 2.0);

例如我们用下面的代码来绘制更具复杂的图形：

- (void)drawRect:(CGRect)rect {
    //获取当前绘图上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    CGPoint center = CGPointMake(rect.size.width/2.0, rect.size.height/2.0);
    //创建可变路径
    CGMutablePathRef pathRef = CGPathCreateMutable();
    //创建起始点
    CGPathMoveToPoint(pathRef, nil, center.x, center.y-50);
    //将路径移到某个点画出一条线
    CGPathAddLineToPoint(pathRef, nil, center.x+100, center.y-20);
//    //向路径中添加一段二次贝济埃曲线
    CGPathAddQuadCurveToPoint(pathRef, nil, 0, 0, center.x+100, center.y - 100);
//    //向路径中追加一组圆弧
    CGPathAddRelativeArc(pathRef, nil, 100, 100, 50, 0, M_PI);
    // 闭合路径
    CGPathCloseSubpath(pathRef);
    [[UIColor blackColor] setStroke];
    //将路径添加到绘图上下文中
    CGContextAddPath(contextRef, pathRef);
    //进行绘制
    CGContextDrawPath(contextRef, kCGPathStroke);
    //释放内存
    CGPathRelease(pathRef);
}

效果如下图：

image.png

下面为一些CGPath相关的工具方法：

//判断某个路径是否为空
bool CGPathIsEmpty(CGPathRef cg_nullable path);

//判断某个路径是否为某个矩形
bool CGPathIsRect(CGPathRef cg_nullable path, CGRect * __nullable rect);

//获取某个路径当前绘制的所在的点
CGPoint CGPathGetCurrentPoint(CGPathRef cg_nullable path);

//获取某个路径包含的所有点的尺寸
CGRect CGPathGetBoundingBox(CGPathRef cg_nullable path);

//获取某个路径的尺寸
CGRect CGPathGetPathBoundingBox(CGPathRef cg_nullable path);

//判断路径是否包含某个点
bool CGPathContainsPoint(CGPathRef cg_nullable path,
    const CGAffineTransform * __nullable m, CGPoint point, bool eoFill);

2、理解图形上下文

GraphicsContext对于开发者来说是完全透明的，我们不需要关系他的实现，也不需要关心其绘制方式，而只需要将要绘制的内容船体给图形上下文，由图形上下文来讲内容绘制到对应的目标上。这里需要注意的是，绘制的顺序十分重要！如果后绘制的内容和先绘制的内容有位置冲突，则后绘制的内容会覆盖先绘制的内容。
特定的上下文用于将内容绘制到特定的输出源上，在CoreGraphics中提供如下几种图形上下文：

*位图图形上下文：用于将RGB图像、GMYK图像或黑白图像会知道一个位图对象中。
*PDF图形上下文：可以帮助开发者创建PDF文件，将内容绘制进PDF文件中。与位图上下文最大的区别在于其PDF数据可以保存多页数据。
*窗口上下文：用于iOS系统中的窗口绘制。
*图层上下文：用于将内容绘制在Layer图层上。
*打印上下文：当使用Mac打印功能时，此上下文用于将内容绘制在打印输出源上。

3、关于层聚合

在正常情况下，当使用CoreGraphics框架中的方法进行图形绘制时，每一闭合的图形都是一个独立的层，如果在绘制时添加了阴影效果，则可以很明显的看到图形的分层情况：

- (void)drawRect:(CGRect)rect {
    float width = rect.size.width/2.0;
    CGPoint center = CGPointMake(width, rect.size.height/2.0);
    CGSize myShadowOffset = CGSizeMake(10, -20);
    //获取上下文
    CGContextRef myContext = UIGraphicsGetCurrentContext();
    CGContextSetShadow(myContext, myShadowOffset, 10);
    //绘制三个圆
    CGContextSetRGBFillColor(myContext, 0, 1, 0, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/2, center.y-width/4*3, width, width));
    
    CGContextSetRGBFillColor(myContext, 0, 0, 1, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/4, center.y-width/3, width, width));
    
    CGContextSetRGBFillColor(myContext, 1, 0, 0, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/4*3, center.y-width/4, width, width));
}

效果如下图:

image.png

从图中可以发现，所绘制的3个圆并非位于同一层级上。那么如果我们有这样的需求：在园内的阴影不应该存在，只有圆外的阴影才可以有。这样的需求应该是很普遍的。在CoreGraphics中也提供了进行图形聚合绘制的方法：

- (void)drawRect:(CGRect)rect {
        float width = rect.size.width/2.0;
    CGPoint center = CGPointMake(width, rect.size.height/2.0);
    CGSize myShadowOffset = CGSizeMake(10, -20);
    //获取上下文
    CGContextRef myContext = UIGraphicsGetCurrentContext();
    CGContextSetShadow(myContext, myShadowOffset, 10);
    
    CGContextBeginTransparencyLayer(myContext, NULL);
    //开启图形聚合绘制
    //后续的绘制代码都将绘制到统一的图层上
    //绘制三个圆
    CGContextSetRGBFillColor(myContext, 0, 1, 0, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/2, center.y-width/4*3, width, width));
    
    CGContextSetRGBFillColor(myContext, 0, 0, 1, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/4, center.y-width/3, width, width));
    
    CGContextSetRGBFillColor(myContext, 1, 0, 0, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/4*3, center.y-width/4, width, width));
    //结束聚合绘制
    CGContextEndTransparencyLayer(myContext);
}

效果图如下：

image.png