您现在的位置：程式碼之家 >> 編程語言 > >> C語言 >> C++ >> 關於C++

C++Builder 實現軟體換膚技術：從 XML 佈局到不規則視窗繪製

編輯：關於C++

判斷一款軟體是否優秀，除了功能完善、效能穩定、操作直觀外，介面美觀度愈發受到重視。使用者不再滿足於傳統矩形視窗，不規則造型、可自由換膚的介面已成主流趨勢。本文將介紹一種基於 C++Builder 的完整換膚實作方案，涵蓋介面元素定義、美術資源規範、XML 佈局描述、高效解析策略、不規則視窗區域建立，以及以 TImage 模擬按鈕的繪圖技巧。

一、協同工作流：程式設計師與美術人員的分工

專案伊始，程式設計師依據功能需求定義介面元素（控制項），控制項名稱 作為核心識別碼，雙方以此對接。美術人員依據元素清單繪製素材圖集，並輸出一份 XML 描述檔，記錄每個元素在圖集中的座標、尺寸、於視窗中的位置，以及普通、滑鼠懸停、按下、失效、聚焦等狀態對應的圖片區塊。

二、XML 佈局描述範例

以下節錄登入對話框的最小化、關閉按鈕定義：

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <control>
    <ctrlName>BMin</ctrlName>
    <size><height>18</height><width>18</width></size>
    <formPos><left>302</left><top>2</top></formPos>
    <action>
      <normal><left>0</left><top>268</top></normal>
      <mouseUp><left>0</left><top>291</top></mouseUp>
      <mouseDown><left>0</left><top>314</top></mouseDown>
      <disable/><focus/>
    </action>
  </control>
  <control>
    <ctrlName>BClose</ctrlName>
    <size><height>18</height><width>18</width></size>
    <formPos><left>327</left><top>2</top></formPos>
    <action>
      <normal><left>28</left><top>268</top></normal>
      <mouseUp><left>28</left><top>291</top></mouseUp>
      <mouseDown><left>28</left><top>314</top></mouseDown>
    </action>
  </control>
  ...
</root>

元素介面
圖一：介面元素定義

美術素材圖集
圖二：美術繪製的登入視窗元素圖集

三、一次性解析與結構體快取

為避免執行期頻繁讀取、解析 XML 造成介面載入停頓，採用啟動時一次性解析，將所有控制項資訊填入結構體陣列：

typedef struct Ctrls {
    String ctrlName;        // 控制項名稱
    TPoint formPos;         // 視窗內位置
    int width, height;      // 尺寸
    bool hasNormal, hasMouseUp, hasMouseDown, hasDisable, hasFocus; // 狀態圖是否存在
    TPoint normal, mouseUp, mouseDown, disable, focus; // 圖集內座標
} m_ctrls;

四、不規則視窗區域建立

利用背景圖透明色（取左上角像素）掃描每一掃描線的首尾非透明像素，構建多邊形區域並套用 SetWindowRgn：

Graphics::TBitmap *bitmap0 = new Graphics::TBitmap;
bitmap0->LoadFromFile(".\\login\\Login_Bg.bmp");
LoginDlgBG->Picture->Bitmap = bitmap0;
TColor baseColor = LoginDlgBG->Canvas->Pixels[0][0];

// 分配座標陣列、建立矩形區域、逐行掃描首尾非透明點
// 以 CreatePolygonRgn + CombineRgn(RGN_AND) 取交集
// 最後 SetWindowRgn(Handle, WndRgn, true);

完成效果
圖三：完成後的登入對話框效果

五、以 TImage 替代 TButton 實現不規則按鈕

TSpeedButton 繼承 TGraphicControl 無視窗句柄，難以配合 SetWindowRgn 做不規則造型。靈活做法是使用 TImage：

利用 Canvas->CopyRect 從總圖集剪裁對應狀態圖片
透過 OnMouseMove、OnMouseDown、OnMouseUp 事件切換狀態圖
美術只需在圖集繪製不規則造型，程式端自動扣圖，無需額外遮罩

void __fastcall TForm1::createButtonCtrl(TImage *image, String ctrlName, String actionName) {
    // 1. 依 ctrlName 查找 m_ctrls 陣列
    // 2. 設定 image 尺寸與位置
    // 3. 依 actionName 取得對應圖集座標
    // 4. CopyRect 從 LoginDlgBG 扣圖至 image
}