Rotating, Reflecting, and Skewing Images

You can rotate, reflect, and skew an image by specifying destination points for the upper-left, upper-right, and lower-left corners of the original image. The three destination points determine an affine transformation that maps the original rectangular image to a parallelogram.

For example, suppose the original image is a rectangle with upper-left corner at (0, 0), upper-right corner at (100, 0), and lower-left corner at (0, 50). Now suppose we map those three points to destination points as follows.

Original point Destination point
Upper-left (0, 0) (200, 20)
Upper-right (100, 0) (110, 100)
Lower-left (0, 50) (250, 30)

The following illustration shows the original image and the image mapped to the parallelogram. The original image has been skewed, reflected, rotated, and translated. The x-axis along the top edge of the original image is mapped to the line that runs through (200, 20) and (110, 100). The y-axis along the left edge of the original image is mapped to the line that runs through (200, 20) and (250, 30).

3b575a03.stripes1(en-us,VS.71).gif

The following example produces the images shown in the preceding illustration.

' New Point(200, 20)  = destination for upper-left point of original
' New Point(110, 100) = destination for upper-right point of original
' New Point(250, 30)  = destination for lower-left point of original
Dim destinationPoints As Point() =  { _
   New Point(200, 20), _
   New Point(110, 100), _
   New Point(250, 30)}

Dim image = New Bitmap("Stripes.bmp")

' Draw the image unaltered with its upper-left corner at (0, 0).
e.Graphics.DrawImage(image, 0, 0)

' Draw the image mapped to the parallelogram.
e.Graphics.DrawImage(image, destinationPoints)
[C#]
Point[] destinationPoints = {
   new Point(200, 20),   // destination for upper-left point of 
                         // original
   new Point(110, 100),  // destination for upper-right point of 
                         // original
   new Point(250, 30)};  // destination for lower-left point of 
                         // original

Image image = new Bitmap("Stripes.bmp");

// Draw the image unaltered with its upper-left corner at (0, 0).
e.Graphics.DrawImage(image, 0, 0);

// Draw the image mapped to the parallelogram.
e.Graphics.DrawImage(image, destinationPoints);

The following illustration shows a similar transformation applied to a photographic image.

3b575a03.transformedclimber(en-us,VS.71).gif

The following illustration shows a similar transformation applied to a metafile.

3b575a03.transformedmetafile(en-us,VS.71).gif