Inverted NSString Figure in CGContext

Question

I am trying to draw a string in this texture:

http://picasaweb.google.it/lh/photo/LkYWBv_S_9v2d6BAfbrhag?feat=directlink

but the green numbers seem vertical. I created my context this way:

colorSpace = CGColorSpaceCreateDeviceRGB(); data = malloc(height * width * 4); context = CGBitmapContextCreate(data, width, height, 8, 4 * width, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big); 

and I will draw the lines:

  UIGraphicsPushContext(context); for(int i=0;i<packs.size();++i) { CGPoint points[4] = { gltextures[i].texCoords[0] * size.width, //0 gltextures[i].texCoords[1] * size.height, //1 gltextures[i].texCoords[2] * size.width, //2 gltextures[i].texCoords[3] * size.height, //3 gltextures[i].texCoords[4] * size.width, //4 gltextures[i].texCoords[5] * size.height, //5 gltextures[i].texCoords[6] * size.width, //6 gltextures[i].texCoords[7] * size.height //7 }; CGRect debugRect = CGRectMake ( gltextures[i].texCoords[0] * size.width, gltextures[i].texCoords[1] * size.height, gltextures[i].width, gltextures[i].height ); CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]); CGContextAddLines(context, points, 4); CGContextClosePath(context); CGContextDrawPath(context, kCGPathStroke); NSString* s = [NSString stringWithFormat:@"%d",gltextures[i].texID]; UIFont* font = [UIFont fontWithName:@"Arial" size:12]; CGContextSetRGBFillColor(context, 0, 1, 0, 1); [s drawAtPoint:points[0] withFont:font]; } UIGraphicsPopContext(); 

The transformation matrix looks like an Identity matrix ... CGAffineTransform is applied to this context. If the line is upside down, perhaps all my images are upside down! Any suggestion?

PS: sorry for my english;)

Answer 1

As described here , the coordinate system for the context inside the UIView or its layer is inverted compared to the usual quartz drawing space. However, when using quartz to draw on the image, this is no longer the case. Cocoa Touch's UIStringDrawing category on NSString, which gives you the -drawAtPoint: method withFont: assumes an inverted layout and why you see inverted text in your image.

One way around this would be to preserve the state of the graphic, apply the inverted transform to the image, draw text, and restore the old state of the graphic. It looks something like this:

 CGContextSaveGState(context); CGContextTranslateCTM(context, 0.0f, self.bounds.size.height); CGContextScaleCTM(context, 1.0f, -1.0f); [text drawAtPoint:CGPointMake(0.0f, 0.0f) withFont:font]; CGContextRestoreGState(context); 

This is a rather crude example, because I believe that it simply draws text at the bottom of the image, but you should be able to adjust the translation or coordinate of the text to place it where necessary.

Answer 2

It is better to save the text matrix before drawing, otherwise it will affect another text drawing from CoreGraphic:

 CGContextSaveGState(ctx); CGAffineTransform save = CGContextGetTextMatrix(ctx); CGContextTranslateCTM(ctx, 0.0f, self.bounds.size.height); CGContextScaleCTM(ctx, 1.0f, -1.0f); [str drawAtPoint:point withFont:font]; CGContextSetTextMatrix(ctx, save); CGContextRestoreGState(ctx);