CAShaperLayer&UIBezierPath系列（一）

CAShaperLayer&UIBezierPath简介

使用 UIbezierPath 和 CAShapeLayer 可以画出你想要的任何形状，没有它做不到，只有你想不到，搞定了它们你就可以轻松定制你想要的任何控件了。

CAShaperLayer

苹果官方的定义：A layer that draws a cubic Bezier spline in its coordinate space.

继承于CALayer。每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。

同时CAShaperLayer具有以下特点：

CAShapeLayer可以被触碰和填充，并且CAShapeLayer可以通过Path属性进行形状的调节
CAshapeLayer具有许多动画特性，与UIBezierPath结合，可以轻松定制你想要的图形
CAshapeLayer能在GPU上渲染，提升效率，减少CPU的负担

Note:

Shape rasterization may favor speed over accuracy. For example, pixels with multiple intersecting path segments may not give exact results.

由于CAShapeLayer更喜欢速度超过准确性，所以用CAShapeLayer绘制的图形会出现锯齿。(如果不用放大镜的话，应该很难看出区别)

问题的描述

常用属性的介绍

1.CGPathRef path

/* The path defining the shape to be rendered. If the path extends
 * outside the layer bounds it will not automatically be clipped to the
 * layer, only if the normal layer masking rules cause that. Upon
 * assignment the path is copied. Defaults to null. Animatable.
 * (Note that although the path property is animatable, no implicit
 * animation will be created when the property is changed.) */

path定义了形状的渲染，如果路径超过layer的bounds,那么那部分的path将不会在layer上显示。同时path在赋值的时候将会进行深拷贝。默认值为空。请注意，尽管path属性是可动画的，但在更改属性时不会创建隐式动画。

隐式动画

当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果，而这些属性称为Animatable Properties(可动画属性)

bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
position：用于设置CALayer的位置。修改这个属性会产生平移动画

可以通过动画事务CATransaction关闭默认的隐式动画效果

 [CATransaction begin];
 [CATransaction setDisableActions:YES];
 self.myview.layer.position = CGPointMake(10, 10);
 [CATransaction commit];

2.CGFloat strokeStart && CGFloat strokeEnd

/* These values define the subregion of the path used to draw the

* stroked outline. The values must be in the range [0,1] with zero

* representing the start of the path and one the end. Values in

* between zero and one are interpolated linearly along the path

* length. strokeStart defaults to zero and strokeEnd to one. Both are

* animatable. */

strokeStart它表示描线开始的地方占总路径的百分比
对比strokeStart stokeEnd代表了绘制结束的地方站总路径的百分比

UIBezierPath

A path that consists of straight and curved line segments that you can render in your custom views.

UIBezierPath对象是CGPathRef数据类型的封装。有两种使用方式：

1.重写view的drawRect方法

- (void)drawRect:(CGRect)rect {
    
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 10)];
    [path addLineToPoint:CGPointMake(200, 80)];
   
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //线条拐角
    path.lineJoinStyle = kCGLineJoinRound; //终点处理
    
    [path stroke];
}

path.lineWidth = 5.0设置划线的宽度
path.lineCapStyle终点的样式
- kCGLineCapButt 该属性值指定不绘制端点，线条结尾处直接结束。这是默认值
- kCGLineCapRound该属性值指定绘制圆形端点，线条结尾处绘制一个直径为线条宽度的半圆。
- kCGLineCapSquare该属性值指定绘制方形端点。线条结尾处绘制半个边长为线条宽度的正方形。需要说明的是，这种形状的端点与“butt”形状的端点十分相似，只是采用这种形式的端点的线条略长一点而已
path.lineJoinStyle 设置两条线连结点的样式
- kCGLineJoinMiter 斜接
- kCGLineJoinRound 圆滑衔接
- kCGLineJoinBevel 斜角连接
[path stroke] 描边
[path fill] 填充边框内部

2.结合CAShaperLayer进行使用

	UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(110, 100, 150, 100)];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.fillColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];

stokeColor 设置图形边框的颜色
fillColor 设置图形填充的颜色，如果不设置，默认为stokeColor