iOS上创建矢量图形的要求

　　矢量图形的一个巨大优势就是它可以被渲染在任意分辨率的屏幕上，同时保持绝对的平滑的且不失真。这就是为什么Post和TrueType字体在任意放大倍数下都如此清晰的原因。因为智能手机和电脑显示屏幕一般是光栅排列，所以在合适的分辨率下，矢量图形必须作为光栅图形才能在屏幕渲染。而这些底层图形库已经封装了上述实现，程序员并不需要了解。

　　1.什么时候使用矢量图形

　　让我们来考虑一下使用矢量图形的一些场景。

　　App和按钮图标，用户界面元素

　　几年前（iOS7），苹果公司在自己的app和iOS平台自身的用户界面中抛弃了拟物设计风格（skeuomorphism），而采用更扁平的精细设计。可以参考下Camera和Photo app引用的图标。

　　十有八九，这些元素是由矢量图形工具设计的。为了符合这些设计规则，开发者不得不跟随扁平化风格，这导致大部分流行的（非游戏类）app完全改变了风格。

　　游戏

　　简单图像（Asteroids）或几何主题（Super Hexagon）的游戏，能使用游戏引擎渲染矢量图形。游戏中通过代码编写的部分也采用了矢量图形。

　　图片

　　你可以随机的插入图片来获得基于相同基本图形的多个版本的图像。

　　2.贝塞尔曲线

　　什么是贝塞尔曲线？在不深入探讨数学理论情况下，我们来讨论下开发者实际用到的贝塞尔曲线特征。

　　自由度

　　贝塞尔曲线特点是它有多少的自由度。自由度越大，曲线变化越大（数学计算就越复杂）

　　一次方贝塞尔曲线就是两点的直线线段。二次方贝塞尔曲线也称作闭合曲线。三次方贝塞尔曲线（立方）是我们重点关注的，因为它在伸缩性和复杂性上提供了这种方案。

　　立方贝塞尔曲线不仅可以表示简单平滑曲线，也可以表示封闭曲线和尖端曲线（两曲线相汇与一点）。许多立方贝塞尔曲线段可以通过点对点的衔接在一起形成更复杂的形状。

　　三维贝塞尔曲线

　　立方贝塞尔曲线的形状是由它的两个端点和两个额外的描点决定它的形状的。一般来说，n次方的贝塞尔曲线有（n-1）个描点，不用计算有几个端点。

　　立方贝塞尔曲线有一个引人注目的特征是这些点有可视化的特性。连接端点和它最近的喵点的这条线是曲线的切线。这条切线是设计贝塞尔曲线形状的基础，我们会稍后深入研究这个特性。

　　几何变化

　　基于曲线的数学特性，你可以简单的在曲线上进行没有任何精度损失的几何变化，比如缩放，旋转和平移。

　　下面的图片展示了不同形状的三次方贝塞尔曲线的样本。注意绿色线就是曲线的切线。

　　3.Core Graphics和UIBezierPath类

　　在iOS和OS X平台，矢量图形底层是基于C语言的核心图形库实现的。它基于UIKit/Cocoa上层，封装面向对象的类 。它的实现者就是UIBezierPath类（OS X是NSBezierPath类），一个贝塞尔曲线理论的实现。

　　UIBezierPath类支持一次方贝塞尔曲线（就是直线端），二次方贝塞尔曲线（封闭曲线）和三次方贝塞尔曲线（三维曲线）

　　从编程角度考虑，UIBezierPath对象可以通过添加子路径的方式一个一个添加。为了实现这个方式，UIBezierPath对象持续关注currentPoint属性。每次你添加一个新的子路径段，最末端点就成为当前点，接下来的绘图操作就从这个当前点开始。你可以手动移动这个点到你想要的位置。

　　UIBezierPath类为一些常用的形状提供了便捷的方法，比如弧，圆和圆角矩形等。其内部的实现是多个子路径互相连接而成。

　　贝塞尔曲线路径形状可以是开放或封闭的，甚至可以自包含或者同时有多个封闭曲线。

　　4.入门

　　这本指南需要读者有一定的矢量图形基础。不过如果你是一位有经验的开发者但从来没使用过Core Graphics库或UIBezierPath类，你可以学习下去。但如果你是新手并且不熟悉，我建议你先阅读UIBezierPath的官方API说明（同样参考Core Graphics官方文档API）。在这篇教程中我们只会练习API中几个有限的功能。

　　话不多说，我们这就开始编写代码。在该篇教程的剩余部分，我会展现两个适合使用矢量图形的场景。

　　打开Xcode工具，创建一个新的playground文件，设置平台为iOS。顺便说一句，Xcode的playground是使用矢量图形工作变得有趣的另一个原因。你可以敲入代码并立即获得代码的可视效果。请记住你必须使用最新版的Xcode，目前的版本是7.2。