3

Objective-C Answers are fine, I am using MonoTouch for reference.

I am writing text on top of a UIImage. Retina displays the font in a choppy way. Looks pixel doubled, which I guess is what's happening. How can I get a crisp Font written to a UIImage?

 //context is a CGBitmapContext

 context.SetFillColor (color.CGColor);
 context.SelectFont (font.Name, font.PointSize, CGTextEncoding.MacRoman);

 context.SetTextDrawingMode (CGTextDrawingMode.Fill);
 context.ShowTextAtPoint (pt.X, pt.Y, text);

enter image description here

Ian Vink
  • 66,960
  • 104
  • 341
  • 555

2 Answers2

6

when you create image context, you should call the

UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale);

not the regular UIGraphicsBeginImageContext, this will generate a context capable display in Retina display.

Allen
  • 6,505
  • 16
  • 19
  • Brilliant, brilliant, brilliant ! Thank you. I was having the same issue (fonts appearing fuzzy, when drawn onto an UIImage) and this fixed it perfectly. – Mike Gledhill Jul 09 '13 at 10:11
1

Try rounding the coordinates at which you display your text. Also check of the button as a whole is on integer offsets. If you position elements at non-integer offsets, iOS will happily go and interpolate your graphics, rendering things "fuzzy".

mvds
  • 45,755
  • 8
  • 102
  • 111
  • While your answer is correct in some instances in this instance it is not correct. By drawing into a CGBitmapContext sized for a non retina display the image will be rasterised small and then scaled up. Drawing away from pixel boundaries is only really needed in a regular context when the backing store may or may not be double the point size – jackslash Feb 15 '12 at 23:01
  • But who says that the contents of this CGBitmapContext are eventually displayed at integer offsets? – mvds Feb 15 '12 at 23:06
  • it doesn't matter if they are or not, the fact is that CGBitmapContexts are sized in pixels, not points and as such will not automatically adjust for retina displays. The pixelization the developer is seeing is being caused by pixel doubling and not aligning the font to a pixel offset. – jackslash Feb 15 '12 at 23:09
  • Oh now I understand what you mean. Given the equally pixelated arrows and rather big text, I assumed we were shown a zoomed in version of the actual graphics. Because then still, the vertical line in the dollar sign is more fuzzy than necessary (4px semi-transparent, where I'd expect 2px solid) and the text is more fuzzy than I would expect. We need to see more code. – mvds Feb 15 '12 at 23:46