CAShaperLayer&UIBezierPath系列（二）

weixin_33850890

于 2019-03-16 04:23:18 发布

阅读量127

点赞数

原文链接：https://juejin.im/post/5c8ba5696fb9a049f06b267b

版权

CAShaperLayer&UIBezierPath画基本图形

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

原文出处:(www.jianshu.com/p/c5cbb5e05…)

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

转载于:https://juejin.im/post/5c8ba5696fb9a049f06b267b

weixin_33850890

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CAShaperLayer&UIBezierPath系列（二）

CAShaperLayer&UIBezierPath画基本图形使用 UIbezierPath 和 CAShapeLayer 可以画出你想要的任何形状，没有它做不到，只有你想不到，搞定了它们你就可以轻松定制你想要的任何控件了。原文出处:(www.jianshu.com/p/c5cbb5e05…)CAShaperLayer&UIBezierPath画多边形1.画矩形 ...
复制链接

扫一扫