emWin 2天速成实例教程014_BMP位图图片显示以及位图皮肤的使用方法

备注：(1)打开工程目录下的"Exe\GUISimulationDebug.exe"即可看到效果。(2)看完教程000～005就基本会用emWin做项目，其他章节可以需要时再参考。

 

一、在CodeBlocks中使用位图

备注：GLCD屏支持24bbp(RGB888)、16bbp(RGB565)格式的BMP位图(不支持其他格式的位图)，16bbp(RGB565)BMP位图可以通过photoshop保存得到，因此，在CodeBlocks中也需要使用这种格式的位图，以photoshop为例：



以教程000“如何快速入门ucGUI_emWin”为例介绍emWin位图以及位图皮肤的使用方法。

(1)截屏模拟器并保存为以下两个bmp文件，一个是界面截屏(为了区别截屏界面，特地变了下颜色)，另一个是界面截屏的反色，文件名对应为bitmap_n.bmp、bitmap_m.bmp：



  

 
  


变色的用于正常背景显示，反色的用于按键点击。

备注：如果你想要精美华丽的界面效果，也是按照此方法：截屏原始界面->美工处理->设置emWin使用图片皮肤(整幅图片,不需要切片分解)。

 

(2)用BmpCvt_V530.exe(”软件/资料下载”栏目可下载)将位图转换为C文件：bitmap_n.c、bitmap_m.c





(3)将bitmap_n.c、bitmap_m.c拷贝到工程目录并添加到CodeBlocks工程：



(4)修改程序显示背景位图：



备注：为何是GUI_DrawBitmap(&bmbitmap_n,-5,-18);而不是GUI_DrawBitmap(&bmbitmap_n,0,0);？因为是在Framewin的Client区中显示图片，所以要把Framewin的边框偏移切掉(当然，你也可以做成不含边框的图片)。

 

(5)按钮位图皮肤的实现：

将skinPRJ_WINemWin530noOS_CodeBlocks_GBK.rar例程(在”GLCD资料包”里面可以找到)的Application/skin目录拷贝到工程目录并添加到CodeBlocks工程，skin目录的程序是尼奇光电编写的skinning方式实现位图皮肤程序(关于实现原理可以看文章的最后)：



  

修改程序：



这个步骤的目的是将2个状态的皮肤图片的”指针”存于父页面之中，这个父页面之中的所有子控件就可以共享这幅图片(这就是整幅图片不需要切片分解的原理)，如果将所有子控件设置为使用该皮肤图片时，emWin内部会自动调用图片作为皮肤(请不要想着还要自己去实现)。2个状态的图片包括：正常、按下/标记(比如选择控件的打勾状态)，还有"禁用"和"聚焦"是可选状态。

设置控件使用位图皮肤：



SKIN_button3C ”3C”是什么意思？请看源码注释。

  

编译运行：



 

二、在GLCD屏中使用位图

在GLCD屏中使用位图，除了生成bitmap_n.c、bitmap_m.c不一样以外，其他和CodeBlocks是一样。

(1)将bitmap_n.bmp和bitmap_m.bmp拷贝到GLCD的Nand-Flash的pics目录。

(2)双击Nand-Flash根目录下的bmpGen_v120.exe工具，将生成bitmap.c和bitmap.h两个文件。

(3)将bitmap.c和bitmap.h加到MDK工程，即可像CodeBlocks一样使用bitmap_n、bitmap_m两个位图：



  

三、emWin通过skinning方式实现控件位图皮肤

1)emWin传统贴皮肤图片的方法，是调用APP函数XXXX_SetBitmap()方式实现，但非常非常麻烦。

2)要想把控件显示出来，emWin每种控件都有1个控件绘制函数，而把这个控件绘制函数改成我们自己编写的"自定义绘制函数"，这样我们想把这个控件画成什么样都行，emWin已经不参与这个控件的绘制工作了；在这个自定义绘制函数里面我们什么都不干，只显示出这个控件的图片，这就是用skinning方式实现位图皮肤。

3)支持整幅图片贴图，不需要对整幅图片进行切片分解，可以非常快速做界面贴图。



如上图所示，(x0,y0)为整幅图片的显示坐标，(x1,y1)和(x2,y2)是emWin为控件自动生成的剪切显示坐标，我们只需要调用GUI_DrawBitmap()函数在(x0,y0)显示整幅图片即可，emWin会自动剪切显示出该控件的位图皮肤。

 

(1)Button控件的自定义绘制函数：

SKIN_button.c、skin.h

 

(2)Skinning方式实现位图皮肤的实施步骤：

1)创建窗体时，将"页面图片结构体指针"保存于窗体中：

staticWIN_BITMAP BMP_WindowDLG1; WIN_BITMAP *pBMP_WindowDLG1 = &BMP_WindowDLG1;

//将不同状态的页面BMP位图赋值给"页面图片结构体"(所有成员都要赋值)

BMP_WindowDLG1.normal= &bmbitmap_n;

BMP_WindowDLG1.mark= &bmbitmap_m;

BMP_WindowDLG1.focus= &bmbitmap_n;

BMP_WindowDLG1.disable= &bmbitmap_n;

BMP_WindowDLG1.thumbN= &bmbitmap_n;

BMP_WindowDLG1.thumbM= &bmbitmap_n;

WM_SetUserData(hWin,&pBMP_WindowDLG1, sizeof(pBMP_WindowDLG1));//将指针写到用户数据区

 

2)在窗体初始化WM_INIT_DIALOG消息中，把BUTTON控件的绘制函数改成自定义绘制函数：

hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);//获取句柄

BUTTON_SetSkin(hItem, SKIN_button3C);//将这个BUTTON控件改成自定义绘制函数

  

(3)总结：

以整幅图片实现emWin位图皮肤应该是尼奇光电业界首创的方法，可以大大减轻控件贴图的工作量，保守估计贴图工作效率至少提高10倍以上。如果把每个控件对应的图片先切片分解下来，然后再转换成C文件，最后再贴图到控件上面去，那样工作量将是非常恐怖的!



 

源码/软件下载