Click here to Skip to main content
12,830,888 members (42,862 online)
Click here to Skip to main content
Add your own
alternative version


131 bookmarked
Posted 23 Mar 2004

Transparency Tutorial with C# - Part 2

, 23 Mar 2004 CPOL
Rate this:
Please Sign up or sign in to vote.
An article on Compositing, ColorMatrix, and ImageAttributes


As in the earlier tutorial, we consider the ‘what’ before the ‘how’. That is, a discussion is presented of the concepts behind the code, and then at the end, we look at the code behind the concepts.

Compositing Concepts

When you watch the TV weather person seeming to walk around inside a satellite image of the Earth, you are seeing a composite image. Compositing refers to superimposing one image over another. In the movie Lord Of The Rings Gollum (who should have won the Academy Award for best actor - IMHO), was made of computer generated images compostited over live action images. GDI+ has two very limited compositing features: the CompositingMode and the CompositingQuality enumerations.

CompositingMode is an enumeration that determines how alpha blending of a source will be done with the background. CompositingMode.SourceCopy essentially turns off the alpha blending, while CompositingMode.SourceOver turns it on.

Before you continue, I’ll give you my conclusion first – GDI+ compositing is useless in what I do, so feel free to skip this section.

I borrowed some code from MSDN and added two features to let us play with the various permutations of the mode and quality enumerations. The Compositing Mode & Quality demo, Figure 1, gives an example where, in the top row, we turn off the alpha blending for the two ellipses by setting CompositingMode to SourceCopy and drawing them to a bitmap which we then composite the results to the white background and to a second bitmap allowing the alpha to function. In the bottom row we allow alpha blending for the two ellipses and likewise composite the results with the white background and to an image.

CompositingQuality is inversely related to compositing speed. Higher quality requires consideration of more surrounding pixels than does lower quality compositing. Six members are defined that let the user make tradeoffs between rendering quality and speed. The Compositing Mode & Quality demo, Figure 1, gives an example where we can select each member of the enumeration and see how it effects the rendering by moving the alpha slider.

Figure 1, Compositing Mode & Quality Demo

Figure 1 Compositing Mode & Quality Demo

Now maybe the quality enumeration makes a difference on a very slow computer or with a very large image, but I couldn’t see any effect on this little demo. I used the Windows Magnifier© to do a 5x enlargement of the MilkMaids elbow. Figure 2 shows some side-by-side comparisons. Can you see any difference? I can’t.

Figure 2 Quality vs. SpeedFigure 2 Quality vs. Speed

High Quality High Speed

Figure 2 Quality vs. Speed

So, I decided to give Microsoft© the benefit of the doubt and test the CompositingQuality with a big image over a complex background and trap the time it takes to do each.

Figure 3, Compositing Quality Demo.

Figure 3 Compositing Quality Demo.

This is an image of Edison’s bulb done with a wide variety of alpha values drawn over a light spectrum. I observed some time differences. Usually HighSpeed clocked in at 40 to 50 ms and HighQuality at 50 to 60 ms (on a 2.0 GHz Celeron laptop). I used the Windows Magnifier© to look for differences, Figure 4. The cursor is offset a little, but I still can’t see any differences.

Figure 4a HighSpeed.Figure 4 HighQuality.

Figure 4 HighSpeed vs HighQuality.

Figure 5 HighSpeed .Figure 5 GammaCorrected.

Figure 4 HighSpeed vs GammaCorrected.

I tried this on my antique Windows 98se© machine running a Pentium II© processor and got HighSpeed at 220 ms and HighQuality at 270ms, but this wasn’t consistent and likely as not they both ran at 220ms.

Okay, so I’m willing to state that CompositingMode and CompositingQuality aren’t of much use in what I generally do. I’d guess that if someone wanted to write a game in GDI+ and it was pushing the system, then they might want to see if these enumerations can get them where they need to go. I’d personally move up to DirectDraw before messing with GDI+ compositing again.

ColorMatrix and ImageAttributes Concepts

Unlike compositing in GDI+, ColorMatrix and ImageAttributes are very useful. They allow you to make transparency changes on an entire image so that you don’t have to use GetPixel and PutPixel, which for all but the smallest images will really slow you down.

The ColorMatrix is 5x5 with rows and columns for Red, Green, Blue, Alpha, and W. W is thrown in so that you can use the bottom row to make changes on all the parameters that are in the column above it.

Color transformations include:

  • Translation – adds a value to one or more of the color structure parameters.
  • Scaling – multiplies one or more of the color structure parameters by a value.
  • Shearing - which increase the value of one color component proportional to the value of another.
  • Rotation – Rotates the four-dimensional color space (bizarre and useless for colors - IMHO).

The discussion of ColorMatrix can get dense quickly. If you want to read something that is not only laughably obtuse, but seemingly useless (at least to me) look at the MSDN article on rotation with a ColorMatrix. You can do image rotations with matrices, which is very useful, but why on Earth would one ever want to rotate colors? If anybody knows a good answer to that, other than ‘because you can’ I’d like to hear it.

