VC++ 自繪對話框實作：漸層背景與垂直文字完整教學

前言

預設對話框背景單調，若想打造客製化介面（如側邊欄漸層、垂直文字），必須覆寫 OnPaint 進行自繪。本文逐步示範如何在 MFC 對話框專案中實作自繪視圖，包含建立漸層位圖、繪製旋轉字型、雙緩衝繪圖防閃爍等關鍵技巧。

專案建立與類別宣告

1. 建立「以對話框為基礎」的 MFC 專案（如 CTestDlg）。
2. 在 CTestDlg.h 加入兩個成員函數宣告：

public:
    void DrawView();                    // 主繪圖邏輯
    HBITMAP CreateGradientBMP(HDC hDC, COLORREF cl1, COLORREF cl2,
                              int nWidth, int nHeight, int nDir, int nNumColors);

核心繪圖函數 DrawView 實作

void CTestDlg::DrawView()
{
    CPaintDC dc(this);                      // 繪圖裝置內容
    CRect rect; GetClientRect(rect);
    rect.right = 27;                        // 僅繪製左側 27 像素寬區域

    COLORREF clrStart = RGB(205,205,205);   // 漸層起始色（灰）
    COLORREF clrEnd   = RGB(100,0,0);       // 漸層結束色（褐）

    // 1. 建立漸層位圖
    HBITMAP hBmp = CreateGradientBMP(dc.m_hDC, clrStart, clrEnd,
                                     rect.Width(), rect.Height(), 0, 256);

    // 2. 雙緩衝繪製位圖至螢幕
    if (hBmp) {
        CDC memDC; memDC.CreateCompatibleDC(&dc);
        HBITMAP hOld = (HBITMAP)::SelectObject(memDC.m_hDC, hBmp);
        dc.BitBlt(rect.left, rect.top, rect.Width(), rect.Height(),
                  &memDC, 0, 0, SRCCOPY);
        ::SelectObject(memDC, hOld);
        ::DeleteObject(hBmp);
    }

    // 3. 繪製垂直文字
    CFont font;
    font.CreateFont(16, 0, 900, 900, FW_BOLD, 0,0,0,
                    DEFAULT_CHARSET, OUT_DEFAULT_PRECIS, CLIP_DEFAULT_PRECIS,
                    DEFAULT_QUALITY, DEFAULT_PITCH, _T("Arial"));
    CFont* pOldFont = dc.SelectObject(&font);
    COLORREF oldColor = dc.SetTextColor(RGB(255,255,255)); // 白字
    dc.SetBkMode(TRANSPARENT);
    dc.TextOut(rect.left+2, rect.bottom-4,
               _T("TEST. HEllo WoRLD! 你好,VCKBASE!"));
    dc.SetTextColor(oldColor);
    dc.SelectObject(pOldFont);
    font.DeleteObject();
}

漸層位圖產生器 CreateGradientBMP

支援四種方向（0:垂直、1:垂直雙色、2:水平、3:水平雙色），核心步驟：

1. 建立 256 色調色盤，依 MulDiv 線性插值計算 R/G/B。
2. 配置 32-bit DIB 記憶體 (malloc)，填入像素色值。
3. 呼叫 CreateDIBitmap 建立 HBITMAP，釋放暫存緩衝區並傳回。

HBITMAP CTestDlg::CreateGradientBMP(HDC hDC, COLORREF cl1, COLORREF cl2,
    int nWidth, int nHeight, int nDir, int nNumColors)
{
    if (nNumColors > 256) nNumColors = 256;
    COLORREF pal[256];
    int r1=GetRValue(cl1), r2=GetRValue(cl2);
    int g1=GetGValue(cl1), g2=GetGValue(cl2);
    int b1=GetBValue(cl1), b2=GetBValue(cl2);

    for (int i=0; i

void CTestDlg::OnPaint()
{
    if (IsIconic()) {
        // 圖示繪製預設處理...
    } else {
        DrawView();           // 呼叫自繪
        CDialog::OnPaint();   // 保留預設繪製（如控制項）
    }
}