Win32 組合語言繪圖實戰：用 GDI 繪製太極八卦圖

專案背景

在學習 Win32 組合語言圖形程式設計時，嘗試以 GDI API 復刻 C# 版太極八卦圖繪製邏輯。本文完整展示從算法分析到 MASM32 實作的全過程。

算法分析：八卦圖幾何構成

半徑 R 為基準參數，圖形包含 6 個基本圖元：

1. 外圓：半徑 R
2. 左半圓 (白)：中心 (0,0)，起始角 -90°，掃掠 -180°
3. 右半圓 (黑)：中心 (0,0)，起始角 90°，掃掠 -180°
4. 上小圓 (白)：中心 (R/2, R/4)，半徑 R/4
5. 下小圓 (黑)：中心 (R/2, 3R/4)，半徑 R/4
6. 左小圓 (黑)：中心 (9R/20, R/5)，半徑 R/20
7. 右小圓 (白)：中心 (9R/20, 7R/10)，半徑 R/20

GDI API 對應關係

核心繪圖程序：_PaintTaiJi

_PaintTaiJi proc
  LOCAL hBrush:HBRUSH   ; 黑畫刷
  LOCAL wBrush:HBRUSH   ; 白畫刷
  LOCAL hPen:HPEN       ; 白畫筆

  ; 1. 繪製外圓邊框
  invoke Ellipse, hDc, 0, 0, 200, 200

  ; 2. 取得系統預設畫刷
  invoke GetStockObject, BLACK_BRUSH
  mov hBrush, eax
  invoke GetStockObject, WHITE_BRUSH    ; 注意：原碼用 DC_BRUSH 非標準，此處修正
  mov wBrush, eax

  ; 3. 左半扇形 (黑)
  invoke SelectObject, hDc, hBrush
  invoke Pie, hDc, 0, 0, 200, 200, 100, 0, 100, 200

  ; 4. 右下小圓 (白) - 修飾右半圓邊界
  invoke Ellipse, hDc, 50, 100, 150, 200

  ; 5. 切換白畫刷
  invoke SelectObject, hDc, wBrush

  ; 6. 右上小扇形 (白)
  invoke Pie, hDc, 50, 0, 150, 100, 100, 0, 100, 100

  ; 7. 上小白圓 (陰中之陽)
  invoke Ellipse, hDc, 95, 145, 105, 155

  ; 8. 擦除上小圓殘留邊框 (白線覆蓋)
  invoke MoveToEx, hDc, 100, 1, NULL
  xor eax, eax
  mov ah, 255
  mov al, 255
  shl eax, 8
  mov al, 255              ; eax = 0x00FFFFFF (白色)
  invoke CreatePen, PS_SOLID, 2, eax
  mov hPen, eax
  invoke SelectObject, hDc, hPen
  invoke LineTo, hDc, 99, 99

  ; 9. 下小黑圓 (陽中之陰)
  invoke SelectObject, hDc, hBrush
  invoke Ellipse, hDc, 95, 45, 105, 55

  ret
_PaintTaiJi endp

完整 MASM32 專案程式碼

.386
.model flat, stdcall
option casemap:none

include windows.inc
include user32.inc
includelib user32.lib
include kernel32.inc
includelib kernel32.lib
include gdi32.inc
includelib gdi32.lib

.data?
  hInstance dd ?
  hWinMain  dd ?
  stPs      PAINTSTRUCT <>
  stRect    RECT <>
  hDc       dd ?

.const
  szClassName db 'MyTaiJi', 0
  szCaptionMain db '組合語言繪製太極八卦圖', 0

.code

;--- 視窗程序 ---
_ProcWinMain proc uses ebx edi esi, hWnd:HWND, uMsg:UINT, wParam:WPARAM, lParam:LPARAM
  mov eax, uMsg
  .if eax == WM_PAINT
    invoke BeginPaint, hWnd, addr stPs
    mov hDc, eax
    invoke GetClientRect, hWnd, addr stRect
    call _PaintTaiJi
    invoke EndPaint, hWnd, addr stPs
  .elseif eax == WM_CLOSE
    invoke DestroyWindow, hWinMain
    invoke PostQuitMessage, NULL
  .else
    invoke DefWindowProc, hWnd, uMsg, wParam, lParam
    ret
  .endif
  xor eax, eax
  ret
