Anti-aliasing processing method for image deformation

[[148963]]

Preface

I saw @周楷雯Kevin talking about CALayer anti-aliasing issues on Weibo over the weekend

The specific steps are:

layer.allowsEdgeAntialiasing = true  

I remembered that I encountered a similar problem a long time ago. At that time, I had to make a sticker-like application, so of course I would encounter the problem of sticker scaling and rotation, so the aliasing problem also needed to be solved. But at that time, it was the era of iOS 4 and 5, and there was no such thing as allowsEdgeAntialiasing mentioned above (this thing was not released until iOS 7, but it is said that iOS 6 can also be used, but it is black technology... you know)

So I asked for help from stackoverflow and got a very simple but not simple method, which is what I said on Weibo. Just leave a one-pixel transparent border on the image to be displayed and it will be done.

method

The method is relatively simple. I wrote it as a UIImage Category method and it has been sitting in my tool library for years (I only remembered it when I encountered this problem).

- (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;
 }

Let’s take a look at the actual effect first

It can be seen that if no processing is done during rotation, there will be obvious aliasing. Using the transparent edge method or setting allowsEdgeAntialiasing can eliminate aliasing.

Next, let’s take a look at the performance comparison of these two methods. The test method is to rotate 500 UIImageViews on my iPhone 5S and compare the frame rates. The results are as follows

The results show that the performance of allowsEdgeAntialiasing is still slightly worse than the transparent edge method, so...

• If your application needs to support iOS6- you can refer to the transparent border method. The only disadvantage is that the image will be a little smaller than the original one (I cut off the 1px border directly. Of course, you can also add a 1px transparent border directly outside the image)

• If your app only supports iOS7, it is recommended to use allowsEdgeAntialiasing for easy and convenient settings. If you feel that the performance is difficult, you can consider the transparent edge method.

summary

The demo in this article can be found here

The testing method may not be very rigorous (I wrote this article on the spur of the moment so it didn't take me too much time). If there are any errors, please point them out.