Terrific Transformations : Page 3

Common Transformations
A particularly common graphic operation is to rotate or stretch a drawing around a point other than the origin. Deriving the mathematics for this operation directly would be hard but building the transformation out of simpler ones is relatively easy.

For example, suppose you want to rotate a drawing 30 degrees around the point (100, 200). You can build this transformation by first translating the point (100, 200) to the origin, rotating 30 degrees around the origin, and then translating the point that's still at the origin back to (100, 200). The following code shows how you could do this for the Graphics object gr:

   gr.TranslateTransform(-100, -200, Drawing2D.MatrixOrder.Append)
   gr.RotateTransform(30, Drawing2D.MatrixOrder.Append)
   gr.TranslateTransform(100, 200, Drawing2D.MatrixOrder.Append)

The RotateAround method shown in the following code makes this type of combined transformation easier. It takes the center and angle of rotation as parameters and builds the combined transformation for you:

   ' Rotate around the indicated point.
   Private Sub RotateAround(ByVal gr As Graphics, _
    ByVal X As Single, ByVal Y As Single, ByVal degrees As Single)
       ' Translate to center the rectangle at the origin.
       gr.TranslateTransform(-X, -Y, Drawing2D.MatrixOrder.Append)
   
       ' Rotate.
       gr.RotateTransform(degrees, Drawing2D.MatrixOrder.Append)
   
       ' Translate the result back to its original position.
       gr.TranslateTransform(X, Y, Drawing2D.MatrixOrder.Append)
   End Sub

The following event handler code shows how a program might use this method. The code draws a rectangle, calls the RotateAround method to rotate around the rectangle's center, and then draws the same rectangle again:

Figure 5. Rotating Around a Point: The RotateAround method makes it easy to rotate around an arbitrary point.

   ' Draw the original rectangle.
   e.Graphics.DrawRectangle(Pens.Red, 50, 50, 100, 100)
   
   ' Rotate 30 degrees around the rectangle's center.
   RotateAround(e.Graphics, 100, 100, 30)
   
   ' Draw the rectangle.
   e.Graphics.DrawRectangle(Pens.Green, 50, 50, 100, 100)

Figure 5 shows the result. Compare this to Figure 3, which shows a rectangle rotated around the origin.

Using a similar transformation compositing technique, you can create a ScaleAround method that translates a point to the origin, scales, and then translates the origin back to its original position. For example, ScaleAround would let you scale an object around its center, making it bigger or smaller without moving it.

Centering Pictures
Some other useful transformations involve drawing an object inside a given area. Common ways you might want to draw the object include:

Figure 6. Sizing Content to Fit: Program FitToBoxes uses transformations to fit smiley faces into PictureBoxes in different ways.

• Drawing the object as it is without any transformations
• Drawing the object centered in the area
• Drawing the object stretched to fill the area
• Drawing the object as large as possible within the area without stretching it

The example program FitToBoxes (download here), shown in Figure 6, demonstrates each of these alternatives. The program's DrawSmiley subroutine draws a smiley face in the rectangle -20 <= x <= 20, -20 <= y <= 20. The series of images in the program's top row shows the smiley untransformed, centered in its display area, stretched to fill the display area, and enlarged as much as possible without stretching in a relatively tall and thin display area. The bottom picture shows the smiley enlarged without stretching in a relatively short and wide display area.

Program FitToBoxes includes several functions that make using these common transformations easier. Each function returns a transformation matrix that the program can assign to a Graphics object's Transform property.

For example, the following code shows how the program draws the centered smiley face:

   Dim world_rect As New RectangleF(-20, -20, 40, 40)
   e.Graphics.Transform = _
       CenterWorld(world_rect, PictureBox2.ClientRectangle)
   DrawSmiley(e.Graphics)

This code makes a RectangleF to define the area occupied by the smiley face in its native or world coordinate system. It calls the CenterWorld method to build a transformation that maps the world coordinate rectangle onto the device coordinate rectangle where the smiley face should be displayed. CenterWorld returns a matrix representing the necessary transformation, which the code assigns to the Graphics object's Transform property. The code then simply calls the DrawSmiley method to draw the smiley face; the transformation centers the result.

The following code shows the CenterWorld function. It first calculates how far from the left and top edges of the device coordinate rectangle the world coordinates must be positioned to center the result. It creates a new Matrix object and calls its Translate method to make the Matrix represent the necessary translation. The function then returns the Matrix:

   ' Make a transformation that centered the world coordinate 
   ' rectangle in the device coordinate rectangle.
   Private Function CenterWorld(ByVal world_rect As RectangleF, _
    ByVal device_rect As RectangleF) As Matrix
       ' Find the necessary left and top margins.
       Dim l_margin As Integer = _
           device_rect.Left - world_rect.Left + _
           (device_rect.Width - world_rect.Width) \ 2
       Dim t_margin As Integer = _
           device_rect.Top - world_rect.Top + _
           (device_rect.Height - world_rect.Height) \ 2
   
       ' Make the transformation.
       Dim result As New Matrix()
       result.Translate(l_margin, t_margin)
       Return result
   End Function

The following code shows the StretchToFitWorld function, which returns a transformation matrix that stretches a world coordinate rectangle to fit a device coordinate rectangle. It first defines an array of PointF objects that contain the coordinates of the device rectangle's upper left, upper right, and lower left corners. It then creates a Matrix object, passing its constructor the world coordinate rectangle and the coordinate array. This version of the Matrix class's constructor automatically creates a transformation mapping the world rectangle onto the rectangle defined by the array of three points. (Note that it can also map the world rectangle onto a skewed parallelogram if the three corner points don't define a rectangle.)

   ' Make a transformation that maps a world coordinate 
   ' rectangle to device coordinate rectangle.
   Private Function StretchToFitWorld( _
    ByVal world_rect As RectangleF, _
    ByVal device_rect As RectangleF) As Matrix
       Dim pts() As PointF = { _
           New PointF(device_rect.Left, device_rect.Top), _
           New PointF(device_rect.Right, device_rect.Top), _
           New PointF(device_rect.Left, device_rect.Bottom) _
       }
       Return New Matrix(world_rect, pts)
   End Function

The ScaleToFitWorld method shown in the following code is the trickiest of these transformation-building methods. It starts by comparing the height-to-width aspect ratios of the world and device rectangles to determine whether the scaled world rectangle will be limited by the device rectangle's height or its width.

For example, the smiley face in the top right picture in Figure 6 is limited by the display area's width while the picture at the bottom in Figure 6 is limited by its display area's height.

Based on the rectangles' relative aspect ratios, the code calculates the scale factor that will make the world rectangle as tall or wide as possible.

The code creates a new Matrix object and then builds a combined transformation to map the world rectangle to an enlarged and centered position on the device rectangle. It starts by translating the world rectangle to the origin and then scaling it by the calculated scale factor.

Next the code must translate the result so it is centered in the device rectangle. It calculates the world rectangle's scaled size and determines where it must translate the rectangle to center it properly. It adds the needed translation transformation and returns the resulting Matrix object (see Listing 1).

These transformation functions are particularly useful when printing. Depending on your application, you might want to center a picture on the printed page. You might also want to enlarge the picture to fit the page, either with or without stretching it. The CenterWorld, StretchToFitWorld, and ScaleToFitWorld functions not only make these operations easy, but also let you center or fit an image to a specific portion of the page so you can add other graphics and text around it.

Previous Page

Next Page