Win32 開發入門（23）：漸層填充 - GradientFill 矩形與三角形渲染詳解

GradientFill 以頂點陣列定義顏色與座標，配合網格索引渲染矩形或三角形漸層。本文詳細解析參數結構、索引對應邏輯與雙模式實作範例。

函數原型與關鍵結構

BOOL GradientFill(
    HDC hdc,
    PTRIVERTEX pVertex,   // 頂點陣列：座標 + ARGB 顏色
    ULONG nVertex,        // 頂點數量
    PVOID pMesh,          // 網格陣列：GRADIENT_RECT 或 GRADIENT_TRIANGLE
    ULONG nMesh,          // 網格數量
    ULONG ulMode          // 填充模式
);

TRIVERTEX - 單一頂點定義

typedef struct _TRIVERTEX {
    LONG x, y;           // 座標
    COLOR16 Red;         // 0x0000 - 0xFF00
    COLOR16 Green;
    COLOR16 Blue;
    COLOR16 Alpha;       // 0x0000 透明 - 0xFF00 不透明
} TRIVERTEX, *PTRIVERTEX;

顏色分量範圍 0x0000-0xFF00（對應 0-255 左移 8 位），支援 Alpha 透明度混合。

GRADIENT_RECT - 矩形網格（2 頂點）

typedef struct _GRADIENT_RECT {
    ULONG UpperLeft;   // 左上頂點索引
    ULONG LowerRight;  // 右下頂點索引
} GRADIENT_RECT;

• 模式：GRADIENT_FILL_RECT_H（水平）、GRADIENT_FILL_RECT_V（垂直）
• 系統在兩頂點間線性插值填充矩形區域

GRADIENT_TRIANGLE - 三角形網格（3 頂點）

typedef struct _GRADIENT_TRIANGLE {
    ULONG Vertex1, Vertex2, Vertex3;  // 三頂點索引（逆時針序）
} GRADIENT_TRIANGLE;

• 模式：GRADIENT_FILL_TRIANGLE
• 三頂點顏色雙線性插值（Gouraud Shading）
• 頂點可重複使用，構建複雜網格

矩形漸層完整範例

case WM_PAINT: {
    PAINTSTRUCT ps;
    HDC hdc = BeginPaint(hWnd, &ps);

    // 定義 4 個頂點 → 2 個矩形
    TRIVERTEX vertices[4] = {
        {10, 12, 0xE100, 0x00CC, 0xA3C3, 0xFF00},  // 左上：青綠
        {188, 80, 0x00FA, 0x0068, 0x002E, 0xFF00}, // 右下：藍綠
        {280, 190, 0x0004, 0x0017, 0xFF00, 0xFF00},// 左上：深藍
        {500, 320, 0xFAC0, 0xCCCC, 0xCEF0, 0xFF00} // 右下：淡紫
    };

    GRADIENT_RECT rects[2] = {
        {0, 1},  // 矩形 1：頂點 0 → 1
        {2, 3}   // 矩形 2：頂點 2 → 3
    };

    // 水平漸層
    GradientFill(hdc, vertices, 4, rects, 2, GRADIENT_FILL_RECT_H);

    EndPaint(hWnd, &ps);
    return 0;
}

混合矩形與三角形渲染

// 同組頂點複用定義三角形
GRADIENT_TRIANGLE triangles[2] = {
    {2, 0, 3},  // 三角形 1：頂點 2-0-3
    {3, 1, 0}   // 三角形 2：頂點 3-1-0
};

// 垂直矩形漸層
GradientFill(hdc, vertices, 4, rects, 2, GRADIENT_FILL_RECT_V);
// 疊加三角形漸層
GradientFill(hdc, vertices, 4, triangles, 2, GRADIENT_FILL_TRIANGLE);

索引對應邏輯圖解

頂點陣列:  [0] [1] [2] [3]
              ↙  ↘  ↙  ↘
矩形:       (0,1)     (2,3)

三角形:    (2,0,3)  (3,1,0)
             ↖  ↙        ↖  ↙
           共用頂點 0,3 形成連續網格

關鍵技巧與避坑

1. 顏色分量左移 8 位：0xFF → 0xFF00，否則顏色極暗。
2. Alpha 通道：0xFF00 完全不透明，0x0000 完全透明，支援疊加混合。
3. 三角形頂點順序：建議逆時針（Counter-Clockwise）確保正面渲染。
4. 座標系統：裝置座標（像素），原點於客戶區左上角。
5. 重複呼叫疊加：後呼叫的 GradientFill 會覆蓋/混合前一結果（視 Alpha）。
6. 支援版本：Windows 2000 以上，需 #include <wingdi.h>、連結 msimg32.lib。

現代替代方案

• Direct2D：ID2D1LinearGradientBrush/RadialGradientBrush，硬體加速、保留模式。
• GDI+：LinearGradientBrush、PathGradientBrush，物件導向、支援反鋸齒。
• WinUI 3 / Composition API：現代聲明式漸層，GPU 加速。