使用resizableImageWithCapInsets+drawInRect绘图出现异常线条问题咨询

首先明确说：contentsScale并不强制要求是整数，但非整数取值确实容易触发可拉伸图片的渲染 artifacts，尤其是你遇到的异常线条问题。下面具体拆解原因和解决办法：

为什么整数contentsScale没问题？ #

当contentsScale是整数（比如2.0对应@2x屏幕）时，图层的逻辑坐标和屏幕物理像素是严格的整数倍映射关系。你用resizableImageWithCapInsets生成的图片，其cap区域和可拉伸区域的拼接边缘，会刚好落在物理像素的边界上——Core Graphics不需要做半像素插值，自然不会出现模糊或异常线条。

非整数contentsScale的问题根源 #

当contentsScale为非整数（比如2.6087）时，逻辑坐标到物理像素的转换是浮点运算，这会导致可拉伸图片的拼接边缘落在半像素位置。Core Graphics默认会对这些边缘做抗锯齿插值处理，但这种插值在cap区域和拉伸区域的衔接处，很容易产生异常的线条（可能是淡色的缝隙、重影，或者颜色偏移）。本质是因为可拉伸图片的拼接逻辑，没有考虑非整数scale下的像素对齐问题。

验证与解决办法 #

1. 优先使用屏幕原生scale（推荐） #

绝大多数场景下，直接使用设备屏幕的原生scale就足够了：

layer.contentsScale = [UIScreen mainScreen].scale;

这个值通常是整数（2.0、3.0），能完美匹配物理像素，从根源避免问题。

2. 手动对齐像素边界（必须用非整数scale时） #

如果业务场景确实需要自定义非整数scale，你需要确保capInsets的尺寸在物理像素层面是整数：

CGFloat customScale = 2.6087;
UIEdgeInsets originalInsets = UIEdgeInsetsMake(10, 10, 10, 10); // 你的原始capInsets
// 计算对齐后的insets：确保inset * scale是整数
UIEdgeInsets adjustedInsets = UIEdgeInsetsMake(
    round(originalInsets.top * customScale) / customScale,
    round(originalInsets.left * customScale) / customScale,
    round(originalInsets.bottom * customScale) / customScale,
    round(originalInsets.right * customScale) / customScale
);
// 用调整后的insets生成可拉伸图片
UIImage *resizableImage = [originalImage resizableImageWithCapInsets:adjustedInsets];

这样处理后，cap区域和拉伸区域的边缘在物理像素上是对齐的，不会触发半像素插值。

3. 改用UIImageView替代手动绘制 #

如果不需要手动调用drawInRect:，直接用UIImageView来展示可拉伸图片：

UIImageView *imageView = [[UIImageView alloc] initWithImage:resizableImage];
imageView.contentMode = UIViewContentModeScaleToFill;
imageView.layer.contentsScale = customScale;

系统会自动处理scale和像素对齐，通常能避免手动绘制带来的异常。

4. 临时关闭抗锯齿（不推荐） #

如果以上方法都不适用，可以在绘图上下文里关闭抗锯齿，但这会让图片边缘变得 jagged，影响视觉体验：

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetShouldAntialias(context, NO);
[resizableImage drawInRect:drawRect];

内容的提问来源于stack exchange，提问作者jft0m