GDI+: The .NET Graphics Interface
365
CHAPTER 3.5
Alpha Blending
All colors in GDI+ have a fourth component in addition to the normal red, green, and blue values. This value is the “alpha” and it controls the amount that the background shows through the object just placed onscreen.
Alpha blending can be applied to all graphical shapes, such as lines and text. It can also be applied to images, either as a global value that affects the appearance of the whole image, or as a value for each individual pixel, which makes parts of the image more transparent than others.
To create a color with an alpha component, you can use the Color.FromARGB(…) method and supply the alpha as a value from 0, totally transparent, to 255, which is opaque.
Listing 3.5.9 demonstrates this effect by creating an array of ellipses that let the background show through according to their alpha value.
LISTING 3.5.9 AlphaBlend.cs: Using a Solid Brush with Alpha
1:using System;
2:using System.Drawing;
3:using System.Drawing.Drawing2D;
4:using System.Collections;
5:using System.ComponentModel;
6:using System.Windows.Forms;
7:using System.Data;
8:
9:namespace Alphablending
10:{
11:public class Alphablending : System.Windows.Forms.Form
12:{
13:
14:void OnPaint(object sender, PaintEventArgs e)
15:{
16:SolidBrush b=new SolidBrush(Color.Red);
17:Rectangle r=this.ClientRectangle;
18:GraphicsPath pth=new GraphicsPath();
19:for(int c=1;c<10;c++)
20:{
21:r.Inflate(-(this.ClientRectangle.Width/20),
22: -(this.ClientRectangle.Height/20));
23:pth.AddRectangle(r);
24:}
25:e.Graphics.FillPath(b,pth);
26:Random rnd=new Random();
27:for(int y=0;y<5;y++)
28:{
3.5
T GDI+:RAPHICSGNTERFACEI . HE NET
Windows Forms
366
PART III
LISTING 3.5.9 Continued
29:for(int x=0;x<5;x++)
30:{
31: |
b.Color=Color.FromArgb((int)((((5*x)+y)*10.63)), |
32: |
(byte)rnd.Next(255), |
33: |
(byte)rnd.Next(255), |
34: |
(byte)rnd.Next(255)); |
35: |
e.Graphics.FillEllipse(b,this.ClientRectangle.Width/5*x, |
36: |
this.ClientRectangle.Height/5*y, |
37: |
this.ClientRectangle.Width/5, |
38: |
this.ClientRectangle.Height/5); |
39:}
40:}
41:}
42:
43:void OnSize(object sender, EventArgs e)
44:{
45:Invalidate();
46:}
47:
48:public Alphablending()
49:{
50:this.Paint+=new PaintEventHandler(OnPaint);
51:this.SizeChanged+=new EventHandler(OnSize);
52:this.BackColor=Color.White;
53:}
54:
55:
56:static void Main()
57:{
58:Application.Run(new Alphablending());
59:}
60:}
61:}
Compile Listing 3.5.9 with the following command line:
csc /t:winexe alphablend.cs
The output from Listing 3.5.9 is shown in Figure 3.5.12 and clearly shows the background scene, the dark concentric rectangles, being obscured by the graduated alpha blends of the ellipses.
GDI+: The .NET Graphics Interface
CHAPTER 3.5
FIGURE 3.5.12
Alpha blending at work.
Alpha Blending of Images
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 3×3 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 5×5 matrix. Like the 3×3 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.
The 5*5 Identity Matrix for the Color Matrix
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0
0 0 0 0 1
Linear part
Translation part
Dummy column, always 0,0,0,0,1
FIGURE 3.5.13
367
3.5
T GDI+:RAPHICSGNTERFACEI . HE NET
The color space Identity Matrix.
Windows Forms
368
PART III
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;
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),
Windows Forms
370
PART III
LISTING 3.5.10 Continued
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);
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.
