C++Builder 實現表單漸變背景：RGB 插值繪製垂直漸層效果

漸變背景能顯著提升應用程式視覺質感。本文展示在 C++Builder 中利用 OnPaint 事件、RGB 宏與線性插值，繪製垂直方向雙色漸變背景的完整實作。

核心原理：逐行繪製 + RGB 線性插值

• 將表單寬度劃分為 Width 條垂直線 (每線 1 像素寬)
• 起始色 StartColor、結束色 EndColor 分解為 R/G/B 三通道
• 每通道增量 = (End - Start) / Width
• 第 i 條線顏色 = Start + i * Increment
• 使用 Canvas->Pen 繪製從頂到期的垂直線

完整實作步驟

1. 表單變數宣告 (Unit1.h)

class TForm1 : public TForm {
__published:
    TColorDialog *ColorDialog1;
private:
    TColor StartColor, EndColor;  // 起始/結束顏色
public:
    __fastcall TForm1(TComponent* Owner);
};

2. OnCreate：使用者選擇雙色

void __fastcall TForm1::FormCreate(TObject *Sender) {
    if (ColorDialog1->Execute()) StartColor = ColorDialog1->Color;
    if (ColorDialog1->Execute()) EndColor = ColorDialog1->Color;
}

3. OnPaint：漸變繪製核心邏輯

void __fastcall TForm1::FormPaint(TObject *Sender) {
    float pwidth = (float)Width;
    int rs = GetRValue(StartColor), gs = GetGValue(StartColor), bs = GetBValue(StartColor);
    int re = GetRValue(EndColor),   ge = GetGValue(EndColor),   be = GetBValue(EndColor);
    
    float rInc = (re - rs) / pwidth;
    float gInc = (ge - gs) / pwidth;
    float bInc = (be - bs) / pwidth;
    
    for (int i = 0; i < Width; i++) {
        Canvas->Pen->Color = (TColor)RGB(
            rs + (int)(rInc * i),
            gs + (int)(gInc * i),
            bs + (int)(bInc * i)
        );
        Canvas->MoveTo(i, 0);
        Canvas->LineTo(i, Height);
    }
}

關鍵 API 說明

擴展變體：多種漸變模式

效能優化建議

• 離屏緩衝：TBitmap 離屏繪製後 Canvas->Draw(0,0,bmp)，避免閃爍
• 快取漸變筆刷：GradientFill (WinAPI) 或 TGPGraphics::FillRectangle (GDI+) 硬體加速
• 避免重複計算：OnResize 時預計算顏色表 TColor GradientColors[Width]，OnPaint 直接查表繪製

此技術雖屬基礎，但掌握「幾何分解 + 色彩插值 + 繪圖 API」三要素組合，即可衍生出豐富多樣的視覺效果，是 UI 客製化開發的入門必修課。