Export (0) Print
Expand All

How to: Rotate, Reflect, and Skew 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 you 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).

Stripes

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

Transformed Climber

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

Transformed Metafile

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

    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 preceding example is designed for use with Windows Forms, and it requires PaintEventArgs e, which is a parameter of the Paint event handler. Make sure to replace Stripes.bmp with the path to an image that is valid on your system.

Show:
© 2014 Microsoft