5

I have an square white image against a black back ground. When i rotate the image the edges become very jagged. Its really doesn't look good. Are there any settings that you can use to get the phone to smoothen out the image when it manipulates it? Or is the only real option to ask the artist to use some artist technique like anti aliasing(dont know if thats the correct term) or something? I've seen minificationFilter in the docs for scaling.. maybe there is something like this that might be appropriate for my problem that I haven't found in the docs yet. Any hints guys?

Many Thanks, -Code

2 Answers2

12

To add 1px transparent border to your image use this 

    CGRect imageRrect = CGRectMake(0, 0, image.size.width, image.size.height);
    UIGraphicsBeginImageContext( imageRrect.size ); 
    [image drawInRect:CGRectMake(1,1,image.size.width-2,image.size.height-2)];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
Onnmir
  • 1,030
  • 14
  • 17
5

If you don't have iOS 4 / openGL to hand, there's a hack that works almost as well. Leave a 1px transparent border around all youur images - the transparent border is jagged but you can't tell because it's transparent. The inside of the image should look smooth :)

Though obviously this only works easily if you have access to the original images. Otherwise you have to load the image, render it into a graphics context with the border and use the new image :( If you have the originals / access to the designer, just tell him/her to add 1px transparent border and your current code should 'just work'

deanWombourne
  • 38,189
  • 13
  • 98
  • 110
  • Really? Full transparent or semi transparent? I would imagine some invisible pixels wouldn't make an difference because the white pixels are still there beside the invisible pixels. Like right not except the invisible pixels aren't apart of the image now ;) Its an interesting theory Dean ;) –  Nov 10 '10 at 00:05
  • Fully transparent. Literally a 1px border round the image with 0 alpha. When you rotate an image only the borders are not antialiased - the internal pixels in the image are blended nicely. This means that the transparent pixels look terrible but hey, they're transparent so we can't see them. The visible edge of the image is antialiased with the transparent border so we get an antialised looking edge. Try it ;) – deanWombourne Nov 11 '10 at 12:46
  • This technique was recommended at a WWDC 2011 presentation (I forget which). – titaniumdecoy Oct 19 '11 at 21:53
  • Cool! It's always nice to know I'm doing at least something right :) – deanWombourne Oct 20 '11 at 11:45
  • I tried this using event.media.imageWithTransparentBorder(1) when saving the image I get from showCamera. I can see it has a transparent border, but the edge of the image is still jagged. Has anyone used imageWithTransparentBorder successfully? – Andreas Jan 09 '12 at 19:56