一. Core Graphics简介

1. Core Graphics是一个基于C的绘图专用的API族，它经常被称为QuartZ或QuartZ 2D，是一个二维绘图引擎，同时支持iOS和Mac系统。它提供了低级别、轻量级、高保真度的2D渲染。该框架可以用于基于路径的绘图、变换、颜色管理、脱屏渲染，模板、渐变。 
   提示： 
   引擎：经过包装的函数库，方便开发者使用。QuartZ 2D是苹果帮封装的一套绘图的函数库。 
   同时支持iOS和Mac系统：用QuartZ 2D写的同一份代码，既可以运行在iphone上又可以运行在mac上，可以跨平台开发。

2. QuartZ 2D在开发中比较常用的是截屏/裁剪/自定义UI控件，QuartZ 2D在iOS开发中的主要价值是自定义UI控件

3. QuartZ 2D能完成的工作 
   (1).绘制图形: 线条\三角形\矩形\圆\弧等 
   (2).绘制文字 
   (3).绘制\生成图片(图像) 
   (4).读取\生成PDF 
   (5).截图\裁剪图片 
   (6).自定义UI控件

二. 图形上下文(Graphics Context)

1. 图形上下文是一个CGContextRef类型的数据，图形上下文相当于画板，用于封装绘图信息(画了什么)和绘图状态(线条大小、颜色等)，它决定绘制的输出目标(绘制到什么地方去)，目标可以是PDF文件、bitmap或者显示器的窗口。

2. 相同的一套绘图序列，指定不同的图形上下文，就可将相同的图像绘制到不同的目标上，目标可以是PDF文件、bitmap或者显示器的窗口。

3. QuartZ 2D提供了 5 种类型的图形上下文：Bitmap Graphics Context、PDF Graphics Context、Window Graphics Context、Layer Context、Post Graphics Context。

4. 在UIView中，系统会默认创建一个Layer Graphics Context，它对应UIView的layer属性，该图形上下文可以在drawRect:方法中获取，开发者只能获取，不能自己重新创建，在该图层上下文中绘制的图形，最终会通过CALayer显示出来。因此，View之所以能显示东西，完全是因为它内部的layer。

三. 图形上下文的图形状态堆栈

图形上下文中包含一个保存过的图形状态堆栈。在QuartZ 2D创建图形上下文时，该堆栈是空的。 
CGContextSaveGState()函数的作用是将当前图形状态推入堆栈。之后，您对图形状态所做的修改会影响随后的描画操作，但不影响存储在堆栈中的拷贝。在修改完成后，您可以通过CGContextRestoreGState()函数把堆栈顶部的状态弹出，返回到之前的图形状态。这种推入和弹出的方式是回到之前图形状态的快速方法，避免逐个撤消所有的状态修改；这也是将某些状态（比如裁剪路径）恢复到原有设置的唯一方式。

四. UIView和CALayer的区别

1. 对于继承 
   UIView —> UIResponder —> NSObject 
   CALayer —> NSObject

2. 对于响应用户事件 
   UIView继承自UIResponder，UIResponder是用来响应事件的，所以UIView可以响应事件 
   CALayer直接继承于NSObject，所以CALayer不能响应事件

3. 对于所属框架 
   UIView是在/System/Library/Frameworks/UIKit.framework中定义，UIKit主要是用来构建用户界面，并且是可以响应事件的 
   CALayer是在/System/Library/Frameworks/QuartzCore.framework定义，2D图像绘制都是通过QuartzCore.framework实现的

4. 对于基本属性 
   UIView：position、size、transform 
   CALayer：position、size、transform、animations

5. 总结 
   UIView相比CALayer最大区别是UIView可以响应用户事件，而CALayer不可以。UIView侧重于对显示内容的管理，CALayer侧重于对内容的绘制。对于UIView所管理的内容，显示任何图形都会受到CALayer的影响。UIView依赖于CALayer提供的内容，CALayer依赖于UIView提供的容器来显示绘制的内容。UIView与CALayer都有树状层级结构，CALayer内部有SubLayers，UIView内部也有SubViews。