_ProcWinMain endp

;--- 建立視窗與訊息迴圈 ---
_WinMain proc
  local @stWndClass:WNDCLASSEX
  local @stMsg:MSG

  invoke GetModuleHandle, NULL
  mov hInstance, eax

  invoke RtlZeroMemory, addr @stWndClass, sizeof @stWndClass
  invoke LoadCursor, NULL, IDC_ARROW
  mov @stWndClass.hCursor, eax
  push hInstance
  pop @stWndClass.hInstance
  mov @stWndClass.cbSize, sizeof WNDCLASSEX
  mov @stWndClass.style, CS_HREDRAW or CS_VREDRAW
  mov @stWndClass.lpfnWndProc, offset _ProcWinMain
  mov @stWndClass.hbrBackground, COLOR_WINDOW + 1
  mov @stWndClass.lpszClassName, offset szClassName
  invoke RegisterClassEx, addr @stWndClass

  invoke CreateWindowEx, WS_EX_CLIENTEDGE, \
    offset szClassName, offset szCaptionMain, \
    WS_OVERLAPPEDWINDOW, \
    100, 100, 600, 400, \
    NULL, NULL, hInstance, NULL
  mov hWinMain, eax

  invoke ShowWindow, hWinMain, SW_SHOWNORMAL
  invoke UpdateWindow, hWinMain

  .while TRUE
    invoke GetMessage, addr @stMsg, NULL, 0, 0
    .break .if eax == 0
    invoke TranslateMessage, addr @stMsg
    invoke DispatchMessage, addr @stMsg
  .endw
  ret
_WinMain endp

;--- 程式入口 ---
start:
  call _WinMain
  invoke ExitProcess, NULL
end start

關鍵技術細節

1. 座標系統：GDI 使用邏輯座標，原點在客戶區左上角，X 向右、Y 向下
2. Pie 參數：`Pie(hdc, x1, y1, x2, y2, x3, y3, x4, y4)` 以矩形 `(x1,y1)-(x2,y2)` 為邊界，`(x3,y3)` 為起始弧端點，`(x4,y4)` 為結束弧端點
3. GDI 物件管理：`SelectObject` 返回舊物件，繪圖結束應恢復 (本範例為簡化省略)
4. 色彩格式：`CreatePen` 參數為 `COLORREF` (0x00BBGGRR)，白色 = 0x00FFFFFF
5. 編譯環境：MASM32 v8+ / RadASM / Windows XP SP2 以上

執行結果

延伸練習

• 加入 `WM_SIZE` 處理，支援視窗縮放時圖形自適應
• 使用 `SetWorldTransform` 實現旋轉動畫
• 嘗試用 `Path` API (BeginPath/EndPath/StrokeAndFillPath) 重構繪圖邏輯
• 移植至 x64 組合語言 (調整呼叫慣例、暫存器使用)

1. 上一篇文章： 直流開關電源保護電路設計全解析：過流、過壓、軟啟動與過熱四重防護
2. 下一篇文章： MASM32 實作視窗淡入淡出效果 (AnimateWindow API)

組合語言

計算機系統原理：算術邏輯指令 leal/addl/sall/andl/imull 實戰解析

指令分類表 leal 神奇用法：位址計算而非存取 mo

深入解析組合語言中的堆疊操作與地址計算

這篇文章旨在釐清組合語言中堆疊操作的地址計算細節，透過一個具

計算機體系結構：進制轉換完整指南 (R進制↔十進制、二進制↔十六進制/八進制)

常用進制 十進制 (生活)、七進制 (星期)、十二/二十四進

計算機系統原理（三）存儲層次結構與操作系統核心抽象

高速緩存的重要性 CPU 與主存速度差距大，高速緩存 (SR