Skewing Images

So far, we have seen that we can draw various images on graphics surfaces by using DrawImage. We have also seen how to implement rotate, flip, fit-height, fit-width, and zoom features. An imaging application may need to provide even more features, including scaling, skewing, and high-performance rendering. Using GDI+, we can do all of this very easily. We will discuss some of these issues in this chapter and some of them in Chapter 8.

The DrawImage method has about two dozen overloaded formsone of which lets us provide the destination points for an image. The original image will be drawn after its coordinates are mapped to the destination pointsa process called skewing. We will see an example in a moment. First let's examine the necessary form of DrawImage.

To translate an image from its original coordinates to the mapped coordinates, an application needs to create an array of new coordinates and call DrawImage, passing this array as the second parameter. For example, the following code snippet creates an array of points and passes it to the DrawImage method.

Point[] pts = { new Point(X0, Y0), new Point(X1, Y1), new Point(X2, Y2) }; g.DrawImage(curImage, pts);

Now let's create a Windows application and add a MainMenu control with an Open File menu item. Let's also add a button to the form. Our final form will look like Figure 7.36.

Figure 7.36. A skewing application

Now we add the following variables to the application:

private Bitmap curBitmap = null; private bool skewImage = false; Point[] pts = { new Point(150, 20), new Point(20, 50), new Point(150, 300) };

The complete code is given in Listing 7.23. The Open File menu item click event handler opens an image and creates a Bitmap object from the selected file. The paint event handler views the image. If skewImage is true, the paint event handler calls the DrawImage method with an array of points. The Skew Image button click event handler simply sets skewImage to true.

Listing 7.23 Skew Image button click event handler

private void OpenFileMenu_Click(object sender, System.EventArgs e) { OpenFileDialog openDlg = new OpenFileDialog(); openDlg.Filter = "All Bitmap files|*.bmp;*.gif;*.jpg;"; string filter = openDlg.Filter; openDlg.Title = "Open Bitmap File"; openDlg.ShowHelp = true; if(openDlg.ShowDialog() == DialogResult.OK) { curBitmap = new Bitmap(openDlg.FileName); } Invalidate(); } private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e) { // Create a Graphics object Graphics g = e.Graphics; g.Clear(this.BackColor); if(curBitmap != null) { if(skewImage) { g.DrawImage(curBitmap, pts); } else { g.DrawImage(curBitmap, 0, 0); } } // Dispose of object g.Dispose(); } private void SkewImageBtn_Click(object sender, System.EventArgs e) { skewImage = true; Invalidate(); }

If you run the application and open an image, the normal view looks like Figure 7.37.

Figure 7.37. Normal view of an image

If you click Skew Image, the new output looks like Figure 7.38.

Figure 7.38. Skewed image