(1)emWin通過skinning方式實現控制元件點陣圖面板：

1)emWin傳統貼面板圖片的方法，是呼叫APP函式XXXX_SetBitmap()方式實現，但非常非常麻煩。

2)要想把控制元件顯示出來，emWin每種控制元件都有1個控制元件繪製函式，而把這個控制元件繪製函式改成我們自己編寫的"自定義繪製函式"，這樣我們想把這個控制元件畫成什麼樣都行，emWin已經不參與這個控制元件的繪製工作了；在這個自定義繪製函式裡面我們什麼都不幹，只顯示出這個控制元件的圖片，這就是用skinning方式實現點陣圖面板。

3)支援整幅圖片貼圖，不需要對整幅圖片進行切片分解，非常便捷。

如上圖所示，

(2)Button控制元件的自定義繪製函式：

#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) = {WM_GetParent1C,WM_GetParent2C,WM_GetParent3C,WM_GetParent4C,WM_GetParent5C,WM_GetParent6C,WM_GetParent7C,WM_GetParent8C};

//Button控制元件的自定義繪製函式
static int SKIN_button(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_BITMAP:
   //case WIDGET_ITEM_DRAW_TEXT:
      break;
   default: return BUTTON_DrawSkinFlex(pDrawItemInfo);//emWin預設控制元件繪製函式

   case WIDGET_ITEM_DRAW_BACKGROUND:
      hWin = (WM_GET_PARENT[C-1])(pDrawItemInfo->hWin);//位於第幾層修改這裡(WM_GetParent數=層數-1)
      WM_GetUserData(hWin, &winBMP, sizeof(winBMP));//從使用者資料區讀出"頁面圖片結構體"指標
      //獲取此控制元件相對於主頁面(比如:WINDOW)位置偏移座標
      x0 = WM_GetWindowOrgX(hWin) - WM_GetWindowOrgX(pDrawItemInfo->hWin);
      y0 = WM_GetWindowOrgY(hWin) -WM_GetWindowOrgY(pDrawItemInfo->hWin);
      if(pDrawItemInfo->ItemIndex == BUTTON_SKINFLEX_PI_ENABLED)
         GUI_DrawBitmap(winBMP->normal, x0, y0);//從頁面座標顯示圖片,emWin會自己剪切出這個控制元件範圍的圖片
      else if(pDrawItemInfo->ItemIndex == BUTTON_SKINFLEX_PI_PRESSED)
         GUI_DrawBitmap(winBMP->mark, x0, y0);
      else if(pDrawItemInfo->ItemIndex == BUTTON_SKINFLEX_PI_FOCUSSED)
         GUI_DrawBitmap(winBMP->focus, x0, y0);
      else if(pDrawItemInfo->ItemIndex == BUTTON_SKINFLEX_PI_DISABLED)
         GUI_DrawBitmap(winBMP->disable, x0, y0);
      else BUTTON_DrawSkinFlex(pDrawItemInfo);
      break;
   case WIDGET_ITEM_DRAW_TEXT:
      return BUTTON_DrawSkinFlex(pDrawItemInfo);
   }
   return 0;
}

//Button控制元件的自定義繪製函式,位於第2層(比如:WINDOW->BUTTON)
int SKIN_button2C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){
   return SKIN_button(pDrawItemInfo, 2);
}
//Button控制元件的自定義繪製函式,位於第3層(比如:FRAMEWIN->CLIENT->BUTTON)
int SKIN_button3C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){
   return SKIN_button(pDrawItemInfo, 3);
}
//Button控制元件的自定義繪製函式,位於第4層(比如:WINDOW->FRAMEWIN->CLIENT->BUTTON)
int SKIN_button4C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){
   return SKIN_button(pDrawItemInfo, 4);
}
//Button控制元件的自定義繪製函式,位於第5層(比如:WINDOW->MULTIPAGE->CLIENT->WINDOW->BUTTON)
int SKIN_button5C(const WIDGET_ITEM_DRAW_INFO * pDrawItemInfo){
   return SKIN_button(pDrawItemInfo, 5);
}
 

(3)Skinning方式實現點陣圖面板的實施步驟：

1)建立窗體時，將"頁面圖片結構體指標"保存於窗體中：
  WINDOW_BMP *winBMP;
  static WINDOW_BMP BMP_WIN_main;//為"WIN_main"頁面定義1個"頁面圖片結構體"
  BMP_WIN_main.normal = &bmPage2_N;//將不同狀態的頁面BMP點陣圖賦值給"頁面圖片結構體"
  BMP_WIN_main.mark = &bmPage2_M;
  BMP_WIN_main.focus = &bmPage2_N;
  BMP_WIN_main.disable = &bmPage2_N;

(4)總結：

以整幅圖片實現emWin點陣圖面板應該是諾嵌光電業界首創的方法，可以大大減輕控制元件貼圖的工作量，保守估計貼圖工作效率至少提高10倍以上。如果把每個控制元件對應的圖片先切片分解下來，然後再轉換成C檔案，最後再貼圖到控制元件上面去，那樣工作量將是非常恐怖的!