This article has been
excerpted from book "Graphics Programming with GDI+".
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 article.
The DrawImage method has about two dozen overloaded forms- one of which lets us
provide the destination point for an image. The original image will be drawn
after its coordinates are mapped to the destination points- a process called
skewing. We will see an example in a moment. First let's examine the necessary
from 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
snipped creates an 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 variable 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,
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.
If you click Skew Image, the new output looks like figure 7.38.
FIGURE 7.37: Normal view of an image
FIGURE 7.38: Skewed image
Conclusion
Hope the article would have helped you in understanding Skewing Images in GDI+. Read other articles on GDI+ on the website.
![bookGDI.jpg]()
|
This book teaches
.NET developers how to work with GDI+ as they develop applications
that include graphics, or that interact with monitors or printers.
It begins by explaining the difference between GDI and GDI+, and
covering the basic concepts of graphics programming in Windows. |