专栏首页iOS开发随笔iOS CAShapeLayer和UIBezierPath的使用

iOS CAShapeLayer和UIBezierPath的使用

1.CAShapeLayer简介

  • CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。
  • CAShapeLayer继承自CALayer,可以使用CALayer的所有属性值。
  • CAShapeLayer需要与 贝塞尔曲线 配合使用才有意义(这是个人经验)。
  • 使用CAShapeLayer与贝塞尔曲线可以画出你想要的图形。
  • 相对于Core Graphics绘制图片,使用CAShapeLayer有以下一些优点:
  1. 渲染快速。CAShapeLayer使用了硬件加速(使用CPU渲染),绘制同一图形会比用Core Graphics快很多
  2. 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。
  3. 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。

2.贝塞尔曲线简介

数学数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线。(贝塞尔曲线扫盲) 贝塞尔曲线对应iOS中是UIBezierPath对象,它是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状。

3.简单的使用

使用CAShapeLayerUIBezierPath画一条直线和一个椭圆形,效果如下:

使用贝塞尔曲线画直线和椭圆形

代码如下:

    // 1,绘制一条直线
    UIBezierPath * path = [[UIBezierPath alloc] init];
    path.lineWidth = 1.f;
    //设置起点
    [path moveToPoint:CGPointMake(0, 10)];
    //添加子路径
    [path addLineToPoint:CGPointMake(300, 10)];
    
    CAShapeLayer * shapeLayer = [CAShapeLayer layer];
    shapeLayer.backgroundColor = [UIColor yellowColor].CGColor;
    shapeLayer.frame = CGRectMake(0, 0, 300, 50);
    shapeLayer.position = self.view.center;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.path = path.CGPath;
    [self.view.layer addSublayer:shapeLayer];

    // 2,绘制一个椭圆形
    UIBezierPath * path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 10, 100, 50)];
   
    CAShapeLayer * shapeLayer2 = [CAShapeLayer layer];
    shapeLayer2.backgroundColor = [UIColor blueColor].CGColor;
    shapeLayer2.frame = CGRectMake(0, 0, 300, 150);
    shapeLayer2.position = CGPointMake(self.view.center.x, self.view.center.y+70);
    shapeLayer2.fillColor = [UIColor clearColor].CGColor;
    shapeLayer2.strokeColor = [UIColor redColor].CGColor;
    shapeLayer2.path = path2.CGPath;
    [self.view.layer addSublayer:shapeLayer2];

到这里你肯定会问,学了这两个就是为了画条线和画个椭圆???肯定不是啦,不然我怎么会特(gu)意(yi)写出来呢?先看看效果:

五角星动画

- (void)createUI2 {
    
//    创建shapeLayer
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.frame = CGRectMake(0, 0, 200, 200);
    _shapeLayer.position = self.view.center;
    _shapeLayer.path = [self getStarOneBezierPath].CGPath;
    _shapeLayer.fillColor = [UIColor clearColor].CGColor;
    _shapeLayer.strokeColor = [UIColor redColor].CGColor;
    _shapeLayer.lineWidth = 2.0f;
    [self.view.layer addSublayer:_shapeLayer];
    
//    创建定时器
    _timer = [NSTimer scheduledTimerWithTimeInterval:2.0f target:self selector:@selector(bezierPathAnimation) userInfo:nil repeats:YES];
    
}

/// 执行bezierPath的动画
- (void)bezierPathAnimation {
    static int i = 0;
    if (i++ % 2 == 0) {
        CABasicAnimation * circleAnim = [CABasicAnimation animationWithKeyPath:@"path"];
        circleAnim.removedOnCompletion = NO;
        circleAnim.duration = 2;
        circleAnim.fromValue = (__bridge id _Nullable)([self getStarOneBezierPath].CGPath);
        circleAnim.toValue = (__bridge id _Nullable)([self getStarTwoBezierPath].CGPath);
        _shapeLayer.path = [self getStarTwoBezierPath].CGPath;
        [_shapeLayer addAnimation:circleAnim forKey:@"animateCirclePath"];
    }else {
        CABasicAnimation * circleAnim = [CABasicAnimation animationWithKeyPath:@"path"];
        circleAnim.removedOnCompletion = NO;
        circleAnim.duration = 2;
        circleAnim.fromValue = (__bridge id _Nullable)([self getStarTwoBezierPath].CGPath);
        circleAnim.toValue = (__bridge id _Nullable)([self getStarOneBezierPath].CGPath);
        _shapeLayer.path = [self getStarOneBezierPath].CGPath;
        [_shapeLayer addAnimation:circleAnim forKey:@"animateCirclePath"];
    }
}