I choose to assume that even if the reader hasn’t studied linear transformations using matrix algebra, he/she/it can get the gist of what’s going by playing with the matrix parameters. I generally don’t care how Microsoft© is doing something, I just want to see the results and leave the operational guts in a blackbox where they belong.

When using ColorMatrix we need to change our way of looking at the color structure. Instead of each of the four elements: A, R, G, and B being represented by a byte integer, we will look at them as being a float between 0.00f and 1.00f.

To me the best way to learn is to play. I have been accused of being a hacker because I’d rather play with code and see what pops up than spend endless hours studying the manuals in hopes that one of the illiterates who wrote the thing will inadvertently be clear enough to tell me how to do what needs to be done. So I wrote the ColorMatrix – Single Color demo, Figure 6, that allows me to play to my hearts content and get a good intuitive feel for how ColorMatrix works and how I might use it in my code.

Figure 6 Color Matrix for a single color demonstration.

Figure 6 Color Matrix for a single color demonstration

The MSDN article ‘Using a Color Matrix to Transform a Single Color’ gives an example with the source color parameters for R, G, and B the same as in Figure 6, but they leave A = 1. I wrote this demo to show not just the color transformation, but also the alpha transformation. The results are the same as in the MSDN article except that the alpha shows that a source alpha of 0.75 and a matrix value of .67 yield 2/3 of the original 0.75, or 0.5.

Technically, the 0.20’s in the W row are translating the color, adding 0.20 to each, and the 2.0 in RR and 0.67 in AA are scaling the color. You can test shearing, by changing BR to 0.50, which will increase the red by 50% of the blue value.

ColorMatrix and Images

I wrote the ColorMatrix – Images demo, Figure 7, to show the real power of a ColorMatrix, to transform all the colors in an image with a single operation.

Figure 7 ColorMatrix - Images.

Figure 7 ColorMatrix - Images

Changes in the matrix affect the lower spectrum and the image; the upper image is left unchanged to help visually clarify what was changed. Vermeer’s Milkmaid is drawn over white, black, and a spectrum to help see the effects of the colors and alpha changes.

The Code

As mentioned in the first tutorial, we’ll only look at code that introduces new concepts.

ColorMatrix – Single Color

The ColorMatrix - SingleColor demonstration, Figure 6, is a take off (rip-off?) of code in the MSDN article ‘Using a Color Matrix to Transform a Single Color’ but with lots of added features to allow us to play with the various parameters.

The ColorMatrix class has 25 public properties, MatrixXY properties: Matrix00 through Matrix44 which allow the user to get or set the value for the X column and the Y row. We don’t use these in this application (we will in the third tutorial), choosing instead to use the full array.

In the OnPaint event handler we add:

// Create a points array
float[][] ptsArray = 
new float[] { matrix00, matrix10, matrix20, matrix30, matrix40},
new float[] { matrix01, matrix11, matrix21, matrix31, matrix41},
new float[] { matrix02, matrix12, matrix22, matrix32, matrix42},
new float[] { matrix03, matrix13, matrix23, matrix33, matrix43},
new float[] { matrix04, matrix14, matrix24, matrix34, matrix44}

Next we create an instance of the ColorMatrix and ImageAttributes classes:

// Create a ColorMatrix object using pts array
ColorMatrix clrMatrix = 
  new ColorMatrix(ptsArray);
// Create an ImageAttributes object
ImageAttributes imgAttributes =
  new ImageAttributes();

Then we assign the ColorMatrix instance to the ImageAttributes SetColorMatrix property:

// Set color matrix of imageAttributes

ImageAttributes will be discussed in detail below.

No further new concepts are introduced in this demo, but I will mention that using Matrix33 ColorMatrix property to change alpha without worrying about the full array would be more efficient if you are only concerned with transparency.

ColorMatrix – Images

The ColorMatrix – Images demo, Figure 7, brings us to what I consider the real meat of these tutorials – images.

The only new concept is using two overloads of DrawImage in the OnPaint event handler. I captured the LightSpectrum image drawn in the earlier tutorial as a JPEG image and draw that image to the form. I could have used the code, as before, which would have eliminated the need for the 7KB Spectrum.jpg file to do this, but I thought I’d give this way a try. What’s 7KB anyway?

// Draw the static Spectrum image and text
         10, 10, 200, 110);

Vermeer’s MilkMaid is drawn with a different overload that uses the ImageAttributes instance to apply the changes in the ColorMatrix to the image.

// Draw the changeable painting image over white and text
e.Graphics.DrawImage(Image.FromFile("Vermeer milkmaid.jpg"),
        new Rectangle(220,10,200,223),
        0,0, 200, 223,
        GraphicsUnit.Pixel, imgAttributes);

In the next tutorial we’ll look at transparency in forms.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Joe Pardue
Technical Writer Smiley Micros
United States United States

You may also be interested in...

Comments and Discussions

Generalblack to grayscale Pin
jjohn200527-Dec-05 20:15
memberjjohn200527-Dec-05 20:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170326.1 | Last Updated 24 Mar 2004
Article Copyright 2004 by Joe Pardue
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid