Any quick and dirty smoothing methods for rotated UIImageView?

Question

I have a UIImageView (full frame and rectangle) that I rotate using CGAffineTransform. UIImage UIImageView fills the entire frame. When the image is rotated and drawn, the edges appear noticeably jagged. Is there anything I can do to look better? This clearly does not smooth out with the background.

Answer 1

Remember to set the appropriate anti-aliasing options:

CGContextSetAllowsAntialiasing(theContext, true); CGContextSetShouldAntialias(theContext, true); 

Answer 2

The edges of CoreAnimation layers are not anti-aliased by default on iOS. However, there is a key that you can set in Info.plist that allows you to smooth edges: UIViewEdgeAntialiasing.

https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/iPhoneOSKeys.html

If you do not want performance overhead to enable this option, the workaround is to add a transparent 1px border around the edge of the image . This means that the "edges" of the image are no longer on the edge, so they do not need special processing!

Answer 3

New API - iOS 6/7

Also works for iOS 6, as @Chris noted, but was not published until iOS 7.

Starting with iOS 7, CALayer has a new allowsEdgeAntialiasing property that does exactly what you want in this case, without any overhead, to enable it for all views in your application! This is a CALayer property, so to enable UIView you use myView.layer.allowsEdgeAntialiasing = YES .

Answer 4

just add 1px transparent border to your image

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

Answer 5

just add "Renders with edge antialiasing" with YES to the plist and it will work.

Answer 6

I would fully recommend the following library.

http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/

It contains many useful extensions for UIImage that solve this problem, and also includes code for creating thumbnails, etc.

Enjoy it!

Answer 7

The best way to find smooth edges and sharp images is to do this:

 CGRect imageRect = CGRectMake(0, 0, self.photo.image.size.width, self.photo.image.size.height); UIGraphicsBeginImageContextWithOptions(imageRect.size, NO, 0.0); [self.photo.image drawInRect:CGRectMake(1, 1, self.photo.image.size.width - 2, self.photo.image.size.height - 2)]; self.photo.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); 

Adding the Info.plist key, as described in some cases, greatly affects performance, and if you use it, you basically apply it to everything, and not just to the one place where you need it.

Also, don't just use UIGraphicsBeginImageContext(imageRect.size); otherwise the layer will be blurred. You should use UIGraphicsBeginImageContextWithOptions , as I showed.

Answer 8

I found this solution from here and it is perfect:

 + (UIImage *)renderImageFromView:(UIView *)view withRect:(CGRect)frame transparentInsets:(UIEdgeInsets)insets { CGSize imageSizeWithBorder = CGSizeMake(frame.size.width + insets.left + insets.right, frame.size.height + insets.top + insets.bottom); // Create a new context of the desired size to render the image UIGraphicsBeginImageContextWithOptions(imageSizeWithBorder, NO, 0); CGContextRef context = UIGraphicsGetCurrentContext(); // Clip the context to the portion of the view we will draw CGContextClipToRect(context, (CGRect){{insets.left, insets.top}, frame.size}); // Translate it, to the desired position CGContextTranslateCTM(context, -frame.origin.x + insets.left, -frame.origin.y + insets.top); // Render the view as image [view.layer renderInContext:UIGraphicsGetCurrentContext()]; // Fetch the image UIImage *renderedImage = UIGraphicsGetImageFromCurrentImageContext(); // Cleanup UIGraphicsEndImageContext(); return renderedImage; } 

using:

 UIImage *image = [UIImage renderImageFromView:view withRect:view.bounds transparentInsets:UIEdgeInsetsZero];