CAShapeLayer与UIBezierPath

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 。

1.背景知识：

UIBezierPath： UIBezierPath是在 UIKit中的一个类，继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。使用此类可以定义常见的圆形、多边形等形状。我们使用直线、弧（arc）来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。
CAShapeLayer： CAShapeLayer顾名思义，继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。普通的CALayer是矩形，所以需要frame属性。CAShapeLayer初始化时也需要指定frame值，但
它本身没有形状，它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。

2.开始绘制：

这里绘制三个图形，圆形，环形，不规则多边形。

关键代码如下：

#<span class="keyword">import</span> <span class="string">"ViewController.h"</span>
<span class="annotation">@interface</span> ViewController ()
{
<span class="indent">  </span><span class="comment">//三个CAShapeLayer</span>
<span class="indent">  </span>CAShapeLayer*circleLayer;
<span class="indent">  </span>CAShapeLayer*loopLayer;
<span class="indent">  </span>CAShapeLayer*polygonLayer;
}
<span class="annotation">@end</span>

<span class="annotation">@implementation</span> ViewController

- (<span class="keyword">void</span>)viewDidLoad
{
<span class="indent">  </span>[<span class="keyword">super</span> viewDidLoad];
<span class="indent">  </span><span class="comment">//对三个CAShapeLayer进行初始化</span>
<span class="indent">  </span>circleLayer=[CAShapeLayer <span class="keyword">new</span>];
<span class="indent">  </span>circleLayer.frame=CGRectMake(<span class="number">0</span>, <span class="number">0</span>, <span class="number">160</span>, <span class="number">200</span>);
<span class="indent">  </span><span class="comment">//fillColor和strokeColor的区别是 一个为填充色，一个为描边色</span>
<span class="indent">  </span>circleLayer.fillColor=[UIColor blueColor].CGColor;
<span class="indent">  </span>circleLayer.strokeColor=[UIColor redColor].CGColor;
<span class="indent">  </span>
<span class="indent">  </span>loopLayer=[CAShapeLayer <span class="keyword">new</span>];
<span class="indent">  </span>loopLayer.frame=CGRectMake(<span class="number">160</span>, <span class="number">0</span>, <span class="number">160</span>, <span class="number">200</span>);
<span class="indent">  </span>loopLayer.fillColor=nil;
<span class="indent">  </span>loopLayer.lineCap = kCALineCapRound;
<span class="indent">  </span>loopLayer.strokeColor=[UIColor cyanColor].CGColor;
<span class="indent">  </span>loopLayer.lineWidth=<span class="number">10</span>;
<span class="indent">  </span>
<span class="indent">  </span>polygonLayer=[CAShapeLayer <span class="keyword">new</span>];
<span class="indent">  </span>polygonLayer.frame=CGRectMake(<span class="number">0</span>, <span class="number">200</span>, <span class="number">320</span>, <span class="number">200</span>);
<span class="indent">  </span>polygonLayer.fillColor=nil;
<span class="indent">  </span>polygonLayer.strokeColor=[UIColor greenColor].CGColor
<span class="indent">  </span>;
<span class="indent">  </span><span class="comment">//添加到主视图的layer中</span>
<span class="indent">  </span>[self.view.layer addSublayer:circleLayer];
<span class="indent">  </span>[self.view.layer addSublayer:loopLayer];
<span class="indent">  </span>[self.view.layer addSublayer:polygonLayer];

<span class="indent">  </span>
}
<span class="comment">//环形按钮触发的事件</span>
- (IBAction)buttonAction:(id)sender {
<span class="indent">  </span>UIBezierPath*path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(<span class="number">80</span>, <span class="number">80</span>) radius:<span class="number">80</span> startAngle:<span class="number">0</span> endAngle:M_PI*<span class="number">2</span> clockwise:YES];
<span class="comment">//	[[UIColor redColor]setStroke];</span>
<span class="indent">  </span>loopLayer.path=path.CGPath;
}
<span class="comment">//圆</span>
- (IBAction)circle:(id)sender {
<span class="indent">  </span>UIBezierPath*path=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(<span class="number">0</span>, <span class="number">0</span>, <span class="number">160</span>, <span class="number">160</span>) cornerRadius:<span class="number">80</span>];
<span class="indent">  </span>circleLayer.path=path.CGPath;
}
<span class="comment">//多边形</span>
- (IBAction)polygon:(id)sender {
<span class="indent">  </span>UIBezierPath*path=[UIBezierPath <span class="keyword">new</span>];
<span class="indent">  </span>[path moveToPoint:CGPointMake(<span class="number">0</span>, <span class="number">0</span>)];
<span class="indent">  </span>[path addLineToPoint:CGPointMake(<span class="number">0</span>, <span class="number">50</span>)];
<span class="indent">  </span>[path addLineToPoint:CGPointMake(<span class="number">50</span>, <span class="number">50</span>)];
<span class="indent">  </span>[path addLineToPoint:CGPointMake(<span class="number">150</span>, <span class="number">50</span>)];
<span class="indent">  </span>[path addLineToPoint:CGPointMake(<span class="number">200</span>, <span class="number">100</span>)];
<span class="indent">  </span>[path closePath];<span class="comment">//将起点与结束点相连接</span>
<span class="indent">  </span>polygonLayer.path=path.CGPath;

}

<span class="annotation">@end</span>