iOS_UIGraphics_图片拉伸

Posted on Edited on In Word count in article: 1.1k Reading time ≈ 1 mins.

通常我们写代码为了减小体积，为了保证显示效果，只放一张 @3x 的图片，但是在使用 UIGraphics 相关 api 绘制拉伸图片的时候会有问题。

TL;DR:

1. 放两张图片解决问题 
2. 放一张图片时 `UIGraphicsBeginImageContextWithOptions` 的 scale 参数，传 image.scale 来确保显示效果

假如我们有一张这个图片 @3x 的图片

是用如下代码进行拉伸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
UIImage *img = [UIImage imageNamed:@"ic_camera_desc_right"];
img = [img stretchableImageWithLeftCapWidth:img.size.width / 2 topCapHeight:img.size.height / 2];
UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, img.size.height), NO, UIScreen.mainScreen.scale);
[img drawInRect:CGRectMake(0, 0, 200, img.size.height)];
UIImage *aimg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

UIImageView *imgV = [[UIImageView alloc] initWithImage:aimg];
[self.view addSubview:imgV];

[imgV mas_makeConstraints:^(MASConstraintMaker *make) {

    make.top.left.equalTo(@100);
    make.width.equalTo(@(200));
    make.height.equalTo(@(img.size.height));
}];

则在 iPhone 8 上显示如下

在 iPhone 13 Pro Max 上符合预期

其原因是因为 UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, img.size.height), NO, UIScreen.mainScreen.scale); 中 缩放比例不对导致的，只有 3x 图时，在 iPhone 8 上 image 的 scale 为 3，而 UIScreen.mainScreen.scale 为 2，二者不一样，导致出现问题。二者一样，即可解决问题。