CALayer Class中的属性 "contentsCenter"是什么意思？

Question

这是原始图像。 origin image

我设置如下：

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

然后显示如下： change image

但根据Apple的解释，它应该是缩放而不是消失，你可以看到变化图像的中心部分消失了。

发生了什么事？

你能帮帮我吗，谢谢。

完整代码：

#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

"A bit, like 1 pixel (width) " 水平。为什么水平（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);

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

图片本身有多大，
view/layer有多大。

颜色叠加：

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

拉伸是什么意思？它可以拉伸成更大的图像或更小的图像。较小的图像意味着它甚至可以为零 width/height.

比较这两个截图：

左边 - 这是您的原始图像
右侧 - 这是添加了颜色叠加层的原始图像

发生了什么事？

你要求不要拉伸绿色部分
垂直
- 红色和黄色部分有空间吗？
- 不，没画，基本拉伸到0高度
横向
- 蓝色和黄色部分有空间吗？
- 有点，像1个像素（宽度）
- 将其拉伸至 1 个像素并绘制

更新：

If the contentsCenter changed as follow:
self.layerView.contentsCenter = CGRectMake(0.25, 0.25, 0.8, 0.8);
it will display like ...

contentsCenter 文档：

The value in this property is set to the unit rectangle (0.0,0.0) (1.0,1.0) by default, which causes the entire image to scale in both dimensions. If you specify a rectangle that extends outside the unit rectangle, the result is undefined.

0.25, 0.25, 0.8, 0.8 你是这样说的：

top/left 部分 - 图像宽度的 25%，图像高度的 25%
top/center 部分 - 图像宽度的 80%，图像高度的 25%
top/right 部分 - 图像宽度的 25%，图像高度的 25%
...

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

"A bit, like 1 pixel (width) " in Horizontal. why is Horizontal(1 pixel) different from Vertical(0 pixel)?

这是一道简单的数学题。一旦你绘制了未拉伸的 top/left & top/right 部分，top/center 是否有 space？不，不会被画出来。是的，将被绘制和拉伸以适应 space。同样适用于垂直方向。

how can i implement the two kind of effects like 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 (search for Defining a Stretchable Image) & resizableImage(withCapInsets:resizingMode:) 实现此目的，您可以在其中定义以像素为单位的插图。

CALayer Class中的属性 "contentsCenter"是什么意思？

What is the property "contentsCenter" mean in CALayer Class?

objective-c

calayer

uiview

ios

swift