五. UIView的显示原理

因为UIView依赖于CALayer提供的内容，而CALayer又依赖于UIView提供的容器来显示绘制的内容，所以UIView的显示可以说是CALayer要显示绘制的图形。当要显示时，CALayer会准备好一个CGContextRef(图形上下文)，然后调用它的delegate(这里就是UIView)的drawLayer:inContext:方法，并且传入已经准备好的CGContextRef对象，在drawLayer:inContext:方法中UIView又会调用自己的drawRect:方法。

我们可以把UIView的显示比作“在电脑上使用播放器播放U盘上得电影”，播放器相当于UIView，视频解码器相当于CALayer，U盘相当于CGContextRef，电影相当于绘制的图形信息。不同的图形上下文可以想象成不同接口的U盘。

注意：当我们需要绘图到根层上时，一般在drawRect:方法中绘制，不建议在drawLayer:inContext:方法中绘图

六. 绘图的步骤

方法一：最原始的绘图方式

1. 获取当前控件的图形上下文
2. 描述绘画内容 
   a. 创建图形路径 
   b. 创建图形起始点 
   c. 添加图形的终点
3. 把绘画内容添加到图形上下文
4. 设置图形上下文的状态（线宽、颜色等）
5. 渲染图形上下文

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)drawRect:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRect</span>)rect {
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1. 获取当前控件的图形上下文</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// CG:表示这个类在CoreGraphics框架里  Ref:引用</span>CGContextRef context = UIGraphicsGetCurrentContext();
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 描述绘画内容</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    a. 创建图形路径</span>CGMutablePathRef path = CGPathCreateMutable();
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    b. 创建图形起始点</span>CGPathMoveToPoint(path, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NULL</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    c. 添加图形的终点</span>CGPathAddLineToPoint(path, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NULL</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 把绘画内容添加到图形上下文</span>CGContextAddPath(context, path);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 设置图形上下文的状态（线宽、颜色等）</span>CGContextSetLineWidth(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>);CGContextSetRGBStrokeColor(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 5. 渲染图形上下文 </span>CGContextStrokePath(context);
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

解析： 
1.drawRect方法是在当前控件要显示的时候才去调用，并且drawRect方法只能系统调用，不能手动调用，手动调用setNeedDispplay方法或setNeedsDisplayInRect:方法，系统才会去调用drawRect。

系统默认：viewWillAppear —> drawRect —> viewDidAppear 
手动调用：setNeedDispplay —> drawRect

2.- (void)drawRect:(CGRect)rect;中的rect的值是当前控件的bounds值。

3.描述绘画内容相当于描述图形的路径，其实也就是设置图形的各个关键点，但是还没有真正画线，只有起点和终点绘制的图形是一条直线，画线是在view要显示的时候才进行，但路径添加到上下文后必须渲染上下文，不然图形不会显示在view上。

获取图形上下文 —> 创建图形路径 —> 设置路径 —> 设置上下文状态 —> 路径添加到上下文 —> 渲染上下文 —> 在view上显示

4.一条路径连续多次调用addLineToPoint函数添加点，它的路径是拼接的，默认下一条线的起点是上一条线的终点。

5.当要画多根不连续的线，方法一：创建不同的路径再添加线段需要的点，方法二：同一个路径，按步骤画完第一条线，第二条线是重新设置起始点再设置需要的点。

6.可以创建多个路径，多个路径可以绘制多个图形，但是使用原始方法绘图不能单独管理图形的状态(线条、颜色等)。

方法二：使用上下文直接绘图

注意：不用创建路径，也不需要把绘图内容添加到图形上下文，因为图形上下文封装了这些步骤。

1. 获取当前控件的图形上下文
2. 描述绘画内容 
   a. 创建图形起始点 
   b. 添加图形的终点
3. 设置图形上下文的状态（线宽、颜色等）
4. 渲染图形上下文

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (void)drawRect<span class="hljs-value" style="box-sizing: border-box;">:(CGRect)rect {  // <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>. 获取当前控件的图形上下文CGContextRef context = UIGraphicsGetCurrentContext();</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 描述绘画内容</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// a. 创建图形起始点</span><span class="hljs-function" style="box-sizing: border-box;">CGContextMoveToPoint(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>)</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// b. 添加图形的终点</span><span class="hljs-function" style="box-sizing: border-box;">CGContextAddLineToPoint(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>)</span>;<span class="hljs-function" style="box-sizing: border-box;">CGContextAddLineToPoint(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">55</span>)</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 设置图形上下文的状态（线宽、颜色等）</span><span class="hljs-function" style="box-sizing: border-box;">CGContextSetLineWidth(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>)</span>;<span class="hljs-function" style="box-sizing: border-box;">CGContextSetCMYKStrokeColor(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>)</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 渲染图形上下文</span><span class="hljs-function" style="box-sizing: border-box;">CGContextStrokePath(context)</span>;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

方法三：贝瑟尔路径(UIBezierPath)绘图

提示：

1. UIKit已经封装了一些绘图的功能：UIBezierPath，里面封装了很多东西，可以帮我画一些基本的线段，矩形，圆等等，一般开发中用贝塞尔路径绘图。
2. CGPath转换：UIKit框架转CoreGraphics直接 .CGPath 就能转换 
   优点： 用UIBezierPath 画多根不连接的线，可以管理各个线的状态

注意： 
使用贝瑟尔路径绘图只能在drawRect里进行，因为底层要用到上下文，图形上下文只能在drawRect里获取，不能在其他方法里面绘图，比如：不能在awakeFromNib里绘图！

1. 创建贝瑟尔路径
2. 描述绘画内容 
   a. 创建图形起始点(moveToPoint) 
   b. 添加图形的终点(addLineToPoint)
3. 设置路径状态
4. 绘制路径

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)drawRect:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRect</span>)rect {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1. 创建贝瑟尔路径</span>UIBezierPath *path = [UIBezierPath bezierPath];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 设置起点</span>[path moveToPoint:CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>)];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 设置终点</span>[path addLineToPoint:CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">80</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>)];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 设置路径状态</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置颜色</span>[[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> redColor] set];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置线宽</span>[path setLineWidth:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 绘制路径</span>[path stroke];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1. 创建贝瑟尔路径</span>UIBezierPath *path1 = [UIBezierPath bezierPath];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 设置起点</span>[path1 moveToPoint:CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>)];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 设置拐点</span>[path1 addLineToPoint:CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>)];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 设置终点</span>[path1 addLineToPoint:CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">230</span>)];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 设置路径状态</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置颜色</span>[[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> blueColor] set];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置线宽</span>[path1 setLineWidth:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置连接样式</span>[path1 setLineJoinStyle:kCGLineJoinRound];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置顶角样式</span>[path1 setLineCapStyle:kCGLineCapRound];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 绘制路径</span>[path1 stroke];}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li></ul>

七. 绘制曲线

方法一：最原始绘图方法

1. 获取当前控件的图形上下文
2. 描述绘画图形内容 
   a. 获取图形路径 
   b. 添加起始点 
   c. 添加控制点和终点
3. 把绘制图形内容添加到图形上下文
4. 设置图形上下文状态
5. 渲染图形上下文

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)drawRect:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRect</span>)rect {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1. 获取当前控件的图形上下文</span>CGContextRef context = UIGraphicsGetCurrentContext();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 描述绘画图形内容</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// a. 获取图形路径</span>CGMutablePathRef path = CGPathCreateMutable();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// b. 添加起始点</span>CGPathMoveToPoint(path, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NULL</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// C. 添加控制点和终点，控制点(150,150)、终点(0,250)</span>CGPathAddQuadCurveToPoint(path, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NULL</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">250</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">250</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 把绘制图形内容添加到图形上下文</span>CGContextAddPath(context, path);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 设置图形上下文状态</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置颜色</span>[[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> redColor] set];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置线宽</span>CGContextSetLineWidth(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 5. 渲染图形上下文</span>CGContextStrokePath(context);
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li></ul>

方法二：使用上下文直接绘图

1. 获取当前控件的图形上下文
2. 描述绘画图形内容 
   a. 创建图形起始点 
   b. 添加控制点和终点
3. 设置图形上下文状态
4. 渲染图形上下文

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (void)drawRect<span class="hljs-value" style="box-sizing: border-box;">:(CGRect)rect {// <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>. 获取当前控件的图形上下文CGContextRef context = UIGraphicsGetCurrentContext();</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 描述绘画图形内容</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// a. 创建图形起始点</span><span class="hljs-function" style="box-sizing: border-box;">CGContextMoveToPoint(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>)</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// b. 添加控制点和终点,控制点(300,200)，终点(0,250)</span><span class="hljs-function" style="box-sizing: border-box;">CGContextAddQuadCurveToPoint(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">300</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">200</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">250</span>)</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 设置图形上下文状态</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置颜色</span><span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[[UIColor redColor]</span> set];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置线宽</span><span class="hljs-function" style="box-sizing: border-box;">CGContextSetLineWidth(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>)</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 渲染图形上下文</span><span class="hljs-function" style="box-sizing: border-box;">CGContextStrokePath(context)</span>;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>

八. 绘制图形

常见问题： 
1. 关闭路径closePath：从路径的终点连接到起点 
2. 填充路径CGContextFillPath：有了封闭的路径就能填充。 
3. 设置填充颜色 [[UIColor blueColor] setFill]; 
4. 设置描边颜色 [[UIColor redColor] setStroke]; 
5. 不显示描边颜色，为什么?没有设置线宽 
6. 设置线宽，还是不显示，为什么?因为绘制路径不对。 
7. 即填充又描边CGContextDrawPath:kCGPathFillStroke。 
8. 圆的起点在圆右边水平线

(一). 圆角矩形

<code class="hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// RoundedRect: 坐标与宽高</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// cornerRadius: 角半径</span>UIBezierPath *oblongPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>) cornerRadius:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 颜色</span>[[UIColor redColor] <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 填充</span>[oblongPath fill];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

(二). 扇形

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 扇形</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Center：圆心</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// startAngle:弧度</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// clockwise:YES:顺时针 NO：逆时针</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGPoint</span> center = CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>);UIBezierPath *sectorPath = [UIBezierPath bezierPathWithArcCenter:center radius:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span> startAngle:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> endAngle:M_PI clockwise:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 从终点连线到圆心</span>[sectorPath addLineToPoint:center];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 颜色</span>[[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> blueColor] set];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    // 关闭路径，从终点连线到起始点</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    [sectorPath closePath];</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    // 描边</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    [sectorPath stroke];</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 填充：必须是一个完整的封闭路径,默认就会自动关闭路径</span>[sectorPath fill];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>

九. 上下文的状态栈

<code class="hljs erlang has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-pp" style="box-sizing: border-box;">- <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(void)</span>drawRect:<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">CGRect</span>)</span>rect {// 获取上下文CGContextRef context = UIGraphicsGetCurrentContext<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>;// 描述图形内容// 第一根线UIBezierPath *path1 = [UIBezierPath bezierPath];[path1 moveToPoint:CGPointMake<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>)</span>];[path1 addLineToPoint:CGPointMake<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>)</span>];// 把第一根添加到上下文CGContextAddPath<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(context, path1.<span class="hljs-variable" style="box-sizing: border-box;">CGPath</span>)</span>;// 保存一份初始的上下文状态CGContextSaveGState<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(context)</span>;// 设置上下文状态[[UIColor redColor] set];CGContextSetLineWidth<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>)</span>;// 渲染上下文CGContextStrokePath<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(context)</span>;// 第二根线UIBezierPath *path2 = [UIBezierPath bezierPath];[path2 moveToPoint:CGPointMake<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>)</span>];[path2 addLineToPoint:CGPointMake<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">150</span>)</span>];// 添加到上下文CGContextAddPath<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(context, path2.<span class="hljs-variable" style="box-sizing: border-box;">CGPath</span>)</span>;// 还原上下文状态CGContextRestoreGState<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(context)</span>;// 渲染上下文CGContextStrokePath<span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(context)</span>;}</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li></ul>

