图层的contents,contentsGravity,contentsRectangle,contentsCenter

栏目: IOS · 发布时间: 5年前

内容简介:运行结果

contents

CAlayer的contents属性设置图层要显示的图片,我们要给contents属性赋值的类型应该是CGImageRef类型,UIImage对象有一个CGImage属性,它返回的是一个CGImageRef类型的数据,但是CGImageRef并不是一个真正的cocoa对象,而是一个Core Foundation对象,所以我们需要利用bridged关键字将其转化为cocoa对象。

使用contents属性:

self.centerLayer = [CALayer layer];    
    UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"麦克风" ofType:@"png"]];    
    self.centerLayer.frame = CGRectMake(60, 100, 200, 200);    
    self.centerLayer.contents = (__bridge id)image.CGImage;
        
    [self.view.layer addSublayer:self.centerLayer];    self.centerLayer.backgroundColor = [UIColor redColor].CGColor;

得到结果如图:

图层的contents,contentsGravity,contentsRectangle,contentsCenter

运行结果

我们看到上面一张图的运行结果,其实这个麦克风的原图并不是这么大的。但是我们平时在使用contents属性的时候好像并没有怎么特别设置,不管是多大尺的寸图好像都能完美适应我们的图层,这个就是contentsGravity属性的作用了。

实际上当我们没有设置图层的contentsGravity属性的时候,其默认是 kCAGravityResize。图层的contentsGravity属性是一个NSString类型的枚举值,其可取的值如下:

  • kCAGravityCenter

  • kCAGravityTop

  • kCAGravityBottom

  • kCAGravityLeft

  • kCAGravityRight

  • kCAGravityTopLeft

  • kCAGravityTopRight

  • kCAGravityBottomLeft

  • kCAGravityBottomRight

  • kCAGravityResize

  • kCAGravityResizeAspect

  • kCAGravityResizeAspectFill

    下面我们一个一个来做实验,看看这些枚举值到底对图片做了什么。

  • kCAGravityCenter

    self.centerLayer.contentsGravity = kCAGravityCenter;

图层的contents,contentsGravity,contentsRectangle,contentsCenter kCAGravityCenter
  • 可以看到,当枚举值为kCAGravityCenter时,这时图片并没有做任何处理和改变,只是中心位置和图层的中心位置对齐。

  • kCAGravityTop

    self.centerLayer.contentsGravity = kCAGravityTop;

图层的contents,contentsGravity,contentsRectangle,contentsCenter kCAGravityTop

  • 当枚举值为kCAGravityTop时,图片没有做任何处理和改变,只是底部和图层对齐。

  • kCAGravityBottom

    self.centerLayer.contentsGravity = kCAGravityBottom;

图层的contents,contentsGravity,contentsRectangle,contentsCenter

  • 当枚举值为kCAGravityBottom时,图片没有做任何处理和改变,仅顶部和图层对齐。

  • kCAGravityLeft

    self.centerLayer.contentsGravity = kCAGravityLeft;

图层的contents,contentsGravity,contentsRectangle,contentsCenter

kCAGravityLeft

  • 图片本身没有改变,仅图片左边和图层左边对齐。

  • kCAGravityRight

    self.centerLayer.contentsGravity = kCAGravityRight;

图层的contents,contentsGravity,contentsRectangle,contentsCenter kCAGravityRight

  • 图片本身没有变化,仅右边和图层右边对齐。

  • kCAGravityTopLeft

    self.centerLayer.contentsGravity = kCAGravityTopLeft;

图层的contents,contentsGravity,contentsRectangle,contentsCenter kCAGravityTopLeft

  • 对齐左下角。

  • 其他的枚举值kCAGravityTopRight,kCAGravityBottomLeft,kCAGravityBottomRight分别为对齐右下角,对齐左上角,对齐左下角,但是它们均没有改变图片本身。

  • kCAGravityResize

    当我们不设置contentsGravity属性时,其默认的美剧类型即为 kCAGravityResize。

  • kCAGravityResizeAspect

    self.centerLayer.contentsGravity = kCAGravityResizeAspect;

图层的contents,contentsGravity,contentsRectangle,contentsCenter kCAGravityResizeAspect
  • 我们可以看到kCAGravityResizeAspect枚举值时,看到的图片比例很协调,果是这个枚举值,那么图片会等比例缩放,如果是缩小,那么会等比例的缩小,知道整个图片能够完全放进图层。如果是放大,那么就是等比例放大,直到长和宽有一边达到图层的边界。

  • kCAGravityResizeAspectFill

    self.centerLayer.contentsGravity = kCAGravityResizeAspectFill;

图层的contents,contentsGravity,contentsRectangle,contentsCenter

kCAGravityResizeAspectFill

  • 这个枚举值和上面的很相似,都是等比例的缩放,不同的是这一个是,在缩小时,缩小到长和宽有一个和图层一致就停止缩小。放大时。等到长和宽都达到图层的边界就停止放大。

contentsRect

图层的这个属性决定了显示图层的那一部分,它使用的是单位坐标,比如 self.centerLayer.contentsRect = CGRectMake(0, 0, 0.5, 0.5) 就是显示图片的左上角这四分之一的区域。

下面看示例代码:

self.centerLayer = [CALayer layer];    
    UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"麦克风" ofType:@"png"]];    
    self.centerLayer.frame = CGRectMake(60, 100, 200, 200);    
    self.centerLayer.contents = (__bridge id)image.CGImage;    
    self.centerLayer.contentsGravity = kCAGravityResizeAspectFill;    
    self.centerLayer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);

    [self.view.layer addSublayer:self.centerLayer];    
    self.centerLayer.backgroundColor = [UIColor redColor].CGColor;
图层的contents,contentsGravity,contentsRectangle,contentsCenter 运行结果

从运行结果可以清楚的看到,其实就是取图片的左上角四分之一进行处理,其余的操作一丢丢都没变。

contentsCenter

contentsCenter是一个CGRect,其定义了图片进行拉伸时其在图片上可拉伸的区域。

图层的contents,contentsGravity,contentsRectangle,contentsCenter

比如设contentsCenter = CGRectMake(0.25, 0.25, 0.5, 0.5),那么如上图所示,对这个图进行拉伸的时候,中间那一部分会等比例的拉伸,左右的红色区域在宽度上不会变,也就是不会在水平方向上拉伸,上下的蓝色在高度上不会变,也就是不会在竖直方向上拉伸,会在水平方向上拉伸,而四个角则不会拉伸,这也是要拉伸的区域拉伸多少的一个标尺。

作者:雪山飞狐_91ae

链接:https://www.jianshu.com/p/83082ece1aa2


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Go语言实战

Go语言实战

威廉·肯尼迪 (William Kennedy)、布赖恩·克特森 (Brian Ketelsen)、埃里克·圣马丁 (Erik St.Martin) / 李兆海 / 人民邮电出版社 / 2017-3-1 / CNY 59.00

Go语言结合了底层系统语言的能力以及现代语言的高级特性,旨在降低构建简单、可靠、高效软件的门槛。本书向读者提供一个专注、全面且符合语言习惯的视角。Go语言实战同时关注语言的规范和实现,涉及的内容包括语法、类型系统、并发、管道、测试,以及其他一些主题。一起来看看 《Go语言实战》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具