Using Geometric Transforms for Text Effects in .NET
Like this article? We recommend
Like this article? We recommend
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.
)
Figure 1 Untransformed text used in the examples.
)
Figure 2 Text 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.
g.ScaleTransform(1.0F, -1.0F)
)
Figure 3 Text reflected about the x axis.
Shearing
Shearing tilts the text in one direction or another. Figure 4 shows text that has been sheared to the left.
)
Figure 4 Text sheared to the left.
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.
)
Figure 5 Text sheared vertically.
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:
g.RotateTransform(45);
)
Figure 6 Text rotated 45 degrees clockwise.
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.