• CALayer设置圆角


    CALayer设置圆角

    CALayer,无论是view,button,label,textfield等都有这个属性。通过设置其layer来控制各种属性,比如:bounds、position、backgroundColor、cornerRadius等等。

    以下设置CALayer的圆角及其他属性。

        //创建layer
        CALayer *layer = [CALayer layer];
        //设置bounds
        layer.bounds = CGRectMake(0, 0, 100, 100);
        //设置中心点位置(默认中心点)
        layer.position = CGPointMake(200, 200);
        //背景颜色
        layer.backgroundColor = [UIColor orangeColor].CGColor;
        //添加到视图上
        [self.view.layer addSublayer:layer];

    设置圆角以及其它内容,使其显示出裁剪内容。(图一:原来图片--图二:裁剪后)

      图一   图二

    代码如下:

     1 //  1.圆角
     2     layer.cornerRadius = layer.bounds.size.width/2.0;
     3 //  2.contents设置内容
     4     UIImage *image = [UIImage imageNamed:@"pkq.jpg"];
     5     //需要桥接
     6     layer.contents = (__bridge id)(image.CGImage);
     7 //  3.裁剪
     8     layer.masksToBounds = YES;
     9 //  4.设置边框(边框跟着变成了圆的)
    10     layer.borderColor = [UIColor orangeColor].CGColor;
    11     layer.borderWidth = 5.f;
    12 // 5.阴影和边界剪裁是不能同时使用的,因为阴影本身就是渲染到边界外面的。 因此要重新用一个图层
    13     CALayer *shadowLayer = [CALayer layer];
    14     //阴影bounds、position与layer.bounds,layer.position相同
    15     shadowLayer.bounds = layer.bounds;
    16     shadowLayer.position = layer.position;
    17     //这里也是重点:阴影需要有剪裁,如果不剪裁,就会出现原始模样
    18     shadowLayer.cornerRadius = layer.cornerRadius;
    19     shadowLayer.backgroundColor = [UIColor whiteColor].CGColor;
    20     //此处将shadowLayer插入到layer之下
    21     [self.view.layer insertSublayer:shadowLayer below:layer];
    22     //设置阴影--颜色、偏移量、透明度
    23     shadowLayer.shadowColor = [UIColor grayColor].CGColor;
    24     shadowLayer.shadowOffset = CGSizeMake(8, 8);
    25     shadowLayer.shadowOpacity = 1.f;

    在设置的时候,应该注意以下几点:

    1. 阴影和边界剪裁是不能同时使用的,因为阴影本身就是渲染到边界外面的。
    2. 因此要重新用一个图层。阴影需要有剪裁,如果不剪裁,就会出现原始模样。
    3. 将shadowLayer插入到layer之下

    接下来进行操作,代码如下:

    1 //  6.1 位移  旋转  缩放
    2     //6.1.1位移
    3     layer.transform = CATransform3DMakeTranslation(-100, 100, 0);
    4     //6.1.2叠加位移(在现有基础上变化,继6.1.1以后 恢复原来位置)
    5     layer.transform = CATransform3DTranslate(layer.transform, 100, -100, 0);
    6 //  6.2.1 旋转 (-1,0,1) 倒着转,不转,正着转
    7     layer.transform = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
    8 //  6.3缩放(以中心点缩放,view也是)
    9     layer.transform = CATransform3DMakeScale(.5, .5, .5);

    以上是对layer进行操作,由于将其设置为圆,当其旋转的时候是看不到它的变化的,但是放一张图片就可以看出来。

    _translayer的变化

     1 //  6.4 近大远小
     2     _translayer = [CALayer layer];
     3     _translayer.bounds = CGRectMake(0, 0, 100, 100);
     4     _translayer.position = CGPointMake(100, 100);
     5     _translayer.backgroundColor = [UIColor blackColor].CGColor;
     6     [self.view.layer addSublayer:_translayer];
     7     //立体感觉,近大远小
     8     _trans = CATransform3DIdentity;
     9     //300.f指的是到屏幕距离-一般是 800
    10     _trans.m34 = 1/100.f;

    _translayer设置为全局的变量。  1 _Link = [CADisplayLink displayLinkWithTarget:self selector:@selector(time)] ; 2 [_Link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];

     3 
     4 - (void)action {
     5     //这是黑色图片的动画,具有3D效果
     6     _trans = CATransform3DRotate(_trans, M_PI * .1 * 1/rate, 1, 0, 0);
     7     _translayer.transform = CATransform3DTranslate(_trans, 0, 0, 1);
     8 }
     9 
    10 - (void)time {
    11     
    12     static int a = 0;
    13     if (a != 60/rate) {
    14         
    15         [self action];
    16     }
    17   // a ++;
    18 }

    此处转动比较慢,容易看出近大远小的效果。如果需要转动比较快,改变每秒钟的中的那个角度即可。( M_PI * 自定义可变 * 1/rate)

    文章错误请指正。转载请标明出处。欢迎查阅。

  • 相关阅读:
    vue-route+webpack部署单页路由项目,访问刷新出现404问题
    linux下安装大于2T硬盘,并分区替换现有mysql数据目录挂载点实现扩容
    linux下将mbr分区转换为gpt分区
    [go]接口型函数分析
    Type-C协议简介(CC检测原理)
    RocketMQ 重试机制
    RocketMQ与Kafka对比-评价版
    分布式开放消息系统(RocketMQ)的原理与实践
    mysql8.0的RPM方式安装
    nacos集群配置笔记
  • 原文地址:https://www.cnblogs.com/david-han/p/4851353.html
Copyright © 2020-2023  润新知