CALayer类中的“ contentsCenter”属性是什么意思？

Question

这是原始图像。origin image

我将其设置如下：

self.layerView.contentsCenter = CGRectMake(0.25, 0.25, 0.5, 0.5);

然后显示如下：change image

但是根据苹果公司的解释，应该缩放而不是消失，您可以看到更改图像的中心部分消失。

发生了什么？

您能帮我吗，谢谢。

---

完整代码：

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic,strong) UIView *erView;
@property (nonatomic,strong) CALayer *layerView;
@end

@implementation ViewController

#pragma mark - life cycle

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setUpView];
}

#pragma mark - set up

- (void)setUpView{
    self.view.backgroundColor = [UIColor redColor];
    self.erView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];
    [self.view addSubview:self.erView];
    self.layerView = [CALayer layer];
    self.layerView.frame = CGRectMake(0, 0, 200, 200);
    self.layerView.backgroundColor = [UIColor blueColor].CGColor;
    [self.erView.layer addSublayer:self.layerView];
    UIImage *image = [UIImage imageNamed:@"picture"];
    [self addSpriteImage:image withContentRect:CGRectMake(0, 0, 1, 1) toLayer:self.layerView];
    self.layerView.contentsCenter = CGRectMake(0.25, 0.25, 0.5, 0.5);
}

- (void)addSpriteImage:(UIImage *)image withContentRect:(CGRect)rect toLayer:(CALayer *)layer{
    layer.contents = (__bridge id)image.CGImage;
    layer.contentsGravity = kCAGravityResizeAspect;
    layer.contentsRect = rect;
}

---

@@ zrzka，谢谢您的回复，对我来说非常有用！我知道很多当我读到《 iOS CoreAnimation Advanced Techniques》这本书时，我感到有些困惑：

• image1显示作者对此代码的解释与您的解释相同。

self.layerView.contentsCenter = CGRectMake(0.25, 0.25, 0.5, 0.5);

image3

• 如果contentsCenter更改如下：

self.layerView.contentsCenter = CGRectMake(0.25, 0.25, 0.8, 0.8);

它会像这样显示，最让我感到困惑的是...

image4

• “水平，有点像1像素（宽度）”。为什么水平（1像素）与垂直（0像素）不同？

• 我如何实现像image5这样的两种效果？

image5

Answer 1

代码：

let image = UIImage(named: "origin")
contentsView.contentMode = .scaleAspectFit
contentsView.layer.contents = image?.cgImage
contentsView.layer.contentsCenter = CGRect(x: 0.25, y: 0.25, width: 0.5, height: 0.5);

这是预期的，它取决于两件事：

• 图像本身有多大，
• 视图/图层有多大。

彩色叠加：

• 绿色-图像的这一部分未拉伸
• 红色-图像的此部分垂直拉伸，但不水平拉伸
• 蓝色-图像的此部分水平拉伸，但不垂直拉伸
• 黄色-图像的此部分在水平和垂直方向上拉伸

拉伸是什么意思？可以将其拉伸成较大的图像或较小的图像。较小的图像表示宽度/高度甚至可以为零。

比较这两个屏幕截图：

• 在左侧-这是您的原始图片
• 在右边-这是您的原始图像，带有叠加的颜色

发生了什么事？

• 您未要求拉伸绿色部分
• 垂直
  • 红色和黄色部分是否有空间？
  • Nah，未绘制，基本上拉伸到0高度
• 水平
  • 蓝色和黄色部分是否有空间？
  • 有点像1个像素（宽度）
  • 将其拉伸到1像素并绘制它

---

更新：

如果contentsCenter更改如下：

self.layerView.contentsCenter = CGRectMake(0.25, 0.25, 0.8, 0.8);

它将显示为...

contentsCenter文档：

默认情况下，此属性中的值设置为单位矩形contentsCenter，这将导致整个图像在两个维度上缩放。如果您指定的矩形延伸outside单位矩形，则结果为undefined。

[(0.0,0.0) (1.0,1.0)您是在说这句话：

• 顶部/左侧部分-图像宽度的25％，图像高度的25％
• 顶部/中央部分-图像宽度的80％，图像高度的25％
• 顶部/右侧部分-图像宽度的25％，图像高度的25％
• ...

您已经在单位矩形之外-25％宽度（t / l）+ 80％宽度（t / c）+ 25％宽度（t / r）= 130％宽度（1.3> 1.0）。结果是不确定的。

Answer 2

@@ zrzka，谢谢您的回复，对我来说非常有用！我知道很多当我读到《 iOS CoreAnimation Advanced Techniques》这本书时，我感到有些困惑：

• image1显示作者对此代码的解释与您相同。

0.25, 0.25, 0.8, 0.8

self.layerView.contentsCenter = CGRectMake(0.25, 0.25, 0.5, 0.5);

• 如果contentsCenter更改如下：

image1

它将像这样显示，最让我感到困惑的是...

self.layerView.contentsCenter = CGRectMake(0.25, 0.25, 0.8, 0.8);

• “水平，有点像1像素（宽度）”。为什么水平（1像素）与垂直（0像素）不同？

• 我如何实现像image3这样的两种效果？

image2