Alpha Blending and Alpha Channel on Windows Mobile

      2007年的时候，Alex在《Compelling UI's in NetCF anybody?》一文中，讲述了windows mobile 5平台上如何利用AlphaBlend做很酷的透明图片界面。前不久的webcast《24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications》上，他讲述了目前windows mobile界面设计的趋势，其中也涉及到了Alpha Blending 和 Alpha Channel技术。下面对这两个概念进行解释。

    在百科全书wiki上，我们可以找到这个Alpha compositing的解释。在计算机图形学中，alpha compositing是一种结合图片和背景来创造部分透明效果的技术。Alpha Channel最早是由A. R. Smith在20世纪70年代提出来，最终由Thomas Porter和Tom Duff在1984年发展成熟。简单来说，传统的一个像素的颜色是用RGB来表示的，而在Alpha Channel中，需要加上第四个参数，如(0.0, 0.5, 0.0, 0.5)中，前面的三个参数“0.0, 0.5, 0.0”表示RGB，而第四个参数0.5表示Alpha值。因此，在Thomas Porter和Tom Duff的论文中，他们利用Alpha值，定义了两张图片合成的5种运算(over,in,out,atop,xor)，效果可以参考下图1：

图1：5种运算效果图（图片摘自Alpha compositing）

    目前，支持Alpha Blending的操作系统/GUI包括以下几种：

• Mac OS X
• Windows 2000, XP, Server 2003, Windows CE, Vista and Windows 7
• The XRender extension to the X Window System (this includes modern Linux systems)
• RISC OS Adjust
• QNX Neutrino
• Plan 9
• Inferno
• AmigaOS 4.1
• BeOS, Zeta and Haiku
• Syllable
• MorphOS

    从windows mobile 5.0开始，平台就已经支持Alpha Blending的本地调用了。在http://code.msdn.microsoft.com/uiframework这个课程代码中，我们可以看到，在工程中，他采用了P/Invoke：

Code
[DllImport("coredll.dll")]

extern public static Int32 AlphaBlend(IntPtr hdcDest, Int32 xDest, Int32 yDest, Int32 cxDest, Int32 cyDest, IntPtr hdcSrc, Int32 xSrc, Int32 ySrc, Int32 cxSrc, Int32 cySrc, BlendFunction blendFunction);

 

    封装了DrawAlpha这个方法：

Code
public static void DrawAlpha(this Graphics gx, Bitmap image, byte transparency, int x, int y)

        {

            using (Graphics gxSrc = Graphics.FromImage(image))

            {

                IntPtr hdcDst = gx.GetHdc();

                IntPtr hdcSrc = gxSrc.GetHdc();

                BlendFunction blendFunction = new BlendFunction();

                blendFunction.BlendOp = (byte)BlendOperation.AC_SRC_OVER;   // Only supported blend operation

               blendFunction.BlendFlags = (byte)BlendFlags.Zero;           // Documentation says put 0 here

                blendFunction.SourceConstantAlpha = transparency;           // Constant alpha factor

                blendFunction.AlphaFormat = (byte)0;                        // Don't look for per pixel alpha

                PlatformAPIs.AlphaBlend(hdcDst, x, y, image.Width, image.Height, 

                               hdcSrc, 0, 0, image.Width, image.Height, blendFunction);

                gx.ReleaseHdc(hdcDst);                                      // Required cleanup to GetHdc()

                gxSrc.ReleaseHdc(hdcSrc);                                   // Required cleanup to GetHdc()

            }

}

 

    最后，作者给出了这个方法的应用，在桌面上显示天气的UI和图片的Slide Show。同时，可以使用下面的代码来隐藏title bar，并全屏显示应用程序。

Code
            // Don't show title bar and allocate the full screen 

            this.FormBorderStyle = FormBorderStyle.None;

            this.WindowState = FormWindowState.Maximized; 

 

    另外，作者还给出了按钮浮起和按下状态的颜色变化处理，以及text 文本嵌入的处理，大家有需要的话，可以下载过来参考一下。

    最终的显示效果如下图2所示：

图2：程序UI效果

    下图是Location平常状态与被按下时的对比：

图3：按钮的不同效果

参考链接：

Alex：Compelling UI's in NetCF anybody?》

MSDN：AlphaBlend

Webcast：24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications》

Wiki：Alpha compositing