CAShaperLayer&UIBezierPath系列（二）-白红宇

CAShaperLayer&UIBezierPath画基本图形

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

原文出处:()

CAShaperLayer&UIBezierPath画多边形

1.画矩形

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];复制代码

2.画椭圆

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(120, 20, 100, 80) cornerRadius:40];    CAShapeLayer *layer = [CAShapeLayer layer];    layer.path = path.CGPath;    layer.strokeColor = [UIColor blackColor].CGColor;    layer.fillColor = [UIColor whiteColor].CGColor;    [self.view.layer addSublayer:layer];复制代码

3.画直线

UIBezierPath *path = [UIBezierPath bezierPath];    [path moveToPoint:CGPointMake(10, 130)]; //起点    [path addLineToPoint:CGPointMake(300, 130)]; //终点    [path closePath];        CAShapeLayer *layer = [CAShapeLayer layer];    layer.lineWidth = 5.0f; //设置行宽    layer.path = path.CGPath;    layer.strokeColor = [UIColor blackColor].CGColor; //设置线条颜色    [self.view.layer addSublayer:layer];复制代码

注意通过UIBezierPath设置行高和样色，将会不起作用

4.画曲线

CGPoint startPoint = CGPointMake(20, 250);     CGPoint endPoint = CGPointMake(300, 250);    CGPoint controlPoint = CGPointMake(160, 150);        CAShapeLayer *layer1 = [CAShapeLayer layer];    layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);    layer1.backgroundColor = [UIColor redColor].CGColor;        CAShapeLayer *layer2 = [CAShapeLayer layer];    layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);    layer2.backgroundColor = [UIColor redColor].CGColor;        CAShapeLayer *layer3 = [CAShapeLayer layer];    layer3.frame = CGRectMake(controlPoint.x, controlPoint.y, 5, 5);    layer3.backgroundColor = [UIColor redColor].CGColor;        UIBezierPath *path = [UIBezierPath bezierPath];    CAShapeLayer *layer = [CAShapeLayer layer];        [path moveToPoint:startPoint];    [path addQuadCurveToPoint:endPoint controlPoint:controlPoint];        layer.path = path.CGPath;    layer.fillColor = [UIColor clearColor].CGColor;    layer.strokeColor = [UIColor blackColor].CGColor;        [self.view.layer addSublayer:layer];    [self.view.layer addSublayer:layer1];    [self.view.layer addSublayer:layer2];    [self.view.layer addSublayer:layer3];复制代码

CAShaperLayer&UIBezierPath范例

1.时光网App

[self.view setBackgroundColor:[UIColor lightGrayColor]];        CGSize finalSize = CGSizeMake(CGRectGetWidth(self.view.frame), 400);    CGFloat layerHeight = finalSize.height * 0.2;    CAShapeLayer *layer = [CAShapeLayer layer];    UIBezierPath *bezier = [UIBezierPath bezierPath];    [bezier moveToPoint:CGPointMake(0, finalSize.height - layerHeight)];    [bezier addLineToPoint:CGPointMake(0, finalSize.height - 1)];    [bezier addLineToPoint:CGPointMake(finalSize.width, finalSize.height - 1)];    [bezier addLineToPoint:CGPointMake(finalSize.width, finalSize.height - layerHeight)];    [bezier addQuadCurveToPoint:CGPointMake(0,finalSize.height - layerHeight) controlPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];            layer.path = bezier.CGPath;    layer.fillColor = [UIColor whiteColor].CGColor;    [self.view.layer addSublayer:layer];        //注意Layer层级关系     [self markPoint:CGPointMake(finalSize.width - 5, finalSize.height - layerHeight)];    [self markPoint:CGPointMake(finalSize.width - 5, finalSize.height - 1)];    [self markPoint:CGPointMake(0, finalSize.height - 1)];    [self markPoint:CGPointMake(0, finalSize.height - layerHeight)];    [self markPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];	复制代码

2.微信（下拉的眼睛）

创建Layer的代码

