PaintCode 教程

本文译自Ranwenderlich的这篇:

PaintCode是个非常棒又小而美的mac程序，主要用途是可以将你的矢量图轻松地转换成CoreGraphics代码，可以很轻松的把代码放在你的iOS app里。（好处当然是降低了图片的使用率，app容量大大减小，而且做动效也容易了很多。）

它不单单是把矢量图转换为代码，更重要的是这些代码生成的图像都是动态的，意味着你可以方便的改变他们的颜色，大小，布局。一切能通过代码更改的。

在这个教程，你将会学习如何使用PaintCode制作两个素材，一个时钟和时钟的指针。并且可以导出为StyleKit（你可以简单的理解为代码文件，.h.m什么的），用在你的app里。

StyleKit导出的代码文件可以包含很多东西，例如颜色，渐变色或者阴影等等。如果你更改了素材，你可以随时使用paintcode导出新的StyleKit。

这是我们将要使用paintcode制作的素材。并且还会添加一些动效，让这个时钟转起来。

正式开始

打开我们的PaintCode（最好是正式版而不是试用版），新建一个Document。
现在界面是这样的。

paintcode默认帮我们生成了一个canvas，就类似于画图软件里面的画布，然后查看我们的右侧，有一个面板。

这就是属性面板，看起来有点像我们XIB里面的属性面板，包括size什么的。

ok，在属性面板里给我们的canvas起个名字，就叫“Stopwatch”好了。

然后在我们的Code Export下拉框里，选择StyleKit Drawing & Image Method这个选项。

这个选项的意思就是说，等一会我们生成的代码里，既包含绘画的路径代码（一堆贝塞尔曲线什么的），还会有一个方法是返回一个UIImage类，让你可以直接放在UIImageView里。还是很贴心的。

跟我们的Xcode一样，paintcode里的canvas也是以左上角作为原点的。所以熟练使用Xib的iOS开发应该也能用的很顺手。

创造我们的Stopwatch

下一步，看我们paintcode左上角有一排图标.

选中圆形的那个图标，看图识字应该知道，这个图标就是用来画圆形的。
ok，选中之后，在我们的画布上拖一个圆出来，这时候要按住shift键不放来拖，因为这样可以保证圆形是个正圆，而不是个椭圆。

不用太在意圆形的大小，拖完之后我们可以直接在属性面板里更改。很简单。

ok，现在我们的画布上有一个圆了。然后把它的坐标改为（15，30），长宽都改为220.像这样图一样。

然后，点击Fill（就是圆的填充色），在下拉窗口中选择'Add New Color'，创建一个我们自己的颜色。

然后在弹出的窗口里输入颜色的HEX值#118DDA.如图所示

点击弹出窗口的外面，让窗口消失，ok我们有了自己的颜色。以后要使用这个色值的时候软件会直接显示这个颜色。

刚才我们选了画圆的按钮，这时候我们选择画方块的按钮，因为我们现在要画一个方块。

随便在画板上拖一个方块，并且把Rect改为下面的值。

改完之后你的画板应该是现在这个样子。

然后我们这时候还需要拖一个方块，随便放在画板的一个角落，然后把大小改为宽30，高20.如图。

然后，我们再拖一个方块，这时候按住shift键不放，这样可以保证方块的长宽比一致（也就是正方形），也是随便放个位置就行了。如图。

可能有人要问了，我们拖的这两个小方块是干嘛的。别着急，继续往下看。

我们选中稍大的那个方块，到右边的属性窗口点开Transforms，然后把Rotation改为-45°。

现在应该是这样的。

然后选中我们的小正方形，把他拖到我们旋转-45°的方块上。如图