My rotated image doesn't have sharp edges

Question

I am rotating my image with the following code:

CGAffineTransform rotate = CGAffineTransformMakeRotation( [ratio floatValue] );
[imageView setTransform:rotate];

But it doesn't have sharp edges, does someone know a solution for this?

Here's the image I get:

Answer 1

The edges of the image itself look jagged because they are being placed into a pixel grid directly, and not being interpolated. Nearest Neighbor Interpolation is the simplest kind of interpolation, where if you have pixel grid A and you move your image to pixel grid B, the pixels in grid B are chosen by simply choosing the closest pixel from grid A. Other forms of interpolation choose a weighted average of the closest pixels to arrive at the pixel value in grid B.

Your image, with its jagged edges, looks like it's using nearest neighbor interpolation, which may be the default type of interpolation on an affine transform on an iphone.

When you use some other interpolation scheme other than nearest neighbor, you'll get aliasing effects, where the subsampling isn't perfect as you transfer from one pixel grid to another. That effect makes edges in the image itself seem blurrier than they otherwise would.

Answer 2

Using the UIImageView's CALayer to rasterize the image will provide the best antialiasing.

imageView.layer.shouldRasterize = YES;

Answer 3

just add 1px transparent border to your image

CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);
UIGraphicsBeginImageContext( imageRect.size ); 
[image drawInRect:CGRectMake(1,1,image.size.width-2,image.size.height-2)];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Answer 4

Anytime you do transforms on an image (except in 90° increments) it is going to cause slightly softer edges due to pixel interpolation.

Answer 5

There is a key that you can set in Info.plist that enables antialiasing of the edges: UIViewEdgeAntialiasing.

As described in the following answer: When I rotate an UIImageView with the transform property, the edges pixellate

Answer 6

The simplest solution:

Simply add this key-value pair to your Info.plist: UIViewEdgeAntialiasing set to YES.

https://stackoverflow.com/a/12066215/1469060