CAShaperLayer&UIBezierPath系列（二）

移动开发 2019-03-19 17:28:13 阅读次数: 0

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

扫描二维码关注公众号，回复： 5589359 查看本文章

  • 其中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

猜你喜欢

转载自juejin.im/post/5c8ba5696fb9a049f06b267b
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022