十. 上下文的矩阵操作

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)drawRect:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRect</span>)rect {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 获取上下文</span>CGContextRef context = UIGraphicsGetCurrentContext();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建路径</span>UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>)];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 矩阵操作</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 移动</span>CGContextTranslateCTM(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">100</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 缩放</span>CGContextScaleCTM(context, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 旋转</span>CGContextRotateCTM(context, M_PI_4);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 把路径添加到上下文</span>CGContextAddPath(context, path<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.CGPath</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置颜色</span>[[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> blueColor] set];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 渲染上下文</span>CGContextStrokePath(context);}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul>

十一. 图片水印

1. 开启位图上下文
2. 描述绘画内容 
   a. 绘制图片 
   b. 绘制文字 
   C. 绘制图形等
3. 从位图上下文获取生成的图片
4. 关闭位图上下文

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)viewDidLoad {[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> viewDidLoad];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建图片</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> *logoImage = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> imageNamed:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"小黄人"</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1. 开启位图上下文</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 注意: 位图上下文跟view无关联，所以不需要在drawRect中获取上下文</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// size: 位图上下文的尺寸（绘制出新图片的尺寸）</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// opaque: 是否透明，YES：不透明  NO：透明，通常设置成透明的上下文</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// scale: 缩放上下文，取值0表示不缩放，通常不需要缩放上下文</span>UIGraphicsBeginImageContextWithOptions(logoImage<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span>, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 描述绘画内容</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 绘制原生图片</span>[logoImage drawAtPoint:CGPointZero];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 绘制文字</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSString</span> *logo = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"小黄人"</span>;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建字典属性</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSMutableDictionary</span> *dict = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSMutableDictionary</span> dictionary];dict[NSForegroundColorAttributeName] = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> redColor];dict[NSFontAttributeName] = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIFont</span> systemFontOfSize:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>];[logo drawAtPoint:CGPointMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">51</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">27</span>) withAttributes:dict];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 绘制图形</span>UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>)];[[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> redColor] set];[path fill];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 从上下文获取生成的图片</span>_logoImage<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.image</span> = UIGraphicsGetImageFromCurrentImageContext();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 关闭位图上下文</span>UIGraphicsEndImageContext();}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li></ul>

提示： 
1. 位图上下文跟view无关联，所以不需要在drawRect中获取上下文 
2. UIGraphicsGetCurrentContext()函数可以获取的不同类型的上下文，CGContextRef变量可以指向不同类型上下文 
3. 在位图上下文上绘制图形，必须获取位图上下文生成的图片，再显示图片才可以看见绘制的图形 
4. 位图上下文的获取方式跟layer上下文不一样，位图上下文需要手动创建

十二. 图片裁剪

1. 开启位图上下文
2. 设置裁剪区
3. 绘制图片
4. 从位图上下文获取生成的图片
5. 关闭位图上下文

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)viewDidLoad {[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> viewDidLoad];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建图片</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> *image = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> imageNamed:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"阿狸头像"</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1. 开启上下文</span>UIGraphicsBeginImageContextWithOptions(image<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span>, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 设置裁剪区</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建图形路径</span>UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, image<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.width</span>, image<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.height</span>)];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 把图形路径设置为裁剪区</span>[path addClip];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 绘制图形</span>[image drawAtPoint:CGPointZero];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 从位图上下文获取图片</span>_SJMImage<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.image</span> = UIGraphicsGetImageFromCurrentImageContext();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 5. 关闭上下文</span>UIGraphicsEndImageContext();}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>

