emWin实现BMP位图皮肤之Framewin篇

(1)emWin通过skinning方式实现控件位图皮肤&＃xff1a;

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

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

3)支持整幅图片贴图&＃xff0c;不需要对整幅图片进行切片分解&＃xff0c;非常便捷。

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

(2)Framewin控件的自定义绘制函数&＃xff1a;

SKIN_framewin.c

skinning.h

#include "DIALOG.h"
#include "GUI.h"
#include "skinning.h"//获取父窗口句柄,即主页面句柄,保存着页面位图的指针
static WM_HWIN WM_GetParent1C(WM_HWIN hChild) {return hChild;}
static WM_HWIN WM_GetParent2C(WM_HWIN hChild) {return WM_GetParent(hChild);}
static WM_HWIN WM_GetParent3C(WM_HWIN hChild) {return WM_GetParent(WM_GetParent(hChild));}
static WM_HWIN WM_GetParent4C(WM_HWIN hChild) {return WM_GetParent(WM_GetParent(WM_GetParent(hChild)));}
static WM_HWIN WM_GetParent5C(WM_HWIN hChild) {return WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(hChild))));}
static WM_HWIN WM_GetParent6C(WM_HWIN hChild) {return WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(hChild)))));}
static WM_HWIN WM_GetParent7C(WM_HWIN hChild) {return WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(hChild))))));}
static WM_HWIN WM_GetParent8C(WM_HWIN hChild) {return WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(WM_GetParent(hChild)))))));}
static WM_HWIN (*WM_GET_PARENT[])(WM_HWIN) &＃61; {WM_GetParent1C,WM_GetParent2C,WM_GetParent3C,WM_GetParent4C,WM_GetParent5C,WM_GetParent6C,WM_GetParent7C,WM_GetParent8C};//Framewin控件的自定义绘制函数
static int SKIN_framewin(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo, unsigned char C)
{WM_HWIN hWin;int x0, y0;WINDOW_BMP *winBMP;switch (pDrawItemInfo->Cmd){case WIDGET_ITEM_CREATE://case WIDGET_ITEM_DRAW_BACKGROUND:case WIDGET_ITEM_DRAW_FRAME:case WIDGET_ITEM_DRAW_SEP:case WIDGET_ITEM_DRAW_TEXT://case WIDGET_ITEM_GET_BORDERSIZE_L://case WIDGET_ITEM_GET_BORDERSIZE_R://case WIDGET_ITEM_GET_BORDERSIZE_T://case WIDGET_ITEM_GET_BORDERSIZE_B://case WIDGET_ITEM_GET_RADIUS:break;case WIDGET_ITEM_GET_BORDERSIZE_L:case WIDGET_ITEM_GET_BORDERSIZE_R:case WIDGET_ITEM_GET_BORDERSIZE_T:case WIDGET_ITEM_GET_BORDERSIZE_B:case WIDGET_ITEM_GET_RADIUS:return 0;case WIDGET_ITEM_DRAW_BACKGROUND:hWin &＃61; (WM_GET_PARENT[C-1])(pDrawItemInfo->hWin);//位于第几层修改这里(WM_GetParent数&＃61;层数-1)WM_GetUserData(hWin, &winBMP, sizeof(winBMP));//从用户数据区读出"页面图片结构体"指针//获取此控件相对于主页面(比如:WINDOW)位置偏移坐标x0 &＃61; WM_GetWindowOrgX(hWin) - WM_GetWindowOrgX(pDrawItemInfo->hWin);y0 &＃61; WM_GetWindowOrgY(hWin) -WM_GetWindowOrgY(pDrawItemInfo->hWin);GUI_DrawBitmap(winBMP->normal, x0, y0);//从页面坐标显示图片,emWin会自己剪切出这个控件范围的图片break;default: return FRAMEWIN_DrawSkinFlex(pDrawItemInfo);//emWin默认控件绘制函数}return 0;
}//Framewin控件的自定义绘制函数,位于第1层(比如:FRAMEWIN)
int SKIN_framewin1C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){return SKIN_framewin(pDrawItemInfo, 1);
}
//Framewin控件的自定义绘制函数,位于第2层(比如:WINDOW->FRAMEWIN)
int SKIN_framewin2C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){return SKIN_framewin(pDrawItemInfo, 2);
}
//Framewin控件的自定义绘制函数,位于第3层(比如:FRAMEWIN->CLIENT->FRAMEWIN)
int SKIN_framewin3C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){return SKIN_framewin(pDrawItemInfo, 3);
}
//Framewin控件的自定义绘制函数,位于第4层(比如:WINDOW->FRAMEWIN->CLIENT->FRAMEWIN)
int SKIN_framewin4C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){return SKIN_framewin(pDrawItemInfo, 4);
}
//Framewin控件的自定义绘制函数,位于第5层(比如:WINDOW->MULTIPAGE->CLIENT->WINDOW->FRAMEWIN)
int SKIN_framewin5C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){return SKIN_framewin(pDrawItemInfo, 5);
}//Multipage子页面背景重绘函数
static int SKIN_framewin_paint(WM_HWIN hPage, unsigned char C)
{WM_HWIN hWin;int x0, y0;WINDOW_BMP *winBMP;hWin &＃61; (WM_GET_PARENT[C-1])(hPage);//位于第几层修改这里(WM_GetParent数&＃61;层数-1)WM_GetUserData(hWin, &winBMP, sizeof(winBMP));//从用户数据区读出"页面图片结构体"指针//获取此控件相对于主页面(比如:WINDOW)位置偏移坐标x0 &＃61; WM_GetWindowOrgX(hWin) - WM_GetWindowOrgX(hPage);y0 &＃61; WM_GetWindowOrgY(hWin) - WM_GetWindowOrgY(hPage);GUI_DrawBitmap(winBMP->normal, x0, y0);//从页面坐标显示图片,emWin会自己剪切出这个控件范围的图片return 0;
}//Multipage子页面背景重绘函数,位于第1层(比如:FRAMEWIN)
int SKIN_framewin_paint1C(WM_HWIN hWin){return SKIN_framewin_paint(hWin, 1);
}
//Multipage子页面背景重绘函数,位于第2层(比如:WINDOW->FRAMEWIN)
int SKIN_framewin_paint2C(WM_HWIN hWin){return SKIN_framewin_paint(hWin, 2);
}
//Multipage子页面背景重绘函数,位于第3层(比如:FRAMEWIN->CLIENT->FRAMEWIN)
int SKIN_framewin_paint3C(WM_HWIN hWin){return SKIN_framewin_paint(hWin, 3);
}
//Multipage子页面背景重绘函数,位于第4层(比如:WINDOW->FRAMEWIN->CLIENT->FRAMEWIN)
int SKIN_framewin_paint4C(WM_HWIN hWin){return SKIN_framewin_paint(hWin, 4);
}
//Multipage子页面背景重绘函数,位于第5层(比如:FRAMEWIN->CLIENT->MULTIPAGE->CLIENT->WINDOW)
int SKIN_framewin_paint5C(WM_HWIN hWin){return SKIN_framewin_paint(hWin, 5);
}

