This article has been
excerpted from book "Graphics Programming with GDI+".
To see an image correctly, you may want to maintain its aspect ratio (the ration
of height to width). To do so, you need to modify the code so that when you
select Fit Width or Fit Height, the width and the height are changed according
to the original ratio.
The Fit Original option generates the image shown in Figure 7.21.
The Fit All option generates the image shown in Figure 7.22.
Zooming In and Out
Before we finish out ImageViewer application, let's add one more option:
zooming.
Adding zoom-in and zoom-out features requires only one operation: multiplying
the height and width of the image by a zoom factor. The zoom factor is the
ration of the current size of the image to the desired new size of the image.
For example, suppose that we want to zoom in an image by 200 percent. We must
multiply the current size of the image by 200 percent. We must multiply the
current size of the image by 200 or 2(200/100 = 2times). If we want to zoom out
an image by 25 percent we need to multiply the size of the image by 25 percent,
or 2.25 (25/100 = 0.25 times).
FIGURE 7.18: An image in ImageViewer
FIGURE 7.19: The image of Figure 7.18 after Fit Width
FIGURE 7.20: The image of Figure 7.18 after Fit Height
FIGURE 7.21: The image of Figure 7.18 after Fit original
FIGURE 7.22: The image of Figure 7.18 after Fit All
Now let's add the zoom feature to our application. As it typically done, we add
five items to the Zoom submenu: 25, 50, 100, and 500 (see Figure 7.23). In our
code we use Zoom25, Zoom50, Zoom100, Zoom200, and Zoom500, respectively, to
represent these menu items, and we add the appropriate menu item click event
handlers by double-clicking on the menu items.
FIGURE 7.23: Zoom menu items
Now we add a double variable that represents the zoom factor. The default zoom
factor is 1.0. We add the following line to the class at the application level:
private double
curZoom = 1.0;
Next we modify the OpenFileMenu click event handler slightly. We change the
AutoScroolMinSize property as follows:
this.AutoScrollMinSize =
new Size ((int)(curImage.Width
* curZoom),(int)(curImage.Height * curZoom));
We multiply the image height and width by the zoom factor to represent an image
with an appropriate zoom setting.
The next step is to modify the paint event handler. Here we need to multiply the
height and width of the image by the zoom factor. The new DrawImage method,
shown here, calls the paint event handler of Listing 7.10:
//Draw image using the DrawImage method
g.DrawImage(curImage, new
Rectangle
(this.AutoScrollPosition.X,
this.AutoScrollPosition.Y,
(int)(curRect.Width * curZoom),
(int)(curRect.Height * curZoom)));
The last step is to add Zoom menu item click event handlers and calculate the
zoom factor. Listing 7.12 shows the code for the Zoom menu item click event
handlers. We calculate the zoom factor by dividing the zoom value by 100. We
also call the Invalidate method to repaint the image with the new zoom-setting.
LISTING 7.12 Zoom menu item event handlers
private void
Form1_Paint(object sender,
PaintEventArgs e)
{
private
void Zoom25_Click (object sender System.EventArgs
e)
{
if (curImage !=
null)
{
curZoom = (double)
25/100;
Invalidate();
}
}
private void
Zoom50_Click (object sender System.EventArgs
e)
{
if (curImage !=
null)
{
curZoom = (double)
50/100;
Invalidate();
}
}
private void
Zoom100_Click (object sender System.EventArgs e)
{
if (curImage !=
null)
{
curZoom = (double)
100/100;
Invalidate();
}
}
private void
Zoom200_Click (object sender System.EventArgs e)
{
if (curImage !=
null)
{
curZoom = (double)
200/100;
Invalidate();
}
}
private void
Zoom500_Click (object sender System.EventArgs e)
{
if (curImage !=
null)
{
curZoom = (double)
500/100;
Invalidate();
}
}
Using the method just described, we can zoom an image in and out to any
percentage. Let's run the application and open an image. Out original image
looks like Figure 7.24.
The Zoom | 25 option generates the image shown in Figure 7.25.
FIGURE 7.24: An image in ImageViewer
FIGURE 7.25: The image of Figure 7.24 with 25 percent zoom
The Zoom | 50 option generates the image shown in Figure 7.26.
The Zoom | 200 option generates the image shown in Figure 7.27.
The Zoom | 500 option generates the image shown in Figure 7.28.
Congratulations! You have successfully written an image viewer application that
can be used for various purposes. Now we will discuss some additional imaging
options.
FIGURE 7.26: The image of Figure 7.24 with 50 percent zoom
FIGURE 7.27: The image of Figure 7.24 with 200 percent zoom
FIGURE 7.28: The image of Figure 7.24 with 500 percent zoom
Conclusion
Hope the article would have helped you in understanding Aspect Ratio 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. |