How to flip curve-fitted text using Core Graphics? - ios

Question

My app draws a bunch of circles and then draws text within them following the curves as shown below.
The problem as you can see is that some of the text is upsidedown. Its easy enough for me to detect cases where this will happen, so I set about trying to invert that text. The result however is as follows...
As you can see, the letter spacing has been totally jumbled.
I've gotten stuck at this point, I can't see how its losing the spacing so badly & trial and error has failed to find a fix. Any help would be much appreciated. A snippet of the relevant part of my code is below.
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/ 180)
- (void)drawCurvedLabelForText:(NSString *)titleText withAngle:(float)angle centre:(CGPoint)centre andRadius:(float)textRadius
{
CGContextRef context = UIGraphicsGetCurrentContext();
UIFont *font = [UIFont systemFontOfSize:16.0f];
char *fontName = (char *)[font.fontName cStringUsingEncoding:NSASCIIStringEncoding];
CGContextSelectFont(context, fontName, 12, kCGEncodingMacRoman);
float perimeter = 2 * M_PI * textRadius;
// detect if text is upside-down and needs rotating
BOOL invert = (angle > DEGREES_TO_RADIANS(180.0f);
if (invert)
{
titleText = [self reverseString:titleText];
}
// draw each letter in turn, with correct rotation for each
for (NSUInteger index=0; index<[titleText length]; index++)
{
CGContextSaveGState(context);
NSRange range = {index, 1};
NSString *letter = [titleText substringWithRange:range];
char *c = (char *)[letter cStringUsingEncoding:NSASCIIStringEncoding];
CGSize charSize = [letter sizeWithFont:font];
float x = centre.x + textRadius * cos(angle);
float y = centre.y + textRadius * sin(angle);
float rotateAngle = 0.5 * M_PI;
if (invert)
{
// flip the letter 180 degrees the opposite direction so its not upsidedown
rotateAngle = -0.5 * M_PI;
}
// Flip the coordinate system
CGContextSetTextMatrix(context, CGAffineTransformMake(1.0,0.0,0.0,-1.0,0.0,0.0));
// draw the text
CGContextTranslateCTM(context, x, y);
CGContextRotateCTM(context, (angle - rotateAngle));
CGContextShowTextAtPoint(context, 0, 0, c, strlen(c));
CGContextRestoreGState(context);
float letterAngle = (charSize.width / perimeter * -2 * M_PI);
angle += letterAngle;
}
}
- (NSString *)reverseString:(NSString *)source
{
NSMutableString *target = [NSMutableString string];
NSUInteger index = [source length];
while (index > 0)
{
index--;
NSRange subStringRange = NSMakeRange(index, 1);
[target appendString:[source substringWithRange:subStringRange]];
}
return target;
}
Note that I've typed it in by hand, making alterations along the way so its more standalone than my actual code which uses class properties, so its possible there's mistakes in the above but the logic should be clear.
My assumption is that "letterAngle", which uses the width of the last drawn letter to determine how much to add onto the "angle" variable for the placement of the next letter, is somehow wrong when the letters are being rotated 180 degrees. Either that or the rotation is shifting it to a different location & I need to offset it somehow with the x/y coordinates. I haven't found answers with either of these though & its possible it could be something else.

Answer 1

Here's a work-around answer, but not really a satisfactory one - use the only monospaced font available on iOS which is Courier. This rotates the text and keeps the spacing the same.
With all other fonts the issue remains unsolved as yet.