Aspect Ratio in GDI+


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.jpg

FIGURE 7.18: An image in ImageViewer

Figure 7.19.jpg

FIGURE 7.19: The image of Figure 7.18 after Fit Width

Figure 7.20.jpg

FIGURE 7.20: The image of Figure 7.18 after Fit Height

Figure 7.21.jpg

FIGURE 7.21: The image of Figure 7.18 after Fit original

Figure 7.22.jpg

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.jpg

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.jpg

FIGURE 7.24: An image in ImageViewer

Figure 7.25.jpg

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.jpg

FIGURE 7.26: The image of Figure 7.24 with 50 percent zoom

Figure 7.27.jpg

FIGURE 7.27: The image of Figure 7.24 with 200 percent zoom

Figure 7.28.jpg

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.

Up Next
    Ebook Download
    View all
    Learn
    View all