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:

enter image description here

score 12 · Answer 1 · answered Oct 30 '12 at 05:23

12

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

imageView.layer.shouldRasterize = YES;

answered Oct 30 '12 at 05:23

poetmountain

657
10
18

This worked perfect for me. Fixed jaggies on a regular UIView w/background color, rotated a few degrees. – mattorb Jul 08 '13 at 21:25

score 2 · Accepted Answer · answered Aug 01 '09 at 19:11

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.

Thanks for your explaination, but do you know how i can do this in objective c for the iphone. — Ton, Aug 01 '09 at 19:32
Maybe try setting CGInterpolationQuality to kCGInterpolationHigh — mmr, Aug 01 '09 at 19:43
Do you have a example on ho to set that value. I just have my imageView with an UIImage inside it know. — Ton, Aug 01 '09 at 22:17

score 2 · Answer 3 · answered Feb 20 '11 at 14:09

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

score 1 · Answer 4 · answered Aug 01 '09 at 18:23

1

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

answered Aug 01 '09 at 18:23

conceptDawg

732
3
12

Oke, but i don't think my image has slight softer edges, it really looks ugly!, could you take a look at the image and tell me if you think its normal? i included the link in my question. – Ton Aug 01 '09 at 18:37

score 0 · Answer 5 · edited May 23 '17 at 12:00

0

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

edited May 23 '17 at 12:00

Community

1
1

answered Nov 23 '12 at 00:16

DonnaLea

8,643
4
32
32

score 0 · Answer 6 · edited May 23 '17 at 12:31

0

The simplest solution:

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

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

edited May 23 '17 at 12:31

Community

1
1

answered Sep 03 '15 at 19:20

orkenstein

2,810
3
24
45

My rotated image doesn't have sharp edges

6 Answers6