How to rotate text drawn by Quartz on iPhone

Question

I want to draw some texts using Quartz. Now the app draws

, but I want it to show as "0123456789". Is there any way to show its normal orientation?

Here is my code:

    //set image view
 drawImage = [[UIImageView alloc] initWithImage:nil];
 drawImage.frame = self.view.frame;
 [self.view addSubview:drawImage];

 UIGraphicsBeginImageContext(self.view.frame.size);  // begin
 // current context
 CGContextRef context = UIGraphicsGetCurrentContext();

 CGContextSelectFont(context, "Courier", 40,  kCGEncodingMacRoman);
 CGFloat white[] = {1.0, 1.0, 1.0, 1.0};
 CGContextSetFillColor(context, white);
 CGContextShowTextAtPoint(context, 0, 30, "0123456789", strlen("0123456789"));

 // get image
 drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();    // end

Answer 1

In Quartz, the image will be upside down because its Y-Axis is inverted.

iPhone's Y axis goes positive from top to bottom i.e. origin is at top left while in Quartz and OpenGL, the co-ordinates are the same way as good old geometry i.e. origin at bottom left.

Here is some code for solving Quartz inversion problem:

CGContextRef ctx = UIGraphicsGetCurrentContext();
// Tanslate and scale upside-down to compensate for Quartz's inverted coordinate system
CGContextTranslateCTM(ctx, 0.0, rect.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);

Here is an interesting post about it where the author says a team in Singapore gave up an iPhone project due to this inversion problem which they could not figure out: http://trandangkhoa.blogspot.com/2009/07/iphone-os-drawing-image-and-stupid.html

Answer 2

Another way to handle this would be to replace the Quartz text drawing code (from CGSelectFont() to CGContextShowTextAtPoint ()) with something like

[text drawAtPoint:CGPointMake(0.0f, 30.0f) withFont:[UIFont fontWithName:@"Courier" size:40.0f]];

where text is an NSString. On the iPhone, -drawAtPoint:withFont: automatically flips the text to account for the inverted Y axis of the UIViews.

This approach gives you the advantage of handling a wider character set than the MacRoman encoding in the pure Quartz text drawing can. However, it is slightly slower.

Answer 3

What do you mean, exactly, by "rotate them to the normal mode"?

Assuming you just mean rotation within a 2D space, you would typically use a transform matrix. Have a look at CGAffineTransformMakeRotation.

You could apply it to the view itself (by setting the transform property), or to the CG context you have.

Answer 4

Well this solved my problem

CGContextSetTextMatrix(context, CGAffineTransformMake(1.0,0.0, 0.0, -1.0, 0.0, 0.0));