This is an example of how to create and use masked and semi-transparent bitmap buttons that can be overlaid on any background, including other bitmaps. The buttons are automatically alpha-blended (anti-aliased) with the background to create nice smooth edges, and provide region clipping to create various elliptical and other shapes.
Instead of creating a new class that duplicates all the other functionality of owner-draw buttons, the code to draw the transparency and create regions was added to the CHoverButtonEx class written by Niek Albers and modified by Frederick Ackers. If you are already using the
CHoverButtonEx class, you can simply replace it with this version without affecting existing functionality, although I have also added a fourth image to the bitmaps for a disabled view, so you would need this image in your existing bitmaps, or you would need to change the references back to 3.
The demo project uses a dialog-based regioned window that displays a circular, patterned bitmap as the background. This type of bitmapped background shows how these buttons can take on a very stylistic look and feel. By pressing any of the four refresh buttons in the lower portion of the window, the background is changed to a different bitmap (there are six in all).
Additional thanks goes to Paul Nettle for his winDIB routines.
A Bit About Anti-Aliasing and Alpha-Blending
One of the trickiest parts of masking images on top of images is the rough edges, or pixelation, of the meeting places of these images when they are not straight edges. The solution to these rough edges is to blend the edges in a technique called anti-aliasing. In this demo, anti-aliasing is done using an alpha-blending technique, where the transparency of the foreground bitmap pixel determines the strength of color at any particular position on the display.
The formula for blending source and background pixels is:
displayColor = sourceColor × sourceAlpha / 255 + backgroundColor × (255 – sourceAlpha) / 255
where the alpha value range is 0 (transparent) to 255 (opaque). Therefore, any part of the button's bitmap that has an alpha value of 0 will not be seen, and areas with values greater than zero will be blended with the background at varying strengths up to 255 where the button's bitmap will be fully opaque.
static inline unsigned int alphaBlend(const unsigned
int bg, const unsigned int src)
unsigned int a = src >> 24;
if (0 == a) return bg;
unsigned int rb = (((src & 0x00ff00ff) * a) +
((bg & 0x00ff00ff) * (0xff - a))) & 0xff00ff00;
unsigned int g = (((src & 0x0000ff00) * a) +
((bg & 0x0000ff00) * (0xff - a))) & 0x00ff0000;
return (src & 0xff000000) | ((rb | g) >> 8);
Creating The Bitmaps
As explained, in order to blend the button bitmap with the background, the button bitmap must have an alpha value assigned to each pixel. This means that these bitmaps must be 32-bit-per-pixel (32bpp) images where the byte order is Alpha, Red, Green, Blue (ARGB).
One way to create this type of image is to use Adobe Photoshop. Create a new image with the color mode CMYK, making sure that the background color is set to black. Photoshop can automatically anti-alias edges for you against the black background. Save the file as a .RAW type, which only saves the actual bytes of the image and no header information. Unfortunately, the order of the .RAW image will be ABGR, so there is a bit reordering that must be done before blending, but this is no big deal.
Import the bitmaps into your project as a new resource type, "RAW". The bitmaps can now be loaded as resources for use on the buttons.
BOOL CHoverButtonEx::LoadRaw(UINT rawid, long nWidth, long nHeight)
UINT style = GetButtonStyle();
if (!(style & BS_OWNERDRAW))
style |= BS_OWNERDRAW;
m_pRaw = NULL;
HGLOBAL hRaw = LoadResource(AfxGetResourceHandle(),
FindResource(AfxGetResourceHandle(), resName, "RAW"));
m_pRaw = (unsigned int*)LockResource(hRaw);
m_nRawWidth = nWidth;
m_nRawHeight = nHeight;
SetWindowPos( NULL, 0,0, m_ButtonSize.cx,
m_ButtonSize.cy,SWP_NOMOVE | SWP_NOOWNERZORDER );
Using the code
Adding transparent bitmapped buttons is very easy to implement.
- Create any number of owner-draw buttons on your dialog or view.
- Include the HoverButton header in your dialog or view header where the buttons are declared.
- Change the button types to
- Create a region for the buttons, and assign parameters.
HRGN r = CreateEllipticRgn(0, 0, 48, 48);
m_Btn1.LoadRaw(IDR_RED, 192, 48);
m_Btn2.LoadRaw(IDR_PURPLE, 192, 48);
m_Btn3.LoadRaw(IDR_PURPLE, 192, 48);
- If the background changes, simply call
Points of Interest
One of the interesting routines here is how to determine what the background looks like. I decided to read the background before the button is first displayed, and save that image until the button is refreshed.
if (m_pRaw && m_nRawWidth && m_nRawHeight && !m_bLoadBkgrnd)
unsigned int bkPix;
bkWidth = m_nRawWidth;
bkHeight = m_nRawHeight/4;
bkWidth = m_nRawWidth/4;
bkHeight = m_nRawHeight;
m_pBkGrnd = new unsigned int[bkWidth*bkHeight];
unsigned int* pBkGrnd = m_pBkGrnd;
for (int iY = 0; iY < bkHeight; iY++)
for (int iX = 0; iX < bkWidth; iX++, pBkGrnd++)
c = mydc->GetPixel(iX, iY);
bkPix = (unsigned int)c;
bkPix |= 0xff000000;
bkPix = (bkPix&0xff00ff00) | ((bkPix>>16)&0xff)
*pBkGrnd = bkPix;
m_bLoadBkgrnd = TRUE;
This method provides an accurate picture of the background, especially if the background has been stretched or tiled from the original image. Another method of determining the background might be to pass the background bitmap to the button class, and calculate the offsets, or simply pass a color reference if the background is not a bitmap. Any of these other methods might prove more efficient in selected cases.