Question

I have a view with custom drawRect method which has two text lines drawn in fixed width.
This view is being redrawn constantly at rate of about 16 timer per second with position of text and content of text changing all the time.
I also need my text to be drawn in such a way that it is clearly visible at any background, and for that purpose I do the following:

CGContextSetTextDrawingMode(ctx, kCGTextStroke);        // Border mode
[string drawAtPoint:point withFont:font];
CGContextSetTextDrawingMode(ctx, kCGTextFill);          // Text mode
[string drawAtPoint:point withFont:font];

This code draws the text in border mode with fixed line width, and then draws the text again at same position but in fill mode. In this way I get a blue text with white border around each letter.

The result is absolutely satisfactory for me except the performance.
Using Time Profiler I’ve noticed that about 70% of time spent for drawing the whole view is spent on execution of drawing the text in border (stroke) mode. But drawing in fill mode takes only 3% of the whole view drawing time. I think that this is not efficient considering the frequency of redrawing of the view.

So does anybody know how to draw the text with border around each letter in more efficient way?

Answer 1

Two options:

1. Use a shadow instead of drawing the outline: CGContextSetShadowWithColor
2. Cache the image of the string and it’s outline using a CGLayer: CGLayerCreateWithContext

Explanation for 2:

Drawing text is highly optimized for the standard case where the letters are just filled with one color. Individual glyphs (letters) are not rendered from the outline each time. Instead the glyphs are drawn only once into buffered images which are cached and reused.

Since drawing outlines is seldom there’s probably no caching of glyphs or other optimizations for this mode. So the idea is to do the caching yourself: Draw the whole string into one image, keep that image around and draw it instead of the text from within your drawRect: method.

There are several options how to do that:

1. Use a CGBitmapContext
2. Use UIGraphicsBeginImageContext
3. Use a CGLayer