Ruben's Dev Blog

Drawing Rotated Text

I’m taking a break from reading the Professional iPhone Programming with MonoTouch and .NET/C# book (which is awesome by the way) so I decided to write a little tutorial on drawing rotated text.

You can download the MonoDevelop solution here.

There are two drawing methods in the solution, one that shows you how to draw vertical text and one that shows you how to draw rotated text in a circle. Both use the CGAffineTransform object and are pretty similar, but I also show you how to measure a string’s width in the vertical text function.

Let’s take a look at the DrawRotatedText function first:

public static UIImage DrawRotatedText(string text, int width, int height) 
{
	float centerX = width / 2;
	float centerY = height / 2;
	
	//Create the graphics context
	CGBitmapContext ctx = new CGBitmapContext(IntPtr.Zero, width, height, 8, 4 * width, 
		CGColorSpace.CreateDeviceRGB(), CGImageAlphaInfo.PremultipliedFirst);
			
	//Set the font
	ctx.SelectFont("Arial", 16f, CGTextEncoding.MacRoman);	
	
	//Set the fill color to blue
	ctx.SetRGBFillColor(0f, 0f, 1f, 1f);

	//Set the drawing mode 
	ctx.SetTextDrawingMode(CGTextDrawingMode.Fill);
	
	//Draw the text every 22.5 degrees to complete a circle
	for (double angle = 22.5; angle <= 360; angle += 22.5)
	{
		ctx.TextMatrix = CGAffineTransform.MakeRotation((float)DegreesToRadians(angle));
		ctx.ShowTextAtPoint(centerX, centerY, text);
	}
	
	//Return the image
	return UIImage.FromImage(ctx.ToImage());
							 
}

If you’ve read my other MonoTouch drawing posts, you’ll see that the setup is pretty much the same. First create the drawing context, set the font, set the colors, and fill mode. The part that actually does the text rotation is line 22. You set the drawing context’s TextMatrix property equal to a CGAffineTransform object that comes from the static MakeRotation method by passing in a rotation angle in radians. The for loop simply creates a circle of text strings at the center of the image.

Now let’s look at the DrawVerticalText function:

public static UIImage DrawVerticalText(string text, int width, int height)
{
	float centerX = width / 2;
	float centerY = height / 2;
	
	//Create the graphics context
	CGBitmapContext ctx = new CGBitmapContext(IntPtr.Zero, width, height, 8, 4 * width, 
			CGColorSpace.CreateDeviceRGB(), CGImageAlphaInfo.PremultipliedFirst);
	
	//Set the font
	ctx.SelectFont("Arial", 16f, CGTextEncoding.MacRoman);
	
	//Measure the text's width - This involves drawing an invisible string to calculate the X position difference
	float start, end, textWidth;
	
	//Get the texts current position
	start = ctx.TextPosition.X; 
	//Set the drawing mode to invisible
	ctx.SetTextDrawingMode(CGTextDrawingMode.Invisible);
	//Draw the text at the current position
	ctx.ShowText(text);
	//Get the end position
	end = ctx.TextPosition.X;
	//Subtract start from end to get the text's width
	textWidth = end - start;
	
				
	//Set the fill color to blue
	ctx.SetRGBFillColor(0f, 0f, 1f, 1f);

	//Set the drawing mode back to something that will actually draw Fill for example
	ctx.SetTextDrawingMode(CGTextDrawingMode.Fill);
	
	//Set the text rotation to 90 degrees - Vertical from bottom to top.
	ctx.TextMatrix = CGAffineTransform.MakeRotation((float)DegreesToRadians(90));
	//Draw the text at the center of the image.
	ctx.ShowTextAtPoint(centerX - 5, centerY - (textWidth / 2), text);
	
	//Set the text rotation to 270 degrees - Vertical from top to bottom.
	ctx.TextMatrix = CGAffineTransform.MakeRotation((float)DegreesToRadians(270));
	//Draw the text as the center of the image.
	ctx.ShowTextAtPoint(centerX + 5, centerY + (textWidth / 2), text);
	
	//Return the image
	return UIImage.FromImage(ctx.ToImage());
}

So again this looks very similar, to get vertical text you just need to set the rotation angle to 90 degrees for bottom to top text or 270 degrees for top to bottom text.

The function will also center the text in the middle of the image. To do this you need to know what the width of the text will be. There is no Graphics.MeasureString function so you need to do it the Quartz 2d way which involves getting the current text position, setting the draw mode to invisible, drawing the string, getting the end text position, then subtracting the starting position from the end position. Now you can do some simple math to center your text something like (width / 2 – (textWidth / 2), remember to adjust your calculations when you do rotations because you won’t be dealing with just the X coordinate at that point and you may not be drawing from left to right.

Now go add some crazy rotating text to your MonoTouch apps.

MonoTouch Progress Bar

Here is a simple MonoTouch app that demonstrates how to use Quartz2D to draw custom progress bars.  You can download the MonoDevelop project here.

This app shows how to draw a simple two color progress bar using alpha transparency and a simple two color gradient progress bar.  There are sliders that let you control the colors, transparency level, and progress percentage.  The code uses the CGBitmapContext class to create an image and loads it into UIImageView.

This is the function to create a basic progress bar:

private UIImage makeProgressImage(int width, int height, float progress, CGColor baseColor, CGColor topColor)
{
   //Create a CGBitmapContext object
   CGBitmapContext ctx = new CGBitmapContext(IntPtr.Zero, width, height, 8, 4 * width, CGColorSpace.CreateDeviceRGB(), CGImageAlphaInfo.PremultipliedFirst);

   //Draw a rectangle with the base color
   ctx.SetFillColorWithColor(baseColor);
   ctx.FillRect(new RectangleF(0,0, width, height));

   //Calculate the width of the 2nd rectangle based on the progress
   float percentWidth = width * progress;

   //Draw the second rectangle with the top color
   ctx.SetFillColorWithColor(topColor);
   ctx.FillRect(new RectangleF(0, 0, percentWidth, height));

   //return a UIImage object
   return UIImage.FromImage(ctx.ToImage());
}

This is the function to create a gradient progress bar:

private UIImage makeGradientProgressImage(int width, int height, float progress, float[] components, float[] locations)
{
   //Create a CGBitmapContext object
   CGBitmapContext ctx = new CGBitmapContext(IntPtr.Zero, width, height, 8, 4 * width, CGColorSpace.CreateDeviceRGB(), CGImageAlphaInfo.PremultipliedFirst);

   //Calculate the width of the rectangle based on the progress
   float percentWidth = width * progress;

   //Create a gradient object
   CGGradient gradient = new CGGradient(CGColorSpace.CreateDeviceRGB(), components, locations);

   //Draw a linear gradient to represent the progress bar
   ctx.DrawLinearGradient(gradient, new PointF(0, 0), new PointF(percentWidth, 0), CGGradientDrawingOptions.DrawsBeforeStartLocation);

   //return a UIImage object
   return UIImage.FromImage(ctx.ToImage());
}

Note that these functions are fairly generic and you should be able to reuse them in any of your applications. See the MonoDevelop project for examples on how to use them.  They are also very simple and can be extended to draw “prettier” progress bars without too much effort.  I’ll cover drawing pie charts in my next post.