Using a Color Matrix to Set Alpha Values in Images

Using a Color Matrix to Set Alpha Values in Images

The Bitmap class (which inherits from the Image class) and the ImageAttributes class provide functionality for getting and setting pixel values. You can use the ImageAttributes class to modify the alpha values for an entire image, or you can call the SetPixel method of the Bitmap class to modify individual pixel values.

The following example creates an opaque bitmap that draws over whatever is on the background:

Dim bitmap As New Bitmap("Texture.jpg")
      
' First draw a wide black line.
e.Graphics.DrawLine( _
   New Pen(Color.FromArgb(255, 0, 0, 0), 25), _
   New Point(10, 35), _
   New Point(200, 35))

' Now draw an image that covers part of the black line.
e.Graphics.DrawImage( _
   bitmap, New Rectangle(30, 0, bitmap.Width, bitmap.Height))
[C#]
Bitmap bitmap = new Bitmap("Texture.jpg");

// First draw a wide black line.
e.Graphics.DrawLine(
   new Pen(Color.FromArgb(255, 0, 0, 0), 25),
   new Point(10, 35),
   new Point(200, 35));

// Now draw an image that covers part of the black line.
e.Graphics.DrawImage(
   bitmap,
   new Rectangle(30, 0, bitmap.Width, bitmap.Height));

The following illustration shows the resulting image, which is drawn at (30, 0). Note that the wide black line doesn't show through the image.

w177ax15.image1(en-us,VS.71).gif

The ImageAttributes class has many properties that you can use to modify images during rendering. In the following example, an ImageAttributes object is used to set all the alpha values to 80 percent of what they were. This is done by initializing a color matrix and setting the alpha scaling value in the matrix to 0.8. The address of the color matrix is passed to the SetColorMatrix method of the ImageAttributes object, and the ImageAttributes object is passed to the DrawImage method of the Graphics object.

' Create the Bitmap object and load it with the texture image.
Dim bitmap As New Bitmap("Texture.jpg")

' Initialize the color matrix.
' Note the value 0.8 in row 4, column 4.
Dim matrixItems As Single()() =  { _
   New Single() {1, 0, 0, 0, 0}, _
   New Single() {0, 1, 0, 0, 0}, _
   New Single() {0, 0, 1, 0, 0}, _
   New Single() {0, 0, 0, 0.8F, 0}, _
   New Single() {0, 0, 0, 0, 1}}

Dim colorMatrix As New ColorMatrix(matrixItems)

' Create an ImageAttributes object and set its color matrix.
Dim imageAtt As New ImageAttributes()
imageAtt.SetColorMatrix( _
   colorMatrix, _
   ColorMatrixFlag.Default, _
   ColorAdjustType.Bitmap)

' First draw a wide black line.
e.Graphics.DrawLine( _
   New Pen(Color.Black, 25), _
   New Point(10, 35), _
   New Point(200, 35))

' Now draw the semitransparent bitmap image.
   Dim iWidth As Integer = bitmap.Width
   Dim iHeight As Integer = bitmap.Height

' Pass in the destination rectangle (2nd argument) and the x _
' coordinate (3rd argument), x coordinate (4th argument), width _
' (5th argument), and height (6th argument) of the source rectangle.
e.Graphics.DrawImage( _
   bitmap, _
   New Rectangle(30, 0, iWidth, iHeight), _
   0F, _
   0F, _
   iWidth, _
   iHeight, _
   GraphicsUnit.Pixel, _
   imageAtt)
[C#]
// Create the Bitmap object and load it with the texture image.
Bitmap bitmap = new Bitmap("Texture.jpg");

// Initialize the color matrix.
// Note the value 0.8 in row 4, column 4.
float[][] matrixItems ={ 
   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, 0.8f, 0}, 
   new float[] {0, 0, 0, 0, 1}}; 
   ColorMatrix colorMatrix = new ColorMatrix(matrixItems);

// Create an ImageAttributes object and set its color matrix.
ImageAttributes imageAtt = new ImageAttributes();
imageAtt.SetColorMatrix(
   colorMatrix,
   ColorMatrixFlag.Default,
   ColorAdjustType.Bitmap);

// First draw a wide black line.
e.Graphics.DrawLine(
   new Pen(Color.Black, 25),
   new Point(10, 35),
   new Point(200, 35));

// Now draw the semitransparent bitmap image.
int iWidth = bitmap.Width;
int iHeight = bitmap.Height;
e.Graphics.DrawImage(
   bitmap, 
   new Rectangle(30, 0, iWidth, iHeight),  // destination rectangle
   0.0f,                          // source rectangle x 
   0.0f,                          // source rectangle y
   iWidth,                        // source rectangle width
   iHeight,                       // source rectangle height
   GraphicsUnit.Pixel, 
   imageAtt);

During rendering, the alpha values in the bitmap are converted to 80 percent of what they were. This results in an image that is blended with the background. As the following illustration shows, the bitmap image looks transparent; you can see the solid black line through it.

w177ax15.image2(en-us,VS.71).gif

Where the image is over the white portion of the background, the image has been blended with the color white. Where the image crosses the black line, the image is blended with the color black.

Show:
© 2016 Microsoft