(3)Skinning方式实现位图皮肤的实施步骤&＃xff1a;

1)创建窗体时&＃xff0c;将"页面图片结构体指针"保存于窗体中&＃xff1a;
  WINDOW_BMP *winBMP;
  static WINDOW_BMP BMP_WIN_main;//为"Framewin"页面定义1个"页面图片结构体"
  BMP_WIN_main.normal &＃61; &bmPage2_N;//将不同状态的页面BMP位图赋值给"页面图片结构体"
  BMP_WIN_main.mark &＃61; &bmPage2_M;
  BMP_WIN_main.focus &＃61; &bmPage2_N;
  BMP_WIN_main.disable &＃61; &bmPage2_N;
  BMP_WIN_main.thumbN &＃61; &bmPage2_N;
  BMP_WIN_main.thumbM &＃61; &bmPage2_N;
  winBMP &＃61; &BMP_WIN_main;
  hWin &＃61; CreateFramewin(WM_HBKWIN);//创建Framewin页面
  WM_SetUserData(hWin, &winBMP, sizeof(winBMP));//将"页面图片结构体"指针写到用户数据区
2)在窗体初始化WM_INIT_DIALOG消息中&＃xff0c;把FRAMEWIN控件的绘制函数改成自定义绘制函数&＃xff1a;
  FRAMEWIN_SetSkin(pMsg->hWin, SKIN_framewin1C);//将这个FRAMEWIN控件改成自定义绘制函数
3)在FRAMEWIN控件的回调函数的WM_PAINT重绘消息中&＃xff0c;调用FRAMEWIN的背景重绘函数&＃xff1a;
  static void _cbFramewin(WM_MESSAGE * pMsg)

  {
    switch (pMsg->MsgId) {
      case WM_PAINT: SKIN_framewin_paint2C(pMsg->hWin); break;
      case WM_INIT_DIALOG: break;
      case WM_NOTIFY_PARENT: break;
      default: WM_DefaultProc(pMsg); break;
    }
  }

(4)总结&＃xff1a;

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

源码下载: \docs\demoEM\demo_emwin_CodeBlocks\skinPRJ_WINemWin530noOS_CodeBlocks_v127.rar

如何打开源码看博文&＃xff1a;emWin 2天速成实例教程000_如何快速入门ucGUI/emWin