使用Core Graphics绘画一个山寨微信icon
先看最终效果：
- - -
绘画这个纯属周末雨天无聊，这里使用的都是Core Graphics上很基本的几个方法，对新手（我也是新手）来说还是有帮助的。下面说下这个绘制过程。
0. 设置背景色
1. 绘制绿色椭圆
2. 绘制绿色三角形
3. 绘制眼睛
4. 绘制白色椭圆
5. 绘制白色三角形
6. 绘制眼睛
7. 就这么简单
_ _ _
那么，省去创建project的步骤之后我们要做的就是自定义个UIView子类，我们就将它命名为`WechatView`，然后在storyboard上拖动一个`UIView`到视图控制器上。
接着，为了在绘制过程中能不需要每次都编译，我们可以使用iOS7之后的一个新特性 `IB_DESIGNABLE` 来时时看到我们的绘画过程。说到 `IB_DESIGNABLE` 就自然的会联想到 `IBInspectable`，先浅陋的介绍一下这两个的作用。首先是 `IB_DESIGNABLE`，如刚才所说，它可以让我们时时的看到我们的绘制过程，大大的省去了我们编译的时间，是iOS7上一个超赞的新特性。然后是 `IBInspectable`，它是添加在属性上的，在属性上添加上它我们就可以在Xcode的右边的*Show the Attributes inspector*上看到，并可以自定义这些值（当然，并不是所有的类习惯都支持的，具体有哪些，需要的时候试试便知哈）。
回到正题，现在我们只需要将 `IB_DESIGNABLE` 添加到`WechatView` 的头文件上即可（当然，你想添加到.m文件上编译器也不反对）。然后，在这里就添加一个用处不大的属性bkColor作为背景颜色，如下代码：
IB_DESIGNABLE
@interface WechatView : UIView
@property(nonatomic, assign)IBInspectable UIColor *bkColor;
@end
这样，我们就可以在点击storyboard后，选择*Show the Identity inspector*上看到下图:
在*Show the Attributes inspector*上看到下图：
现在改变一下bkColor,将它改为灰色。
改后当然是看不到视图改变的，我们得真正的为 `backgoundColor` 这个属性赋值；或者使用Core Graphices来填充背景。方法一中如果想时时看到改变效果，我们可以添加如下代码：
- (void)prepareForInterfaceBuilder {
[super prepareForInterfaceBuilder];
self.backgroundColor = self.bkColor;
}
代码刚上，效果即可见哈，爽
`prepareForInterfaceBuilder` 这个方法是iOS8之后才有的，它就是提供给我们试试查看效果的，但是它只是在当你的view准备被绘制在*Interface Builder*时被执行，换句话说就是程序运行时它是不被调用的。==command+r==运行下程序我们就可以发现，这是的view背景并不是刚才所看到的灰色。说明`prepareForInterfaceBuilder`确实没有被调用。（我们可以通过这个方法，省去编译时间来看我们的绘制效果，然后再将代码移到我们所要的位置）。这个方法就说到这。
填充背景
还有方法二，也是接下来我们要用到的方法:使用Core Graphices来填充背景。将前面的代码注释掉，然后添加如下代码：
- (void)drawRect:(CGRect)rect {
CGContextRef context =UIGraphicsGetCurrentContext();
/*0. 填充背景*/
//将当前context的颜色填充为bkColor
[self.bkColor setFill];
//填充颜色到当前的context上，大小为rect
CGContextFillRect(context, rect);
}
同样，可以看到`WechatView`的背景变成了灰色。这样就算开始了第0步绘画。
绘制绿色椭圆
第1步是开始绘制绿色椭圆，在以上的代码基础上继续添加如下代码:
//绘制的最小宽度
CGFloat minWidth = MAX(160, rect.size.width);
//定义绿色椭圆位置和大小
CGFloat greenX = 10;
CGFloat greenY = 10;
CGFloat greenCircleWidth = minWidth/1.5;
CGFloat greenCircleHeight = 21.0/24 * greenCircleWidth;
CGFloat gcW = greenCircleWidth;
CGFloat gcH = greenCircleHeight;
//1. 绘制绿色椭圆
UIColor *greenColor = RGB(125, 225, 73, 1);
//将当前context的颜色填充为greenColor
[greenColor setFill];
//绘制并填充椭圆
CGContextFillEllipseInRect(context, CGRectMake(greenX, greenY, greenCircleWidth, greenCircleHeight));
完成了第1步，效果见图：
绘制绿色三角形
第2步：绘制绿色三角形。通过观察微信的icon，计算，微调，我们可以添加以下的代码来绘制这个三角形：
//2. 画三角形
//椭圆左边焦点
CGFloat greenCircleFocusLeft = gcW/2-sqrt(pow(gcW/2, 2)-pow(gcH/2, 2));
//椭圆右边焦点
CGFloat greenCircleFocusRight = gcW/2+sqrt(pow(gcW/2, 2)-pow(gcH/2, 2));
CGFloat gcFL = greenCircleFocusLeft;
CGFloat gcFR = greenCircleFocusRight;
//眼睛大小
CGFloat eyesWidth1 = gcW/7.5;
//2. 画三角形
CGPoint points[] = {
CGPointMake(gcFL-eyesWidth1, greenY + gcH + (gcFL-eyesWidth1)/12-10),
CGPointMake(greenX+gcW/2+40, 1.2*(greenX+gcW/2) + greenY),
CGPointMake(gcFL+10, 1.8*gcFL + greenY)};
CGContextAddLines(context, points, 3);
CGContextClosePath(context);
//CGContextStrokePath(context);
CGContextFillPath(context);
三角形的三个点的计算花了我不少时间，但是这不是重点，重点是其实很简单的问题我却傻X的花了很长时间哈，而且最终还只是凑合的，不是最优解。取消`CGContextStrokePath(context);`这句的注释，我们可以看到下图：
注释掉后即可看到：
绘制眼睛
第3步：绘制眼睛。眼睛的位置取的是椭圆焦点的位置，而且绘制后看起来还挺对的。眼睛无非是两个黑色的圆形。如下：
//3. 画眼睛（圆）
[RGB(45, 49, 32, 1) setFill];
CGContextFillEllipseInRect(context, CGRectMake(greenX + gcFL, greenY+gcH/4, eyesWidth1, eyesWidth1));
CGContextFillEllipseInRect(context, CGRectMake(greenX + gcFR-eyesWidth1, greenY+gcH/4, eyesWidth1, eyesWidth1));
然后就是这样了：
绘制白色icon
第4，5，6步跟1，2，3步基本是一样的，只是位置不同而已。
//4. 画白色椭圆
CGFloat wcX = greenX + gcW / 2;
CGFloat wcY = greenY + gcH / 2;
CGFloat wcW = gcW * 0.8;
CGFloat wcH = gcH * 0.8;
CGFloat whiteCircleFocusLeft = wcW/2-sqrt(pow(wcW/2, 2)-pow(wcH/2, 2));
CGFloat whiteCircleFocusRight = wcW/2+sqrt(pow(wcW/2, 2)-pow(wcH/2, 2));
CGFloat wcFL = whiteCircleFocusLeft;
CGFloat wcFR = whiteCircleFocusRight;
CGFloat eyesWidth2 = wcW/7.5;
UIColor *whiteColor = RGB(251, 251, 251, 1);
[whiteColor setFill];
CGContextFillEllipseInRect(context, CGRectMake(wcX, wcY, wcW, wcH));
//5. 画白色三角形
CGPoint whiteTrianglePoints[] = {
CGPointMake(wcFR+eyesWidth2/4+wcX, wcY + wcH + (wcFL-eyesWidth2/4)/4),
CGPointMake(wcX+wcW/2, 0.9*(wcX+wcW/2)),
CGPointMake(wcFR+eyesWidth2, 0.9*wcFR + wcY)};
CGContextAddLines(context, whiteTrianglePoints, 3);
CGContextClosePath(context);
CGContextFillPath(context);
//6. 画眼睛（圆）
[RGB(60, 64, 49, 1) setFill];
CGContextFillEllipseInRect(context, CGRectMake(wcX + wcFL, wcY + wcH/4, eyesWidth2, eyesWidth2));
CGContextFillEllipseInRect(context, CGRectMake(wcX + wcFR - eyesWidth2, wcY + wcH/4, eyesWidth2, eyesWidth2));
OK,现在就长这样了，咋一看还是挺像的哈。
添加阴影
下面我们再添加一些细节上的东西。比如我们发现少了阴影，还有微信的icon上的三角形是圆角的。首先是阴影：在`CGFloat minWidth = MAX(160, rect.size.width);`这句之上加上下面的代码：
//阴影
CGContextSetShadowWithColor(context, CGSizeMake(-0.5, 0.5), 6, [UIColor blackColor].CGColor);
阴影是加上了，但是并不是我们想要的效果。怎样才能让它只是在边缘上加阴影呢？也很简单，继续在刚才添加的语句下添加：
CGContextBeginTransparencyLayer(context, nil);
搞定，感觉还行哈，不过眼睛的阴影好像也没了。试试用同样的方法看能不能解决：在第3步画眼睛之前添加：
CGContextEndTransparencyLayer(context);
//为绿色椭圆的眼睛添加阴影
CGContextSetShadowWithColor(context, CGSizeMake(-0.5, 0.5), 2, [UIColor blackColor].CGColor);
然后在第3步画完眼睛之后添加：
CGContextBeginTransparencyLayer(context, nil);
再然后在第6步画眼睛之前添加上：
//为白色椭圆的眼睛添加阴影
CGContextSetShadowWithColor(context, CGSizeMake(-0.5, 0.5), 2, [UIColor blackColor].CGColor);
这样说有点乱，注意到了：`CGContextBeginTransparencyLayer(context, nil)` 和 `CGContextEndTransparencyLayer(context)` 是成对出现的，从函数名称可以知道它们的作用分别是开始一个透明的layer和结束一个透明的layer。而夹在它们中间的绘图操作在指定的context上被合成到一个完全透明的背景(在context中作为一个分离的目标缓冲区)。这个操作会保持context原有的裁剪区域。调用了`Begin`之后除了1.全局的透明度被设置为1；2.阴影被屏蔽外，其他的都不变。这样解释后，上面的代码应该可以理解了。现在我们的icon看起来是这样的：
圆角三角形
最后，解决下圆角三角形的问题：回到第2步，将`CGContextFillPath(context);`注释，并添加以下代码：
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, 4);
CGContextSetStrokeColorWithColor(context, greenColor.CGColor);
CGContextDrawPath(context, kCGPathFillStroke);
然后同理在第5步画白色三角形上注释`CGContextFillPath(context);`,并添加以下代码：
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, 3);
CGContextSetStrokeColorWithColor(context, whiteColor.CGColor);
CGContextDrawPath(context, kCGPathFillStroke);
好了，废话说完了，也算是完成了，最终效果：
实际上，微信的icon的颜色还是一个渐变的，在这里就不继续研究了，要实现渐变可以用`CGContextDrawLinearGradient(CGContextRef context, CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint, CGGradientDrawingOptions options)`或`CGContextDrawRadialGradient(CGContextRef context, CGGradientRef gradient, CGPoint startCenter, CGFloat startRadius, CGPoint endCenter, CGFloat endRadius, CGGradientDrawingOptions options)`这两个函数。
bug 修复
command+r 编译+运行以下（现在才需要编译，这也太好了吧），然后发现成功的crash了。
什么原因？好吧，我把属性定义成 `assign` 了（低级错误），改成`strong` ，问题解决。
结束语
以上就是我绘制的整个编码过程，绘制微信icon实际上就用了core graphics的几个基本功能，希望能对初学者有所帮助，说错的地方也希望能得到指点哈~~
源码地址：https://github.com/linshaolie/blog/tree/master/DrawWechatIcon
