Recipe 9.18. Rotating Text to Any Angle

Problem

You want to draw some text onto the output canvas and rotate it by a specific number of degrees.

Solution

Sample code folder: Chapter 09\DrawingText

The code for Recipe 9.17 includes features that let you rotate text in 15-degree increments. The code will not be repeated in full in this recipe, but this recipe's discussion will expand on the text-rotation features in more detail.

Discussion

The sample code in Recipe 9.17 includes two transformations to the canvas. As mentioned in other recipes, transformations impact every drawing command made to the canvas surface, preprocessing all drawing commands for size, position, and rotation before the output appears on the canvas. The sample code performs two transformations: one that repositions the (0,0) origin (or center point) from the upper-left corner of the canvas to the center of the canvas, and one that rotates the canvas by a user-specified amount. Here is the relevant code:

 ' ----- Move the (0,0) origin to the center of the display. e.Graphics.TranslateTransform( _    DrawingArea.ClientRectangle.Width / 2, _    DrawingArea.ClientRectangle.Height / 2) ' ----- Rotate the world if requested. If (DisplayRotate.Value <> 0) Then    e.Graphics.RotateTransform(DisplayRotate.Value) End If 

Rotating text is a byproduct of canvas rotation; although the user sees the text rotate, your code acts as if the canvas itself is being rotated under the drawing pens. This means that it is not the text that is rotated, but the world of the canvas, and this rotation occurs around the (0,0) origin of the canvas.

In the sample code, the goal is to rotate the text so that the center of the text's bounding box stays in the center of the display. The movement of the origin through the TranslateTransform() method call is required to properly rotate the text about its center point. If the code had left the origin at the upper-left corner of the canvas, the rotation would have occurred around that point, and some rotation angles would have moved the text right off the display. The left half of Figure 9-27 shows the out-put of text rotated at a 45-degree angle according to the sample code: the text rotates about its own center because the origin of the canvas world was moved to that same position. The right half of the figure shows what would have happened if the origin had remained at the upper-left corner of the PictureBox control.

Figure 9-27. Rotating the text's bounding box when the origin has been moved to the center of the canvas (left) and when it remains at the default upper-left corner (right)

Although the sample code allows rotations only in 15-degree increments, you can pass any valid degree value to the RotateTransform() method.

See Also

Recipe 9.17 contains the code discussed in this recipe.