Using Geometric Transforms for Text Effects in .NET

Peter Aitken points out that text is just a graphic image and therefore can be manipulated like any other graphic. .NET provides some built-in tools for manipulating the size, shape, and orientation of text. Just be sure it remains readable!

Like this article? We recommend

Geometric transforms let you take an image and distort it in some
way, such as rotation, translation, flipping, or stretching. Geometric
transforms are a rather complex topic and are well beyond explaining in a single
article. But you can learn and use one very handy aspect of transforms without a
lot of fuss: creating special text effects. After all, text is just a graphic
image of letters and other characters, so transforming the images geometrically
should—and does—work perfectly well.

How can you transform text? The possibilities fall into four main
categories:

Scaling. Stretch or shrink the text in the vertical and/or
horizontal direction.

Reflection. Create a mirror image of text.

Shearing. Tilt and slant the text in various ways.

Rotation. Display text at any desired angle.

Now let’s see how to create these transforms.

Transforms and Matrices

In .NET, geometric transforms are represented by matrixes. You may remember
from math class that a matrix is a grid of numbers. But even if you don’t
know a matrix from a mango, you can still work with many transforms. It’s
true that for some of the more complex transforms you must create the
transformation matrix yourself, in code, but for the commonly needed transforms
the required tools are built in. A transformation matrix is still at work behind
the scenes, but the .NET classes take care of the details for you.

Scale Transforms

A scale transform changes the size of a graphic in the x and/or y
direction. Figure 1 shows untransformed text (used in all the examples in this
article), and Figure 2 shows text that has been scaled by a factor of 2 in the y
direction.

To apply a scale transform, you call the ScaleTransform() method of
the Graphics object that will be used to do the drawing. In this and
other code examples assume that g is a reference to your
Graphics object. Here’s the syntax:

g.ScaleTransform(Xscale, Yscale)

The two arguments, both of type float, specify the scaling in the x
and y directions; pass a value of 1 for no scaling. The following
example stretches the graphic to twice its normal width while leaving the height
unchanged:

g.ScaleTransform(2.0F, 1.0F)

Reflection

Reflecting a graphic also makes use of the ScaleTransform()
method. By passing a negative argument for Yscale, you reflect about
the x axis (flip vertically); by passing a negative argument for
Xscale, you reflect about the y axis (flip horizontally). The following
code causes a reflection about the x axis, as shown in Figure
3.

Shearing

Shearing is a bit more complicated than the other transforms we’ve
examined so far, because it requires that you create a matrix for the transform.
Fortunately, the Matrix class offers the Shear() method to do
the work for you. These are the steps:

Create an instance of the Matrix class.

Call its Shear() method to define the desired shear amount and
direction.

Assign the Matrix object to the Transform property of your
Graphics object.

The Shear method uses this syntax:

Shear(Xshear, Yshear)

A value of 0 specifies no shear in that direction. To shear
horizontally to the left or right, pass a positive or negative Xshear
value. Here’s the relevant code snippet for the transform shown in Figure
4.

Matrix m = new Matrix();
m.Shear(0.5F, 0);
g.Transform = m;

To shear vertically down or up, pass a positive or negative Yshear
value. Vertical shearing works as shown in Figure
5. At first glance, this
example looks like a rotation, but, unlike true rotation (covered in the next
section), the individual letters remain upright with vertical shearing.

Rotation

Rotation is another transform that can be done with a Graphics class
method, specifically RotateTransform(). Pass an argument specifying the
rotation in degrees; positive values rotate clockwise and negative values rotate
counterclockwise. Figure
6 shows the result of the following transform:

Transforms and Output Coordinates

Transforms work behind the scenes by changing the x and y coordinates of the
individual pixels in the image. Unavoidably, some transforms change not only the
appearance of the text but its output location. You’ll see this principle
demonstrated in the program in the following section; please examine the code to
see how it accounts for these location changes. You can also experiment on your
own to get a feel for how the various transforms change output location.