图层的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


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

查看所有标签

猜你喜欢:

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

The Smashing Book

The Smashing Book

Jacob Gube、Dmitry Fadeev、Chris Spooner、Darius A Monsef IV、Alessandro Cattaneo、Steven Snell、David Leggett、Andrew Maier、Kayla Knight、Yves Peters、René Schmidt、Smashing Magazine editorial team、Vitaly Friedman、Sven Lennartz / 2009 / $ 29.90 / € 23.90

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create succes......一起来看看 《The Smashing Book》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具

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

HEX CMYK 互转工具