Viewing Multiple Images in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

Sometimes we need to draw multiple images on the same spot, one on top of the other. In the previous section we discussed how to draw transparent graphics objects on top of images. In this section we will discuss how to draw images (transparent or opaque) on top of other images.

Drawing transparent images is different from drawing transparent graphics objects such as lines, rectangles, or ellipses. To draw transparent graphics objects, we simply create a transparent color and use this color when we create a pen or a brush.

Drawing transparent images is controlled by the color matrix (represented by the ColorMatrix class), which defines the transparency of the image. A color matrix is applied to an image when we call DrawImage. The DrawImage method takes an argument of type ImageAttributes. The SetColorMatrix method of ImageAttributes sets a color matrix to the ImageAttributes type. Passing ImageAttributes to DrawImage applies the color matrix to the image. 

As usual, we create a Windows application. In this application we will draw a large image, and a small image on top of the large image. To make this application more interesting, we add a transparency control to the application so that we can adjust the transparency of the top image. The final form looks like Figure 7.40.

Now let's add a TrackBar control to the form. We set the Maximum and Minimum properties of TrackBar to 10 and 0, respectively. Then we write a TrackBar control scroll event so that when we scroll the track bar it can manage the transparency of the image.

Note: We have defined a float type variable in the class as follows:

            float tpVal = 1.0f;

Now we convert the TrackBar value to a floating value so that we can use it in the ColorMatrix class to set the color of the image, as Listing 7.25 shows. The ColorMatrix class constructor takes an array, which contains the values of matrix items. The Item property of this class represents a cell of the matrix and can be used to get and set cell values. Besides the Item property, the ColorMatrix class provides 25 MatrixXY properties, which represent items of the matrix at row (x+1) and column (y+1). MatrixXY properties can be used to get and set an item's value. 

FIGURE 7.40: Drawing multiple images

LISTING 7.25: The TrackBar scroll event handler

        private void trackBar1_Scroll(object sender, System.EventArgs e)

        {

            tpVal = (float)trackBar1.Value / 10;

            this.Invalidate();

        }

We will now view both images on the form's paint event, as Listing 7.26 shows. We create an Image object and view the first image. Then we create a ColorMatrix object with transparency and set it with the ImageAttribute property. Later we attach the ImageAttribute property to the second image when we draw it using the DrawImage method.

LISTING 7.26: Viewing multiple images on the form-load event

        private void Form1_Paint(object sender, PaintEventArgs e)

        {

            //Create an Image object (first image) from a file

            curImage = Image.FromFile("roses.jpg");

            //Draw first image

            e.Graphics.DrawImage(curImage, AutoScrollPosition.X, AutoScrollPosition.Y, curImage.Width, curImage.Height);

            //Create an array of ColorMatrix point

            float[][] ptsArray = 

            { 

                         new float[] {1, 0, 0, 0 ,0},

                         new float[] {0, 1, 0, 0 ,0},

                         new float[] {0, 0, 1, 0 ,0},

                         new float[] {0, 0, 0, tpVal ,0},

                         new float[] {0, 0, 0, 0 ,1}

            };

            //Create a ColorMatrix object

            ColorMatrix clrMatrix = new ColorMatrix(ptsArray);

            //Create image attributes

            ImageAttributes imgAttributes = new ImageAttributes();

            //Set color matrix

            imgAttributes.SetColorMatrix(clrMatrix,

            ColorMatrixFlag.Default,

            ColorAdjustType.Bitmap);

            //Create second Image object from a file

            Image smallImage = Image.FromFile("smallRoses.gif");

            //Draw second image with image attributes

            e.Graphics.DrawImage(smallImage,

            new Rectangle(100, 100, 100, 100),

            0, 0, smallImage.Width, smallImage.Height,

            GraphicsUnit.Pixel, imgAttributes);

        }

Conclusion

Hope the article would have helped you in understanding viewing multiple images in GDI+. Read other articles on GDI+ on the website.

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.