十三. 屏幕截屏

1. 开启一个位图上下文
2. 获取位图上下文
3. 把屏幕上的图层渲染到图形上下文
4. 从位图上下文获取图片
5. 关闭上下文
6. 存储图片

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)viewDidLoad {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1. 开启一个位图上下文</span>UIGraphicsBeginImageContextWithOptions(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.bounds</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size</span>, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2. 获取位图上下文</span>CGContextRef ctx = UIGraphicsGetCurrentContext();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3. 把屏幕上的图层渲染到图形上下文</span>[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.layer</span> renderInContext:ctx];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4. 从位图上下文获取图片</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> *image = UIGraphicsGetImageFromCurrentImageContext();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 5. 关闭上下文</span>UIGraphicsEndImageContext();<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 6. 存储图片</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// image转data</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// compressionQuality:图片质量  1:最高质量</span>NSData *data = UIImageJPEGRepresentation(image,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>);[data writeToFile:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/Users/SJM/Desktop/view.png"</span> atomically:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>];}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li></ul>

十四. 提高描画的性能

1. 合成不透明的视图所需要的开销比合成部分透明的视图要少得多。一个不透明的视图必须不包含任何透明的内容，且视图的opaque属性必须设置为YES。
2. 如果一个PNG图像的每个像素都是不透明的，则将其alpha通道删除可以避免对包含该图像的图层进行融合操作，从而很大程度上简化了该图像的合成，提高描画的性能。
3. 在每个更新周期中，您应该只更新视图中真正发生变化的部分。如果您使用UIView的drawRect:方法来进行描画，则要通过传给该方法的更新矩形来限制描画的范围。对于基于OpenGL的描画，您必须自行跟踪更新区域。
4. 应该避免在滚动过程种创建新的视图。创建新视图的开销会减少用于更新屏幕的时间，因而导致滚动不平滑。
5. 缺省情况下，在调用drawRect:方法对视图的某个区域进行更新之前，UIKit会清除该区域对应的上下文缓冲区。如果您对视图的滚动事件进行响应，则在滚动过程中反复清除缓冲区的开销是很大的。为了禁止这种行为，可以将clearsContextBeforeDrawing属性设置为NO。
6. 改变图形状态需要窗口服务器的参与。如果您要描画的内容使用类似的图形状态，则尽可能将这些内容一起描画，以减少需要改变的状态。

十五. 保持图像的质量

1. 为用户界面提供高品质的图像应该是设计工作中的重点之一。图像是一种合理而有效的显示复杂图形的方法，任何合适的地方都可以使用。在为应用程序创建图像的时候，请记住下面的原则：
2. 使用PNG格式的图像。PNG格式可以提供高品质的图像内容，是iPhone OS系统上推荐的图像格式。另外，iPhone OS对PNG图像的描画路径是经过优化的，通常比其它格式具有更高的效率。
3. 创建大小合适的图像，避免在显示时调整尺寸。如果您计划使用特定尺寸的图像，则在创建图像资源时，务必使用相同的尺寸。不要创建一个大的图像，然后再缩小，因为缩放需要额外的CPU开销，而且需要进行插值。如果您需要以不同的尺寸显示图像，则请包含多个版本的图像，并选择与目标尺寸相对接近的图像来进行缩放。

十六. CGContextDrawImage使用提示

使用CGContextDrawImage()函数来直接描画位图，则在缺省情况下，图像数据会上下倒置，因为Quartz图像假定坐标系统的原点在左下角，且坐标轴的正向是向上和向右。

要达到预想的效果必须变换坐标系，代码如下：

void drawImage(CGContextRef context, CGImageRef image , CGRect rect){

　　　CGContextSaveGState(context);

CGContextTranslateCTM(context, rect.origin.x, rect.origin.y);//4

CGContextTranslateCTM(context, 0, rect.size.height);//3

CGContextScaleCTM(context, 1.0, -1.0);//2

CGContextTranslateCTM(context, -rect.origin.x, -rect.origin.y);//1

CGContextDrawImage(context, rect, image);

CGContextRestoreGState(context);

}

A到B变换 通过1->2->3->4步骤实现的，这样好理解些

通常我会用UIImage drawInRect实现想要的功能。

iOS开发－－Core Graphics绘图相关推荐

1. iOS Core Graphics绘图

   Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎.它提供了低级别.轻量级.高保真度的2D渲染. 上下文 Core Graphics API所有的操 ...

2. IOS开发基础之绘图的样式

   IOS开发基础之绘图的样式 // LJView.m // 33-绘图的样式 // Created by 鲁军 on 2021/2/23. #import "LJView.h" @i ...

3. iOS 图形处理 Core Graphics Quartz2D 教程

   Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎.它提供了低级别.轻量级.高保真度的2D渲染.该框架可以用于基于路径的绘图.变换.颜色管理.脱屏渲 ...

4. iOS开发:Core Animation编程指南

   关于Core Animation Core Animation是iOS与OS X平台上负责图形渲染与动画的基础设施.Core Animation可以动画视图和其他的可视元素.Core Animatio ...

5. iOS开发之高效绘图，通过一个绘图应用进行讲解

   软件绘图 术语绘图通常在Core Animation的上下文中指代软件绘图(意即:不由GPU协助的绘图).在iOS中,软件绘图通常是由Core Graphics框架完成来完成.但是,在一些必要的情况下 ...

6. iOS开发 - Core Animation 核心动画

   Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现 ...

7. iOS开发 高级绘图

   概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Co ...

8. iOS 开发值得拥有的75 个工具

   ios开发这门技术更新的速度非常快,当然它的一些工具啊使用技巧啊也是非常的多,不知道这些相关的内容作为ios开发者的人都已经掌握了吗?下面是小编跟大家一起分享的ios开发的一些工具.   灵感   p ...

9. Swift Core Graphics教程之Gradients 与 Context

   原文链接 : Core Graphics Tutorial Part 2: Gradients and Contexts 原文作者 : caroline 译文出自 : 开发技术前线 译者 : Harr ...

最新文章

1. django之ORM介绍与基本用法（一）
2. 通过ITypedList实现数据绑定扁平化
3. 利用OpenCV进行人脸识别
4. Java图片处理（二）图片加水印
5. 加密货币的时代，真的来临了吗？
6. 完全复制一个dict_关于Excel工作表复制里面列宽的介绍
7. python创建txt文件并写入-python创建txt文件
8. 【转】ASPNET程序中常用的三十三种代码
9. 【Qt学习笔记】10.主窗口 The Main Window
10. 点击按钮复制指定代码
11. “爱装X”开源组织：“教科书级”AI知识树究竟长什么样？
12. AIDA64 Extreme Edition（硬件检测）多国语言绿色特别版
13. 谈一谈PAC学习理论
14. 小米手机自动进入Recovery恢复模式，且不停重启
15. JavaScript_牛客网_编程初学者入门训练（21-30题解）
16. 什么？人类一败涂地手游竟然上线了？教你最快的安装方法
17. 亲历骗子通过闲鱼、江苏猎宝网络科技股份有限公司进行诈骗！
18. 自然增长率，到底怎么算才合理！
19. n维椭球体积公式_洛氏硬度、布氏硬度、维氏硬度区别与对照
20. docker之容器常用命令及基本操作

热门文章

1. 技术大佬们都是怎么学习的？
2. 计算机专业的学生应当如何规划他的专业学习
3. latex—中文目录乱码
4. 新媒体时代的公关怎么做
5. 《杜拉拉升职记》的体会-勤奋的重要性
6. linux进程调度算法,关于嵌入式Linux系统实时进程调度算法系统详解
7. 北大数学系「扫地僧」韦东奕爆红！拒绝哈佛offer，留任北大，却因长相引热议...
8. java设计模式-观察者模式和中介者模式的异同
9. excel vba如何在不打开的情况下获取.pdf文件的打印页码数
10. 程序员忽悠女朋友玩gal