Introduction
Welcome to today’s article. Today, I will talk about a topic named AlphaBlending, and how it can assist you in creating nice effects on your pictures or drawings.
Alphablending
AlphaBlending is the process of mixing ARGB colors to get transparency. Transparency gives you a see-through effect on any picture.
ARGB
RGB is a color model used on computer screens. Each element contains 256 different shades, and all colors are ultimately made up of a numeric combination. Here are a few examples:
The RGB Value
- 255, 255, 255 will give you White.
- 0, 0, 0 will give you Black.
- 128, 128, 128 will give you Gray.
- 0, 0, 255 will give you Blue.
- 255, 0, 0 will give you Red.
- 0, 255, 0, will give you Green.
- 255, 0, 255 will give you magenta.
Here is a list of possible RGB combinations: RGB Color combinations.
Okay, so why is the “A” missing from all of the above calculations?
The A in ARGB represents the transparency level of the particular color that is being used. 0 means full transparency and 255 (not visible at all) means opaque (fully visible). Wê will manipulate this value to do some of our AlphaBlending operations.
Although I will keep today’s project not too complicated—I promise—there are other ways to achieve AlphaBlending.
The ImageAttribute Class
The ImageAttribute class is used to set attributes or Properties of an image, which gets passed as a parameter of the DrawImage method of the Graphics class.
The ColorMatrix Class
According to MSDN, The ColorMatrix class defines a 5×5 matrix that contains the coordinates for the RGBA space.
- Matrix00 Gets or sets the element at the 0th row and 0th column of a ColorMatrix object.
- Matrix01 Gets or sets the element at the 0th row and 1st column of a ColorMatrix object.
- Matrix02 Gets or sets the element at the 0th row and 2nd column of a ColorMatrix object.
- Matrix10 Gets or sets the element at the 1st row and 0th column of a ColorMatrix object.
- Matrix11 Gets or sets the element at the 1st row and 1st column of a ColorMatrix object.
- Matrix12 Gets or sets the element at the 1st row and 2nd column of a ColorMatrix object.
- Matrix20 Gets or sets the element at the 2nd row and 0th column of a ColorMatrix object.
- Matrix21 Gets or sets the element at the 2nd row and 1st column of a ColorMatrix object.
- Matrix22 Gets or sets the element at the 2nd row and 2nd column of a ColorMatrix object.
- Matrix30 Gets or sets the element at the 3rd row and 0th column of a ColorMatrix object.
- Matrix31 Gets or sets the element at the 3rd row and 1st column of a ColorMatrix object.
- Matrix32 Gets or sets the element at the 3rd row and 2nd column of a ColorMatrix object.
- Matrix40 Gets or sets the element at the 4th row and 0th column of a ColorMatrix object.
- Matrix41 Gets or sets the element at the 4th row and 1st column of a ColorMatrix object.
- Matrix42 Gets or sets the element at the 4th row and 2nd column of a ColorMatrix object.
The ImageAttributes class and the ColorMatrix class work together because the SetColorMatrix method of the ImageAttributes class uses a ColorMatrix to set the color of an Image. An example of its implementation follows:
Dim bitmap As New Bitmap("Table Mountain.jpg") Dim sngPoints 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.5F, 0}, _ New Single() {0, 0, 0, 0, 1}} Dim cmColourMatrix As New ColorMatrix(sngPoints) Dim iaAttributes As New ImageAttributes iaAttributes.SetColorMatrix(cmColourMatrix, _ ColorMatrixFlag.Default, ColorAdjustType.Bitmap) g.FillRectangle(Brushes.Blue, rect) rect.Y += 120 g.FillEllipse(Brushes.Black, rect) g.DrawImage(bitmap, New Rectangle(0, 0, bitmap.Width, _ bitmap.Height), 0, 0, bitmap.Width, bitmap.Height, _ GraphicsUnit.Pixel, iaAttributes) ' Dispose g.Dispose()
For more information regarding the ImageAttributes class, have a look here: ImageAttributes.
For more information on the ColorMatrix class, have a look here: ColorMatrix.
Now that you have a better understanding of what is involved with AlphaBlending, let’s do a project. Open Visual Basic and create a new Windows Forms project. Once the form has been created, add a Picturebox onto it and set its Dock Property to Fill.
Code
Add the following code:
Private Sub PictureBox1_Click(sender As Object, _ e As EventArgs) Handles PictureBox1.Click Dim g As Graphics = PictureBox1.CreateGraphics() g.Clear(PictureBox1.BackColor) ' Draw an image Dim curImage As Image = _ Image.FromFile(Application.StartupPath _ & "\Table Mountain.jpg") g.DrawImage(curImage, 0, 0, Me.Width, Me.Height) ' Create pens and a rectangle Dim rect As New Rectangle(450, 30, 650, 150) Dim opqPen As New Pen(Color.FromArgb(255, 0, 255, 0), 30) Dim transPen As New Pen(Color.FromArgb(128, 255, 255, 255), 30) Dim totTransPen As New Pen(Color.FromArgb(40, 0, 255, 0), 40) ' Draw lines, rectangle, ellipse, and string g.DrawLine(opqPen, 50, 10, 200, 50) g.DrawLine(transPen, 100, 30, 200, 100) g.DrawLine(totTransPen, 10, 50, 200, 50) g.FillRectangle(New SolidBrush(Color.FromArgb(20, 0, 0, 255)), _ rect) rect.Y += 60 g.FillEllipse(New SolidBrush(Color.FromArgb(50, 0, 255, 255)), _ rect) Dim semiTransBrush As New SolidBrush(Color.FromArgb(90, 255, _ 255, 50)) g.DrawString("Table Mountain " + ControlChars.Lf + _ "Date: 20/12/2014", New Font("Verdana", 14), _ semiTransBrush, New RectangleF(20, 100, 300, 100)) ' Dispose g.Dispose()
Here, I load a picture dynamically and then draw the transparent shapes onto the picture by manipulating the Alpha element of the FromArgb method.
Once run, your form may look like mine, as shown in Figure 1.
Figure 1: Beautiful Table Mountain
Just for interest’s sake, this is Table Mountain, the most beautiful landmark in Cape Town, South Africa. I was on holiday there in December.
Also, I have included sample code for this project.
Conclusion
As you can see, it is very easy to do AlphaBlending with your pictures. Until next time, cheers from sunny South Africa!