关于image.scale的问题

最新推荐文章于 2025-06-16 16:48:06 发布

rv0p111

最新推荐文章于 2025-06-16 16:48:06 发布

阅读量7.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ios-开发

本文链接：https://blog.youkuaiyun.com/ZCMUCZX/article/details/79524325

ios-开发专栏收录该内容

251 篇文章

订阅专栏

本文探讨了 iOS 开发中 UIImage 的 scale 属性及如何影响图片在 UIView 上的显示。详细介绍了通过调整 layer.contentsGravity 和 contentsScale 来正确显示不同分辨率的图片，并避免拉伸失真。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言：

这个属性也是之前偶然发现，这边就做下对这个属性的目前已经知道的总结吧。

一、解析

首先其实image.scale是由我们决定的。经过测试，我们将图片放到这里面的1x、2x、3、位置，其的image.scale分别变成了1，2，3，也就是说，我们把图片拉到这其中的三个不同的位置（1x、2x、3x）的时候，对应的image.scale是不一样的，哪怕我们下面的这个图片是05@2x.png，如果我们把它放到的是1x的位置，那么这张图片的scale还是1.0

二、实战

如果我们想将图片绘制到UIView上面去的时候，我们可以这么做，由于layer.contentsGravity默认为kCAGravityResize，所以这张图片就会适应UIView的大小。

    UIImage * image = [UIImage imageNamed:@"05"];
    
    NSLog(@"%f",image.scale);
    
    testView.layer.contents = (__bridge id _Nullable)(image.CGImage);

而我们一旦改变了layer.contentsGravity为kCAGravityTop或者是kCAGravityLeft或者是kCAGravityRight或者是kCAGravityBottom等等只要不是调整尺寸到适应view大小的选项就会发现图片发生了拉伸，变得很大，这里就设置为下面这个选项，然后测试下效果

testView.layer.contentsGravity = kCAGravityTop;

就会发现，变成了这样的效果，为什么？因为它读取了@2x的图片，但是我们在用CGImage来设置我们的图层的内容时,拉伸这个因素在转换的时候就丢失了，所以我们的图片被当做是1倍图片来处理了，所以图片的尺寸就放大了。这里需要注意的是默认情况下，UIView仍然会绘制超过边界的内容或者子视图，在CALayer下也是这样。也就是说比如说我们这张图片的分辨率是456 × 346，这样显示出来的尺寸大小也是这么大。

为了解决在使用CGImage来绘制的时候的问题，我们可以采用设置layer的一个属性contentsScale来解决，对于这个其实官方文档也是有所提及，也就是说在对于我们自己创建和管理的layer，我们应该必须根据屏幕的分辨率和所提供的内容来设置该属性的值。

The default value of this property is 1.0. For layers attached to a view, the view changes the scale factor automatically to a value that is appropriate for the current screen. For layers you create and manage yourself, you must set the value of this property yourself based on the resolution of the screen and the content you are providing. Core Animation uses the value you specify as a cue to determine how to render your content.

testView.layer.contentsScale = 2;

这样尺寸就变成了228x173了。因为当我们设置了contentsScale，可以理解成就相当于把这张图片当成是2倍图片来处理了。可以理解成这个时候就把1个点当成是两个像素点来处理了。

这里为什么说尺寸变成了一半，代码实践其实也是很好做出来的。比如说我们把contentsGravity设置为了下面的kCAGravityBottomLeft，这个时候图片的左上角的x和y是和testView的x和y是对齐的。

testView.layer.contentsGravity = kCAGravityBottomLeft;

然后我们再去创建一个view它的x，y，width，height分别设置为下面的属性，会发现是正好覆盖上去的。

UIView * view1 = [[UIView alloc]initWithFrame:CGRectMake(testView.frame.origin.x, testView.frame.origin.y, 228, 173)];
    
    view1.backgroundColor = [UIColor purpleColor];
    
    [self.view addSubview:testView];
    //在testView后面添加
    [self.view addSubview:view1];

这里再介绍一个layer.contentsRect，这个属性就是控制显示的区域大小，就比如说原本的图像大小是正好填充一个view的，用的是图片的全部内容。

当我们设置了

testView.layer.contentsRect = CGRectMake(0, 0, 0.5, 0.5);

截取的图片如下所示