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 高级技术》这本书时，有一些让我感到困惑的是：

• 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);

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

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

颜色叠加：

• 绿色 - 这部分图像没有被拉伸
• 红色 - 这部分图像被垂直拉伸，但不是水平拉伸
• 蓝色 - 这部分图像被水平拉伸，但不是垂直
• 黄色 - 这部分图像被水平和垂直拉伸

拉伸是什么意思？它可以拉伸成更大的图像或更小的图像。较小的图像意味着它甚至可以是零宽度/高度。

比较这两张截图：

• 在左侧 - 这是您的原始图片
• 在右侧 - 这是您的原始图像，添加了彩色叠加层

发生了什么？

• 您要求不要拉伸绿色部分
• 垂直
  • 红色和黄色部分有空间吗？
  • 不，没有画出来，基本上拉伸到0高度
• 水平
  • 蓝色和黄色部分有空间吗？
  • 一点点，比如 1 个像素（宽度）
  • 将其拉伸到 1 个像素并进行绘制

---

更新：

如果 contentsCenter 改变如下：

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

它将显示为...

contentsCenter 文档：

此属性中的值默认设置为单位矩形(0.0,0.0) (1.0,1.0)，这会导致整个图像在两个维度上进行缩放。如果您指定的矩形延伸超出单位矩形，结果是未定义。

0.25, 0.25, 0.8, 0.8 你是在说：

• 顶部/左侧部分 - 图片宽度的 25%，图片高度的 25%
• 顶部/中心部分 - 图片宽度的 80%，图片高度的 25%
• 顶部/右侧部分 - 图片宽度的 25%，图片高度的 25%
• ...

您已经在单位矩形之外 - 25% 宽度 (t/l) + 80% 宽度 (t/c) + 25% 宽度 (t/r) = 130% 宽度 (1.3 > 1.0)。结果未定义。

---

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

这是一个简单的数学运算。一旦您绘制了未拉伸的顶部/左侧和顶部/右侧部分，顶部/中心是否有空间？不，不会被绘制。是的，将被绘制和拉伸以适应空间。同样适用于垂直方向。

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

• CGRectMake 接受四个参数 - x、y、width、height。
• 假设您要避免拉伸所有角部分（它们的大小相等），并且角部分的大小是图像大小的 20% x 10%。
• x = 0.2
• y = 0.1
• width = 1.0 - 2 * x = 1.0 - 2 * 0.2 = 0.6
• height = 1.0 - 2 * y = 1.0 - 2 * 0.1 = 0.8
• CGRectMake(0.2, 0.1, 0.6, 0.8)

您也可以使用UIImage（搜索定义可拉伸图像）和resizableImage(withCapInsets:resizingMode:) 来实现此目的，您可以在其中定义以像素为单位的插图。