工控管道動畫控件：MFC ActiveX 實作流體傳輸視覺化

工控監控軟體常需模擬物料/流體在管道中的傳輸過程。本文分享一個簡單易用的 MFC ActiveX 控件，透過漸層筆刷繪製管道本體，配合定時器驅動「流動」動畫，支援 VB/VC/Delphi 等多種開發環境呼叫。

控件效果展示（VB 環境）

核心繪圖邏輯 OnDraw

void CMultiAxtiveX1Ctrl::OnDraw(CDC* pdc, const CRect& rcBounds, const CRect& rcInvalid) {
    CBrush brBk[64];
    int nWidth = rcBounds.Width();
    int nHeight = rcBounds.Height();
    CRect rct;

    // 合理化顏色參數
    if (m_ColorR > 255 || m_ColorR < 0) m_ColorR = 255;

    // 建立 64 階漸層筆刷（灰藍調）
    for (int i = 0; i < 64; i++) {
        if (i < 32)
            brBk[i].CreateSolidBrush(RGB(m_ColorR - (32 - i % 32), m_ColorR - (32 - i % 32), 100));
        else
            brBk[i].CreateSolidBrush(RGB(m_ColorR - (i % 32), m_ColorR - (i % 32), 100));
    }

    // 垂直漸層填充管道本體
    for (int i = rcBounds.top; i <= nHeight + 2; i++) {
        rct.SetRect(rcBounds.left, i, nWidth, i + 1);
        pdc->FillRect(&rct, &brBk[(i * 63) / nHeight]);
    }

    // 繪製「流體格柵」產生流動視覺效果
    for (int j = 0; j < 10; j++) {
        rct.SetRect(rcBounds.left + m_grid[j] * nWidth / 40, rcBounds.top,
                    rcBounds.left + m_grid[j] * nWidth / 40 + nWidth / 40, nHeight);
        pdc->FillRect(&rct, CBrush::FromHandle((HBRUSH)GetStockObject(WHITE_BRUSH)));
    }

    // 釋放筆刷資源
    for (int i = 0; i < 64; i++) brBk[i].DeleteObject();
}

屬性與方法介面

安裝與使用步驟

1. 編譯產生 multiAxtiveX.ocx
2. 執行 regsvr32 multiAxtiveX.ocx 註冊控件
3. 在 VB/VC/Delphi 等 IDE 的工具箱中加入該 ActiveX 控件
4. 拖放至表單/對話框，設定屬性並呼叫 flow() 即可看到動畫

技術亮點

• 純 GDI 繪圖，無需外部圖片資源，部署極簡單
• 64 階漸層筆刷營造立體管道質感
• 白色格柵位移產生流動視覺錯覺，計算量極小
• 標準 ActiveX 架構，跨語言呼叫無障礙

擴充建議

• 加入流速屬性控制動畫速度
• 支援水平/垂直/彎管等多種管道樣式
• 增加流體顏色、濁度、氣泡等視覺參數
• 提供「流量數值」即時顯示介面

利用 VC++ 這個強大工具，我們可以開發出更豐富、更專業的工控視覺化元件。完整原始碼已附上，歡迎下載研究改進！