- (CAShapeLayer *)eyeFirstLightLayer {    if (!_eyeFirstLightLayer) {        _eyeFirstLightLayer = [CAShapeLayer layer];        CGPoint center = eyeCenter;        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center                                                            radius:eyeSize.width * 0.2                                                        startAngle:(230.f / 180.f) * M_PI                                                          endAngle:(265.f / 180.f) * M_PI                                                         clockwise:YES];        _eyeFirstLightLayer.borderColor = [UIColor blackColor].CGColor;        _eyeFirstLightLayer.lineWidth = 5.f;        _eyeFirstLightLayer.path = path.CGPath;        _eyeFirstLightLayer.fillColor = [UIColor clearColor].CGColor;        _eyeFirstLightLayer.strokeColor = [UIColor whiteColor].CGColor;    }    return _eyeFirstLightLayer;}- (CAShapeLayer *)eyeSecondLightLayer {    if (!_eyeSecondLightLayer) {        _eyeSecondLightLayer = [CAShapeLayer layer];        CGPoint center = eyeCenter;        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center                                                            radius:eyeSize.width * 0.2                                                        startAngle:(211.f / 180.f) * M_PI                                                          endAngle:(220.f / 180.f) * M_PI                                                         clockwise:YES];        _eyeSecondLightLayer.borderColor = [UIColor blackColor].CGColor;        _eyeSecondLightLayer.lineWidth = 5.f;        _eyeSecondLightLayer.path = path.CGPath;        _eyeSecondLightLayer.fillColor = [UIColor clearColor].CGColor;        _eyeSecondLightLayer.strokeColor = [UIColor whiteColor].CGColor;            }    return _eyeSecondLightLayer;}- (CAShapeLayer *)eyeballLayer {    if (!_eyeballLayer) {        _eyeballLayer = [CAShapeLayer layer];        CGPoint center = eyeCenter;        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center                                                            radius:eyeSize.width * 0.3                                                        startAngle:(0.f / 180.f) * M_PI                                                          endAngle:(360.f / 180.f) * M_PI                                                         clockwise:YES];        _eyeballLayer.borderColor = [UIColor blackColor].CGColor;        _eyeballLayer.lineWidth = 1.f;        _eyeballLayer.path = path.CGPath;        _eyeballLayer.fillColor = [UIColor clearColor].CGColor;        _eyeballLayer.strokeColor = [UIColor whiteColor].CGColor;        _eyeballLayer.anchorPoint = CGPointMake(0.5, 0.5);            }    return _eyeballLayer;}- (CAShapeLayer *)topEyesocketLayer {    if (!_topEyesocketLayer) {        _topEyesocketLayer = [CAShapeLayer layer];        CGPoint center = eyeCenter;        UIBezierPath *path = [UIBezierPath bezierPath];        [path moveToPoint:CGPointMake(eyeCenter.x - eyeSize.width * 0.5, eyeCenter.y)];        [path addQuadCurveToPoint:CGPointMake(eyeCenter.x + eyeSize.width * 0.5, eyeCenter.y)                     controlPoint:CGPointMake(eyeCenter.x, center.y - eyeSize.width * 0.3 - 23)];        _topEyesocketLayer.borderColor = [UIColor blackColor].CGColor;        _topEyesocketLayer.lineWidth = 1.f;        _topEyesocketLayer.path = path.CGPath;        _topEyesocketLayer.fillColor = [UIColor clearColor].CGColor;        _topEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;    }    return _topEyesocketLayer;}- (CAShapeLayer *)bottomEyesocketLayer {    if (!_bottomEyesocketLayer) {        _bottomEyesocketLayer = [CAShapeLayer layer];        CGPoint center = eyeCenter;        UIBezierPath *path = [UIBezierPath bezierPath];        [path moveToPoint:CGPointMake(eyeCenter.x - eyeSize.width * 0.5, eyeCenter.y)];        [path addQuadCurveToPoint:CGPointMake(eyeCenter.x + eyeSize.width * 0.5, eyeCenter.y)                     controlPoint:CGPointMake(eyeCenter.x , center.y + eyeSize.width * 0.3 + 23)];        _bottomEyesocketLayer.borderColor = [UIColor blackColor].CGColor;        _bottomEyesocketLayer.lineWidth = 1.f;        _bottomEyesocketLayer.path = path.CGPath;        _bottomEyesocketLayer.fillColor = [UIColor clearColor].CGColor;        _bottomEyesocketLayer.strokeColor = [UIColor whiteColor].CGColor;            }    return _bottomEyesocketLayer;}复制代码

根据ScrollView的contentOffset.y来绘制图形

CGFloat flag = self.view.frame.origin.y * 2.0f - 20.0f;    if(y < flag){        if (self.eyeFirstLightLayer.lineWidth < 5.0f) {            self.eyeFirstLightLayer.lineWidth += 1.0f;            self.eyeSecondLightLayer.lineWidth += 1.0f;        }    }        if (y < flag - 20) {        if (self.eyeballLayer.opacity <= 1.0f) {            self.eyeballLayer.opacity += 0.1f;        }    }        if (y < flag - 40) {        if (self.topEyesocketLayer.strokeEnd < 1.0f && self.topEyesocketLayer.strokeStart > 0.0f) {            self.topEyesocketLayer.strokeEnd += 0.1f;            self.topEyesocketLayer.strokeStart -= 0.1f;                        self.bottomEyesocketLayer.strokeEnd += 0.1f;            self.bottomEyesocketLayer.strokeStart -= 0.1f;        }    }        if (y > flag - 40) {        if (self.topEyesocketLayer.strokeEnd > 0.5f && self.topEyesocketLayer.strokeStart < 0.5f) {            self.topEyesocketLayer.strokeEnd -= 0.1f;            self.topEyesocketLayer.strokeStart += 0.1f;                        self.bottomEyesocketLayer.strokeEnd -= 0.1f;            self.bottomEyesocketLayer.strokeStart += 0.1f;        }    }        if (y > flag - 20) {        if (self.eyeballLayer.opacity >= 0.0f) {            self.eyeballLayer.opacity -= 0.1f;        }    }        if (y > flag) {        if (self.eyeFirstLightLayer.lineWidth > 0.f) {            self.eyeFirstLightLayer.lineWidth -= 1.f;            self.eyeSecondLightLayer.lineWidth -= 1.f;        }    }复制代码

其中strokeStart和strokeEnd这两个属性需要特别注意
- stokeStart (The relative location at which to begin stroking the path. Animatable.)
  - 描线开始的地方占总路径的百分比
- stokeEnd (The relative location at which to stop stroking the path. Animatable.)
  - 绘制结束的地方站总路径的百分比默认值为1