中文

iOS 中的抗锯齿处理思路小结

张思琦

Jan 24, 2018

当 UI 控件由于旋转或者图片自身问题而产生锯齿现象的时候，我们通常有三种解决方案：

开启UI控件的抗锯齿功能
绘制带有 1 像素透明边的图片
使用更清晰的素材

以下面的例子为例，左侧为非抗锯齿视图，右侧为抗锯齿视图：

锯齿现象的细节

开启抗锯齿功能

当锯齿现象是由于 UI 控件自身引起的时候，例如旋转，形变等，我们就可以使用iOS 自带的抗锯齿功能来解决这一问题。

如果想开启全局抗锯齿的话，可以在 info.plist 中加入以下 key-value。

但由于该功能会造成性能上的损耗，苹果官方并不推荐使用这种全局开启的方式，我们只需要对特定的视图开启即可

layer.allowsEdgeAntialiasing = YES

绘制带有 1 像素透明边的图片

如果有问题的视图是显示一个静态资源或者动画过程中可以呈现为静态内容（例如在 imageView 里模拟 gif），那么我们就可以使用该方法。

将视图渲染为 UIImageView 并且将边界值为设置为 1，此时 UIImageView 就会自动处理它

我们看一下使用该方法处理后的效果图

代码实现起来较为简单，可以写成 UIImage 的 Category 方法，示例代码如下

- (UIImage *)antiAlias
{
    CGFloat border = 1.0f;
    CGRect rect = CGRectMake(border, border, self.size.width-2*border, self.size.height-2*border);

    UIImage *img = nil;
    
    UIGraphicsBeginImageContext(CGSizeMake(rect.size.width,rect.size.height));
    [self drawInRect:CGRectMake(-1, -1, self.size.width, self.size.height)];
    img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    UIGraphicsBeginImageContext(self.size);
    [img drawInRect:rect];
    UIImage* antiImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return antiImage;
}