Twisting and Turning with Transformations

Twisting and Turning with Transformations

Normally, anything you draw on the graphics canvas is laid down directly on the bitmap surface. It's like a giant grid, and your drawing commands are basically dropping colored inks directly into each grid cell. The Graphics object also gives you the ability to pass your drawing commands through a geometric transformation before their output goes to the canvas surface. For instance, a rotation transformation would rotate your lines, shapes, and text by the amount you specify (in degrees), and then apply the result to the surface. Figure displays the results of the following code, which applies two translations: (1) moving the (0, 0) origin right by 100 pixels, and down by 75 pixels; and (2) adding a clockwise rotation of 270 degrees.

e.Graphics.DrawString("Normal", _
   SystemFonts.DefaultFont, Brushes.Black, 10, 10)
e.Graphics.TranslateTransform(100, 75)
e.Graphics.DrawString("Rotated", _
   SystemFonts.DefaultFont, Brushes.Black, 10, 10)

Normal and rotated text

Transformations are cumulative; if you apply multiple transformations to the canvas, any drawing commands will pass through all of the transformations before arriving at the canvas. The order in which transformations occur is important. If the code we just ran had reversed the TranslateTransform and RotateTransform statements, the rotation would have altered the x-y coordinates for the entire canvas world. The subsequent translation of (100, 75) would have moved up the origin 100 pixels, and then to the right 75 pixels.

The Graphics class includes these methods that let you apply transformations to the "world view" of the canvas during drawing.

  • RotateTransform. Rotates the world view in clockwise degrees, from 0 to 359. The rotation can be positive or negative.

  • ScaleTransform. Sets a scaling factor for all drawing. Basically, this increases or decreases the size of the canvas grid when drawing. Changing the scale impacts the width of pens. If you scale the world by a factor of two, not only do distances appear to be twice as far apart, but all pens draw twice as thick as when unscaled.

  • TranslateTransform. Repositions the origin based on an x and y offset.

  • MultiplyTransform. A sort of master transformation method that lets you apply transforms through a Matrix object. It has more options than just the standard transforms included in the Graphics object. For instance, you can apply a shearing transformation that skews all output in a rectangle-to-parallelogram type of change.

  • ResetTransform. Removes all applied transformations from a canvas.

  • Save. Saves the current state of the transformed (or untransformed) graphics surface to an object for later restoration. This allows you to apply some transformations, save them, apply some more, and then restore the saved set, wiping out any transformations applied since that set was saved.

  • Restore. Restores a saved set of transformations.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows