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