NSString drawInRect overlaps all characters

Question

I am attempting to fill some text with a gradient-fill, where by I set the text drawing mode to clipping, and then paint a gradient-fill. The problem is, whenever I set the text drawing mode to clip, every character of the text string is placed on top of each other, rather than being painted in a sequence to form a word - it is most bizarre!

My code looks like this:

CGRect r = CGRectInset(self.frame, 55, 8);   

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGFloat components[8] = {44/255, 54/255, 66/255, 1.0
      ,75/255, 92/255, 111/255, 1.0};
CGFloat locations[2] = {0, 1};

// draw the text's gradient fill
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, 2);

CGContextSetTextDrawingMode(context, kCGTextClip);


[monthString drawInRect:r withFont:f lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentCenter];

CGContextFillRect(context, CGRectMake(0, 0, 320, 20));

Answer 1

It appears that the UIKit NSString additions that let you do drawInRect:withFont: and the like don't play well with the kCGTextClip drawing mode. I've seen the same behavior, and in this answer I provide code to fill text with a gradient using pure Quartz drawing calls. The downside to this approach is that you are limited to the MacRoman text encoding, which lacks support for many Unicode symbols.

Alternatively, this post describes a means of drawing gradient-filled text using a UILabel and a gradient image for the text's background.