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.
![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. |