2010年6月26日 星期六

如何在uC/GUI中實現表單半透明效果

uC/GUI系統中的表單可以實全透明效果,但是無法實現半透明效果。

  怎麼實現半透明效果呢?先考慮原理。

  半透明原理:

  假設LCD256色的。顏色格式為332RGB

  顯存中的每一個位元組的資料對應一個象素點。 在資料寫入顯存之前,讀取相應相素點值,然後與


 


新的資料按一定的規則混合之後,再寫入相應圖元點的顯存。

  這樣主要問題關鍵是混合演算法。

  混合演算法目前在遊戲上常用到的演算法是AlphaBlend。計算公式如下

  假設一幅圖像是A,另一幅透明的圖像是B,那麼透過B去看A,看上去的圖像C就是BA的混合圖像,設B圖像的透明度為alpha(取值為0-11為完全透明,0為完全不透明)Alpha混合公式如下:

  R(C)=(1-alpha)*R(B)+alpha*R(A)

  G(C)=(1-alpha)*G(B)+alpha*G(A)

  B(C)=(1-alpha)*B(B)+alpha*B(A)

  R(x)G(x)B(x)分別指顏色xRGB分量原色值。從上面的公式可以知道,Alpha其實是一個決定混合透明度的數值。應用Alpha混合技術,可以實現遊戲中的許多特效,比如火光、煙霧、陰影、動態光源等半透明效果。

  原理和混合演算法都清楚知後,下來考慮在uC/GUI這樣的環境下如何實現。

  再考慮一個問題,uC/GUI系統分為好幾個層面。簡單地可以歸結為:

  1、硬體驅動層

  2、基本2D圖形庫

  3、表單

  可以想像層次越高,涉及的內容越多,修改的工作量就越大。

  如果想修改最少的代碼實現半透明功能,最好在硬體驅動層找切入口。

  分析一下硬體驅動層的壞境

  在硬體驅動層中我找到了一個巨集定義

  LCD_WRITE_MEM(Off,data) *((U8*)(DC+(((U32)(Off)))))=data

  從文檔可以看到該巨集定義的功能就是向顯存寫入圖元點的值。

  那就修改這個巨集定義吧,把剛才說的演算法加入該巨集定義,流程如下:

  a、讀取相應象素點值

  b、與新的象素點值按照混合演算法轉換。

  c、將轉換結果寫入顯存對應位置。

  然後進行簡單的測試。

  如下

  /設置透明度為0,完全不透明,先執行清屏。

  GUI_SetBkColor(GUI_WHITE);

  GUI_SetColor(GUI_WHITE);

  GUI_Clear();

  /填充一個方框

  GUI_SetColor(GUI_RED);

  GUI_FillRect(0,0,80,30);

  *****這裏設置透明度為80透明之後再執行

  GUI_SetColor(GUI_GREEN);

  GUI_FillRect(50,5,200,30);
 
  這時候觀察兩個方框疊交的部分和其他部份,可以看到透明效果已經出現了。

  到這個時候可以證明,你的思想和修改是正確的。

  接下來的事情是如何把這個實現效果跟GUI系統完美結合起來。

  uC/GUI代碼這麼多,如何下手?

  有一個核心資料結構你必須知道。GUI_CONTEXT

typedef struct {
/* Variables in LCD module */
LCD_COLORINDEX_UNION LCD;
LCD_RECT ClipRect;
U8 DrawMode;
U8 SelLayer;
U8 TextStyle;
U8 TransPara;
/* Variables in GL module */
GUI_RECT* pClipRect_HL; /* High level clip rectangle ... Speed optimization so drawing routines can optimize */
U8 PenSize;
U8 PenShape;
U8 LineStyle;
U8 FillStyle;
/* Variables in GUICHAR module */
const GUI_FONT GUI_UNI_PTR * pAFont;
const GUI_UC_ENC_APILIST * pUC_API; /* Unicode encoding API */
I16P LBorder;
I16P DispPosX, DispPosY;
I16P DrawPosX, DrawPosY;
I16P TextMode, TextAlign;
GUI_COLOR Color, BkColor; /* Required only when changing devices and for speed opt (caching) */
/* Variables in WM module */
#if GUI_WINSUPPORT
const GUI_RECT* WM__pUserClipRect;
GUI_HWIN hAWin;
int xOff, yOff;
#endif
/* Variables in MEMDEV module (with memory devices only) */
#if GUI_SUPPORT_DEVICES
const tLCDDEV_APIList* pDeviceAPI; /* function pointers only */
GUI_HMEM hDevData;
GUI_RECT ClipRectPrev;
#endif
/* Variables in Anitaliasing module */
#if GUI_SUPPORT_AA
const tLCD_HL_APIList* pLCD_HL; /* Required to reroute drawing (HLine & Pixel) to the AA module */
U8 AA_Factor;
U8 AA_HiResEnable;
#endif
} GUI_CONTEXT;

  認真分析一下它。你會發現它包含了整個系統作圖的最基本資訊。而且這個結構體所聲明的變數GUI_Context也是硬體作圖層(硬體驅動層)所唯一依賴的變數。

  在結構體中發現,需要增加透明度資訊。

  於是在結構體中增加一條:

  U8 BlendPara;/混合演算法參數Alpha;

  現在來一個情景分析。

  1、在畫圖前設置該變數值。0---100之間。

  2、在LCD_WRITE_MEM時使用它。這樣半透明和透明效果就都實現了。

  用2D圖形庫作圖測試確實能實現半透明效果。

 再測試表單時你會發現一個問題。在基於WM_Window的所有控制項上使作半透明效果會出現問題:

  在反復刷新(即反復產生WM_PAINT)消息時,該表單的顏色一直在變數,而且由淺及深或由深及淺反復變化。

  我們的話題是實現表單的半透明效果。這並不是我們的最終目標,而是目標的第一步。


沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。