Viewing Multiple Images

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. Acolor 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. Chapter 8 discusses this process in more detail.

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.

Figure 7.40. Drawing multiple images

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. See Chapter 10 (Section 10.7.1) for more details.

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,
 System.Windows.Forms.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 points
 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 );
}