Alpha Blending of Images

I l @ ve RuBoard

This task is also easy to accomplish using a ColorMatrix object. We saw in the section on matrix manipulations that the matrix could be used to perform manipulations in 2D space for graphic objects using a 3x3 matrix. A ColorMatrix deals with a four dimensional concept, the color space. A color space's dimensions are R,G,B and A for Red, Green, Blue, and Alpha, respectively. Performing arbitrary matrix manipulations on a four dimensional object requires a 5x5 matrix. Like the 3x3 example for 2D space, the ColorMatrix maintains a dummy column that is set to 0,0,0,0,1.

The image in Figure 3.5.13 is the Identity Matrix for the ColorMatrix object.

Figure 3.5.13. The color space Identity Matrix.

The ColorMatrix class, like the matrix for 2D manipulations, has properties for its elements that can be accessed individually. To set the alpha for an image, you simply need to put the alpha value into the Matrix33 property as follows :

 ColorMatrix cm=new ColorMatrix(); // create an identity matrix m.Matrix33=(float)AlphaValue; 

This color matrix is then handed to an ImageAttributes class:

 ImageAttributes ia=new ImageAttributes(); ia.SetColorMatrix(m); 

The initialized ImageAttributes object is then used by the Graphics.DrawImage() method to paint the image with the specified alpha blend.

Listing 3.5.10 show you how to use the alpha blending features of GDI+ with any bitmap image from your machine. The program has a button to allow you to choose an image file and a track bar that lets you select the amount of transparency with which the image is displayed.

Listing 3.5.10 ImageAlpha.cs: Alpha Blending an Image

 1: using System;  2: using System.Drawing;  3: using System.Drawing.Drawing2D;  4: using System.Drawing.Imaging;  5: using System.Collections;  6: using System.ComponentModel;  7: using System.Windows.Forms;  8: using System.Data;  9: 10: namespace ImageAlpha 11: { 12:    class Form1 : Form 13:    { 14: 15:       Button b; 16:       TrackBar t; 17:       Image i; 18: 19:       void OnPaint(object Sender,PaintEventArgs e) 20:       { 21:          SolidBrush b=new SolidBrush(Color.Red); 22:          Rectangle r=this.ClientRectangle; 23:          GraphicsPath pth=new GraphicsPath(); 24:          for(int c=1;c<10;c++) 25:          { 26:             r.Inflate(-(this.ClientRectangle.Width/20), 27:                -(this.ClientRectangle.Height/20)); 28:             pth.AddRectangle(r); 29:          } 30:          e.Graphics.FillPath(b,pth); 31: 32:          if(i!=null) 33:          { 34:             ColorMatrix m=new ColorMatrix(); 35:             m.Matrix33=(float)(1.0/256*t.Value); 36:             ImageAttributes ia=new ImageAttributes(); 37:             ia.SetColorMatrix(m); 38:             e.Graphics.DrawImage(i,this.ClientRectangle, 0,0,i.Width,i.Height,  GraphicsUnit.Pixel,ia); 39:          } 40:       } 41: 42:       void OnClickB(object sender, EventArgs e) 43:       { 44:          OpenFileDialog dlg=new OpenFileDialog(); 45:          dlg.Filter="Bitmap files(*.bmp)*.bmp"; 46:          if(dlg.ShowDialog()==DialogResult.OK) 47:          { 48:             i=Image.FromFile(dlg.FileName); 49:             Invalidate(); 50:          } 51:       } 52: 53:       void OnTrack(object sender, EventArgs e) 54:       { 55:          Invalidate(); 56:       } 57: 58:       void OnSize(object sender, EventArgs e) 59:       { 60:          Invalidate(); 61:       } 62: 63:       public Form1() 64:       { 65:          this.Paint+=new PaintEventHandler(OnPaint); 66:          this.SizeChanged+=new EventHandler(OnSize); 67: 68:          b=new Button(); 69: 70:          b.Click+=new EventHandler(OnClickB); 71: 72:          b.Location=new Point(5,5); 73:          b.Size=new Size(60,22); 74:          b.Text="Image..."; 75: 76:          this.Controls.Add(b); 77: 78:          t=new TrackBar(); 79:          t.Location=new Point(100,5); 80:          t.Size=new Size(200,22); 81:          t.Maximum=255; 82:          t.Minimum=0; 83:          t.ValueChanged+=new EventHandler(OnTrack); 84: 85:          this.Controls.Add(t); 86:       } 87: 88:       static void Main() 89:       { 90:          Application.Run(new Form1()); 91:       } 92:    } 93: } 

Compile this file with the following command line:

 csc /t:winexe imagealpha.cs 

The important lines are 34 “38, deceptively simple for such a powerful feature. Line 34 creates an identity matrix. Line 35 uses the value in the track bar to update the image alpha component of the matrix. Line 36 creates an ImageAttributes class that uses the ColorMatrix on line 37. Finally, line 38 paints the image onto the screen, allowing our concentric shape background to show through or not, depending on the track bar setting.

Figure 3.5.14 shows this effect with the track bar set to around 70 percent. In case you're wondering, the Bike is a 1971 Triumph Bonneville 750.

Figure 3.5.14. Alpha blending a bitmap image.

I l @ ve RuBoard