Quartz 2D学习（二）绘制曲线

Quartz 2D学习（二）绘制曲线

导语

Quartz 2D是一个二维图形绘制引擎，它支持iOS环境和Mac OS X环境，为开发者提供了很多方便，它在绘图上的功能十分强大，如基于路径的绘图、透明度、阴影、颜色管理、反锯齿、PDF文档生成等。Quartz 2D作为Core Graphics框架的一部分，其中的很多数据类型和方法都是以CG为前缀的。

本篇内容将介绍CGPath的基础知识和绘制曲线的基本流程。

一、为什么要用到CGPath

上文中介绍了Graphics context的基础知识，我们可以在context中设置颜色属性，画笔粗细等各种属性，并绘制图形。
那为什么要用到CGPath呢？
首先，我们要回顾一下graphics context如何绘制路径

1. 调用CGContextBeginPath

2. 调用CGContextMoveToPoint来设置路径的起点

3. 调用CGPathAddLineToPoint, CGPathAddArc, CGPathAddRect等函数添加路径

4. 最后，我们需要调用fill或stroke来绘制出这些路径或图形。

当我们绘制路径时，Path的信息就会被Graphics context重置。
如果我们想要保存path信息，并多次使用它，我们就可以用到CGPathCreatMutable申请路径，然后用CGPathAddLintToPoint等方法来添加路径。

我们来实验一下，用CGPath来画一条曲线。

- (void)drawRect:(CGRect)rect {
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //申请路径
    CGMutablePathRef path = CGPathCreateMutable();
    //将起点设置在坐标(100, 100)处
    CGPathMoveToPoint(path, NULL, 100, 100);
    
    /*  CGPathAddArcToPoint(CGMutablePathRef  _Nullable path, const CGAffineTransform * _Nullable m, CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2, CGFloat radius)
        此方法表示从起点到(x1, y1)再到(x2, y2)的两条直线为切线的弧，radius表示弧的半径
     */
    CGPathAddArcToPoint(path, NULL, 100, 200, 300, 200, 100);
    
    //设置“画笔”颜色
    CGContextSetStrokeColorWithColor(context,
                                   [UIColor blueColor].CGColor);
    CGContextAddPath(context, path);
    CGContextStrokePath(context);
}
  

于是可以得到一个起点在(100, 100) 半径为100的蓝色曲线。

用CGPath画矩形（其他的图形类似）

- (void)drawRect:(CGRect)rect {
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //申请路径
    CGMutablePathRef path = CGPathCreateMutable();

    //此处因为CGRectMake可以设置起点，所以不需要CGPathMoveToPoint
    CGPathAddRect(path, NULL, CGRectMake(100, 100, 100, 300));
    
    //设置填充颜色
    CGContextSetFillColorWithColor(context,
                                   [UIColor blueColor].CGColor);
    CGContextAddPath(context, path);
    CGContextFillPath(context);
}

二、drawRect:

如果我们想要在iOS应用上绘制图形，就必须先申请一个UIView对象，然后实现drawRect:方法。
在视图显示在屏幕上时或者内容需要更新时，drawRect:方法会被调用。所以我们不需要手动去调用这个方法。手动更新内容的方法是setNeedsDisplay。
UIView对象的可以通过CGContextRef对当前的绘图环境进行配置，如上文提到的获取上下文，设置颜色属性，设置填充属性等。

三、绘图方法总结

1. MoveToPoint和Add...（设置点和线）

2. set path (设置线的属性)

3. stroke path（绘制，画线）

4. fill path（绘制，填充图形）

四、CGContextAddArc解释

1.CGContextAddArc

void CGPathAddArc (
   CGMutablePathRef _Nullable path,
   const CGAffineTransform * _Nullable m,
   CGFloat x,
   CGFloat y,
   CGFloat radius,
   CGFloat startAngle,
   CGFloat endAngle,
   bool clockwise
);

其中(x, y)代表圆心，sA代表起始角度，eA代表结束角度，radius代表半径，clockwise代表顺时针还是逆时针

2.CGContextAddArcToPoint

void CGPathAddArcToPoint (
   CGMutablePathRef _Nullable path,
   const CGAffineTransform * _Nullable m,
   CGFloat x1,
   CGFloat y1,
   CGFloat x2,
   CGFloat y2,
   CGFloat radius
);

P1为path的起始点，这个弧线会以两条直线为切线，radius为半径画弧。

---

参考：
苹果官方文档
stackoverflow