{"id":119,"date":"2010-03-07T15:02:36","date_gmt":"2010-03-07T09:32:36","guid":{"rendered":"http:\/\/techtwaddle.net\/?p=119"},"modified":"2011-01-26T15:02:53","modified_gmt":"2011-01-26T09:32:53","slug":"transparency-and-alphablending-update-with-source-code","status":"publish","type":"post","link":"https:\/\/techtwaddle.co.in\/blog\/2010\/03\/07\/transparency-and-alphablending-update-with-source-code\/","title":{"rendered":"Transparency and AlphaBlending (Update: with source code)"},"content":{"rendered":"

In this post we’ll look at the AlphaBlend()<\/a> api and how it can be used for semi-transparent blitting. AlphaBlend()<\/a> takes a source device context and a destination device context (DC) and combines the bits in such a way that it gives a transparent effect. Follow the links for the msdn documentation.<\/p>\n

So lets take a image like,<\/p>\n

\"\"<\/p>\n

and AlphaBlend() it on our window. The code to do so is below, (under the WM_PAINT<\/span> message of WndProc<\/span>)<\/p>\n

HBITMAP hBitmap=NULL, hBitmapOld=NULL;
\nHDC hMemDC=NULL;
\nBLENDFUNCTION bf;<\/p>\n

hdc = BeginPaint(hWnd, &ps);<\/p>\n

hMemDC = CreateCompatibleDC(hdc);<\/p>\n

hBitmap = LoadBitmap(g_hInst, MAKEINTRESOURCE(IDB_BITMAP1));
\nhBitmapOld = SelectObject(hMemDC, hBitmap);<\/p>\n

bf.BlendOp = AC_SRC_OVER;
\nbf.BlendFlags = 0;
\nbf.SourceConstantAlpha = 80; \/\/transparency value between 0-255<\/span>
\nbf.AlphaFormat = 0;    <\/p>\n

AlphaBlend<\/span><\/strong>(hdc, 0, 25, 240, 100, hMemDC, 0, 0, 240, 100, bf);<\/span>
\n<\/span><\/strong>
\nSelectObject(hMemDC, hBitmapOld);<\/p>\n

DeleteDC(hMemDC);
\nDeleteObject(hBitmap);<\/p>\n

EndPaint(hWnd, &ps);<\/span><\/span>
\n <\/p>\n

The code above creates a memory DC (hMemDC<\/span><\/span>) using CreateCompatibleDC()<\/a>, loads a bitmap onto the memory DC and AlphaBlends it on the device DC (hdc<\/span><\/span>), with a transparency value of 80. The result is:<\/p>\n

\"\"<\/p>\n

Pretty simple till now. Now lets try to do something a little more exciting. Lets get two images involved, each overlapping the other, giving a better demonstration of transparency. I am also going to add a few buttons so that the user can increase or decrease the transparency by clicking on the buttons. Since this is the first time I played around with GDI apis, I ran into something that everybody runs into sometime or the other, flickering. When clicking the buttons the images would flicker a lot, I figured out why and used something called double buffering to avoid flickering. We will look at both my first implementation and the second implementation just to give the concept a little more depth and perspective.<\/p>\n

A few pre-conditions before I dive into the code:<\/p>\n

– hBitmap<\/span><\/span> and hBitmap2<\/span><\/span> are handles to the two images obtained using LoadBitmap()<\/a>, these variables are global and are initialized under WM_CREATE
\n<\/span>
\n– The two buttons in the application are labeled Opaque++<\/span><\/span> (make more opaque, less transparent) and Opaque–<\/span><\/span> (make less opaque, more transparent)<\/p>\n

– DrawPics(HWND hWnd, int step=0);<\/span><\/span> is the function called to draw the images on the screen. This is called from under WM_PAINT<\/span> and also when the buttons are clicked. When Opaque++<\/span><\/span> is clicked the ‘step<\/span><\/span>‘ value passed to DrawPics() is +20 and when Opaque–<\/span><\/span> is clicked the ‘step<\/span><\/span>‘ value is -20. The default value of ‘step<\/span><\/span>‘ is 0. The value of ‘step<\/span>‘ specifies the amount by which you want to change the transparency.<\/p>\n

Now lets take a look at my first implementation:<\/p>\n

\/\/this funciton causes flicker, cos it draws directly to screen several times<\/span><\/span>
\nvoid DrawPics(HWND hWnd, int step)
\n{
\n    HDC hdc=NULL, hMemDC=NULL;
\n    BLENDFUNCTION bf;
\n    static UINT32 transparency = 100;<\/p>\n

    \/\/no point in drawing when transparency is 0 and user clicks Opaque–<\/span>
\n    if (transparency == 0 && step < 0)
\n        return;<\/p>\n

    \/\/no point in drawing when transparency is 240 (opaque) and user clicks Opaque++<\/span>
\n    if (transparency == 240 && step > 0)
\n        return;
\n   
\n    hdc = GetDC(hWnd);<\/p>\n

<\/span><\/span>    \/\/create a memory DC<\/span>
\n    hMemDC = CreateCompatibleDC(hdc);<\/p>\n

    \/\/while increasing transparency, clear the contents of screen<\/span>
\n    if (step < 0)
\n    {
\n        RECT rect = {0, 0, 240, 200};
\n        FillRect(hdc, &rect, (HBRUSH)GetStockObject(WHITE_BRUSH));
\n    }<\/p>\n

    SelectObject(hMemDC, hBitmap2);<\/p>\n

    BitBlt(hdc, 0, 25, 240, 100, hMemDC, 0, 0, SRCCOPY);
\n   
\n    SelectObject(hMemDC, hBitmap);<\/p>\n

    transparency += step;<\/p>\n

    if (transparency >= 240)
\n        transparency = 240;<\/p>\n

    if (transparency <= 0)
\n        transparency = 0;<\/p>\n

\n    bf.BlendOp = AC_SRC_OVER;
\n    bf.BlendFlags = 0;
\n    bf.SourceConstantAlpha = transparency;
\n    bf.AlphaFormat = 0;   
\n   
\n    AlphaBlend(hdc, 0, 75, 240, 100, hMemDC, 0, 0, 240, 100, bf);<\/p>\n

    DeleteDC(hMemDC);
\n    ReleaseDC(hWnd, hdc);
\n}<\/span><\/span>
\n <\/p>\n

In the code above, we first get the window DC using GetDC()<\/a> and create a memory DC using CreateCompatibleDC()<\/a>. Then we select hBitmap2<\/span><\/span> onto the memory DC and Blt it on the window DC (hdc<\/span><\/span>). Next, we select the other image, hBitmap,<\/span><\/span> onto memory DC and AlphaBlend()<\/span> it over window DC. As I told you before, this implementation causes flickering because it draws directly on the screen (hdc<\/span><\/span>) several times. The video below shows what happens when the buttons were clicked rapidly:<\/p>\n

Well, the video recording tool I use captures only 15 frames per second and so the flickering is not visible in the video. So you’re gonna have to trust me on this, it flickers (;<\/p>\n

To solve this problem we make sure that the drawing to the screen happens only once and to do that we create an additional memory DC, hTempDC<\/span><\/span>. We perform all our drawing on this memory DC and finally when it is ready we Blt hTempDC<\/span><\/span> on hdc<\/span><\/span>, and the images are displayed in one go. Here is the code for our new DrawPics()<\/span> function:<\/p>\n

\/\/no flicker<\/span><\/span>
\nvoid DrawPics(HWND hWnd, int step)
\n{
\n    HDC hdc=NULL, hMemDC=NULL, hTempDC=NULL;
\n    BLENDFUNCTION bf;
\n    HBITMAP hBitmapTemp=NULL, hBitmapOld=NULL;
\n    static UINT32 transparency = 100;<\/p>\n

    \/\/no point in drawing when transparency is 0 and user clicks Opaque–<\/span>
\n    if (transparency == 0 && step < 0)
\n        return;<\/p>\n

    \/\/no point in drawing when transparency is 240 (opaque) and user clicks Opaque++<\/span>
\n    if (transparency == 240 && step > 0)
\n        return;
\n   
\n    hdc = GetDC(hWnd);<\/p>\n

    hMemDC = CreateCompatibleDC(hdc);
\n    hTempDC = CreateCompatibleDC(hdc);<\/p>\n

    hBitmapTemp = CreateCompatibleBitmap(hdc, 240, 150);
\n    hBitmapOld = (HBITMAP)SelectObject(hTempDC, hBitmapTemp);<\/p>\n

    \/\/while increasing transparency, clear the contents<\/span>
\n    if (step < 0)
\n    {
\n        RECT rect = {0, 0, 240, 150};
\n        FillRect(hTempDC, &rect, (HBRUSH)GetStockObject(WHITE_BRUSH));
\n    }<\/p>\n

    SelectObject(hMemDC, hBitmap2);<\/p>\n

    \/\/Blt hBitmap2 directly to hTempDC<\/span>
\n    BitBlt(hTempDC, 0, 0, 240, 100, hMemDC, 0, 0, SRCCOPY);
\n   
\n    SelectObject(hMemDC, hBitmap);<\/p>\n

    transparency += step;<\/p>\n

    if (transparency >= 240)
\n        transparency = 240;<\/p>\n

    if (transparency <= 0)
\n        transparency = 0;<\/p>\n

\n    bf.BlendOp = AC_SRC_OVER;
\n    bf.BlendFlags = 0;
\n    bf.SourceConstantAlpha = transparency;
\n    bf.AlphaFormat = 0;   
\n   
\n    AlphaBlend(hTempDC, 0, 50, 240, 100, hMemDC, 0, 0, 240, 100, bf);<\/p>\n

    \/\/now hTempDC is ready, blt it directly on hdc<\/span>
\n    BitBlt(hdc, 0, 25, 240, 150, hTempDC, 0, 0, SRCCOPY);<\/p>\n

    SelectObject(hTempDC, hBitmapOld);<\/p>\n

    DeleteObject(hBitmapTemp);
\n    DeleteDC(hMemDC);
\n    DeleteDC(hTempDC);<\/p>\n

    ReleaseDC(hWnd, hdc);
\n}<\/span><\/span>
\n <\/p>\n

This function is very similar to the first version, except for the use of hTempDC<\/span><\/span>. Another point to note is the use of CreateCompatibleBitmap()<\/a>. When a memory device context is created using CreateCompatibleDC()<\/a>, the context is exactly one monochrome pixel high and one monochrome pixel wide. So in order for us to draw anything onto hTempDC<\/span><\/span>, we first have to set a bitmap on it. We use CreateCompatibleBitmap()<\/a> to create a bitmap of required dimension (240×150 above), and then select this bitmap onto hTempDC<\/span><\/span>. Think of it as utilizing an extra canvas, drawing everything on the canvas and finally transferring the contents to the display in one scoop. And with this version the flickering is gone, video follows:<\/p>\n

<\/object><\/p>\n

 <\/p>\n

If you want the entire solutions source code then leave a message, I will share the code over SkyDrive.<\/p>\n

Update:<\/strong> I have shared the source code of this application on SkyDrive. The solution was created using Visual Studio 2008 and has been tested on Windows Mobile 6 Professional Emulator. The link follows,<\/p>\n

Source Code: AlphaBlending.zip<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

In this post we’ll look at the AlphaBlend() api and how it can be used for semi-transparent blitting. AlphaBlend() takes a source device context and a destination device context (DC) and combines the bits in such a way that it gives a transparent effect. Follow the links for the msdn documentation. So lets take a … Continue reading Transparency and AlphaBlending (Update: with source code)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1ktFF-1V","_links":{"self":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/119"}],"collection":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/comments?post=119"}],"version-history":[{"count":1,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/119\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/119\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/categories?post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/tags?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}