/// 贝塞尔曲线1
- (UIBezierPath *)getStarOneBezierPath {
    // draw star
    UIBezierPath * starPath = [UIBezierPath bezierPath];
    [starPath moveToPoint:CGPointMake(22.5, 2.5)];
    [starPath addLineToPoint:CGPointMake(28.32, 14.49)];
    [starPath addLineToPoint:CGPointMake(41.52, 16.32)];
    [starPath addLineToPoint:CGPointMake(31.92, 25.56)];
    [starPath addLineToPoint:CGPointMake(34.26, 38.68)];
    [starPath addLineToPoint:CGPointMake(22.5, 32.4)];
    [starPath addLineToPoint:CGPointMake(10.74, 38.68)];
    [starPath addLineToPoint:CGPointMake(13.08, 25.56)];
    [starPath addLineToPoint:CGPointMake(3.48, 16.32)];
    [starPath addLineToPoint:CGPointMake(16.68, 14.49)];
    [starPath closePath];
    
    return starPath;
}

/// 贝塞尔曲线2
- (UIBezierPath *)getStarTwoBezierPath {
    // draw star
    UIBezierPath * starPath = [UIBezierPath bezierPath];
    [starPath moveToPoint:CGPointMake(22.5, 2.5)];
    [starPath addLineToPoint:CGPointMake(32.15, 9.21)];
    [starPath addLineToPoint:CGPointMake(41.52, 16.32)];
    [starPath addLineToPoint:CGPointMake(38.12, 27.57)];
    [starPath addLineToPoint:CGPointMake(34.26, 38.68)];
    [starPath addLineToPoint:CGPointMake(22.5, 38.92)];
    [starPath addLineToPoint:CGPointMake(10.74, 38.68)];
    [starPath addLineToPoint:CGPointMake(6.88, 27.57)];
    [starPath addLineToPoint:CGPointMake(3.48, 16.32)];
    [starPath addLineToPoint:CGPointMake(12.85, 9.21)];
    [starPath closePath];
    
    return starPath;
}

参考文章: iOS之UI--CAShapeLayer

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • IQKeyboardManager每次运行都会断点到Bug ID:#550

    傅_hc
  • iOS集成环信聊天和EaseUI之后出现警告:Warning! ivar size mismatch in PSUICollectionView_ - can't change the supercl

    傅_hc
  • Unity项目嵌入现有iOS项目的方法

    傅_hc
  • Docker 生产环境实践2

    1、3台主机:1台管理机、2台主机、1台日志服务器 管理机上ansible、配置文件、仓库、监控 2台主机安装keepalived 3台主机打通网络 1...

    用户5760343
  • 利用PS把多张psd格式的图片转换为一张PDF格式

    王小婷
  • SSL的单向认证和双向认证

    为了便于更好的认识和理解SSL协议,这里着重介绍SSL协议的握手流程。SSL协议既用到了公钥加密技术又用到了对称加密技术,对称加密技术虽然比公钥加密技术的速度快...

    合信ssl证书
  • nginx+iis实现负载均衡

      最近在研究分布式系统架构方面的知识,包括负载均衡,数据库读写分离,分布式缓存redis等。本篇先从负载均衡服务架构入手,关于负载均衡百度百科的定义如下:负载...

    用户1168362
  • 腾讯云学生服务器

    小编自己购买腾讯云学生服务器使用后可以说是想要强烈推荐给大家了。首先说说价格,腾讯云学生服务器1核2G只需要120元一年,更刺激的是用户完成学生信息填写,即能获...

    用户1361591
  • 七牛CEO许式伟:服务端开发那些事儿

    服务端开发对于任何互联网公司来讲,都并非易事,它所涉及的技术知识面非常广泛,如果开发人员的经验不足,将直接影响产品用户的体验。作为七牛云存储创始人,许式伟有着超...

    范蠡
  • CRM客户主数据UI上有哪些字段可以触发partner determination

    Subject: Jerry’s research on “Find out all fields which can be used to trigger ...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券