Centered images are blurry

Question

I' have a lot of png's with different sizes, and i want to load them into a table. I have this code:

charImage.image = [self imageForId:g.charId glyphNr:g.glyphNr];
[charImage sizeToFit];
//charImage.contentMode = UIViewContentModeCenter;
charImage.center = CGPointMake(30, 23);

Everything works fine except that my pngs are blurry. If i don't center them, are extremely sharp. They are all made from curves. I didn't exported them all, so is still a chance to export with a fixed size and the drawings already centered, but i want to know if i'm doing something wrong or incomplete. Why are they blurry?

I think is not possible to upload any photo here..

Answer 1

This will make sure the frame is at integer coordinates:

int centerX = 30;
int centerY = 23;
CGSize size = charImage.frame.size;
charImage.frame = CGRectMake((int)(centerX - size.width / 2),
                             (int)(centerY - size.height / 2),
                             size.width, size.height);

The difference between this and

charImage.center = CGPointMake(30, 23);

is that the .center setter could set the origin to a non-integer point when either of the width or height is of the wrong parity. As other people have said here, images and text look blurry when they're at non-integer coordinates.

Answer 2

This happens because the pngs get placed at sub-pixel positions. Using sizeToFit together with UIViewContentModeCenter makes this happen. When you don't use UIViewContentModeCenter, the views are placed at (0.0, 0.0), and hence do not blur.

If you want to avoid blur, first don't use sizeToFit, then use this to center the image:

image.frame = CGRectMake(round(centerX - image.frame.size.width / 2.0),
                         round(centerY - image.frame.size.height / 2.0),
                         image.frame.size.width,
                         image.frame.size.height);

Answer 3

you might use calculated coordinates instead of contentMode:

charImage.frame = CGRectMake(x,y,width,height)