C# 開發所見即所得 (WYSIWYG) 設計器核心架構深度解析

設計器分類

本文聚焦直角座標式設計器。

核心功能需求

• 文件載入/儲存 (支援 XML、二進位、資料庫、雲端)
• 高效繪圖：可視區域裁剪、矩形覆蓋運算、雙緩衝、縮放轉換矩陣
• 互動式編輯：滑鼠拖曳 (移動/縮放/選取)、鍵盤快速鍵、即時視覺回饋
• 所見即所得列印/匯出：螢幕與輸出一致
• 擴充性：新元素型別、新序列化格式、腳本介面 (VBA/JS)
• 防閃爍：增量更新、雙緩衝、Dirty Rect 追蹤

文件物件模型 (DOM) - 核心後台

三層架構

1. DesignElement (抽象基類)：通用介面 — 序列化、繪圖 (RefreshView/RefreshSize)、滑鼠/鍵盤事件 (HandleMouseDown/Move/Up)、樹狀結構維護 (Parent/Items/OwnerDocument)、可編輯介面 (ILabelEditable)。
2. DesignDocument (根容器)：文件進入點，負責整體序列化、樹狀遍歷、腳本介面、Undo/Redo 管理。
3. 具體元素類別：DesignRectangleElement (矩形基底)、DesignLineElement (線段)、DesignElementContainer (容器)、DesignCaptionContainer (標題列容器)、DesignTextElement (文字)、DesignTextElementExt (進階排版)、DesignTableElement (表格/儲存格)、DesignImageElement (圖片, IDisposable) 等。

序列化策略：XML 首選

• 元素↔XML 節點一對一對應，天然適合樹狀結構。
• 標準化、人眼可讀、版本相容性佳 (舊版忽略新屬性、新版預設值處理舊檔)。
• 儲存方式：子元素法 (<Prop>Value</Prop>) 優於屬性法，利於多行文字、擴充性、閱讀性。
• 利用 XmlDocument/XDocument 載入，再映射建立 DOM 樹。

繪圖管線與最佳化

1. Control.OnPaint → 取得 Graphics + ClipRectangle。
2. DesignDocument.RefreshView(g, clipRect) 初始化、遍歷樹狀結構。
3. 矩形覆蓋運算：計算元素可見區域 (扣除上層遮蓋)，傳遞 visibleRects[] 給元素。
4. 元素 RefreshView(g, visibleRects) 僅繪製可見區域內容。
5. 雙緩衝：開發期關閉以發現閃爍問題，發布期開啟 (DoubleBuffered=true 或手動 BufferedGraphics)。
6. 縮放：Graphics.Transform = Matrix，滑鼠座標須反向轉換。

設計檢視控制項 (DesignViewControl)

• 繼承 UserControl，DoubleBuffered=true。
• 事件處理：OnMouseDown/Move/Up → 座標轉換 (螢幕→文件→元素局部) → 委派給 CurrentElement.HandleMouseXxx。
• 拖曳判斷：SystemInformation.DragSize 門檻過濾誤觸。
• 雙擊編輯：檢查 ILabelEditable，動態顯示 TextBox 覆蓋元素位置。
• 捲動自動追蹤當前元素，避免大元素跳躍。

鷹眼 導覽

• 縮圖預覽整個文件，滑鼠點擊/拖曳快速跳轉。
• 同步主視圖捲動位置與縮放比例。

擴充性設計要點

• 元素型別註冊機制：XML 節點名稱 → Type 映射表 (工廠模式)。
• 序列化虛擬方法 LoadXml/ SaveXml 由衍生類實作。
• 繪圖/事件虛擬方法提供預設實作，衍生類選擇性覆寫。
• 腳本介面：DesignDocument 實作 IDispatch 或暴露給 Jint/IronPython。

現代化替代方案

• WPF：Canvas + Adorner + VisualTree 原生支援縮放、命中測試、動畫、向量繪圖。
• Blazor/Web：Canvas API / SVG + Fabric.js、Konva.js、JointJS 成熟庫。
• WinUI 3 / MAUI：現代原生 UI 堆疊，跨平台設計器首選。

結語

WYSIWYG 設計器是圖形學、資料結構、事件驅動、序列化、擴充架構綜合體現。掌握 DOM 設計、繪圖最佳化、座標轉換、拖曳邏輯四大核心，即可建構穩健可擴充的設計器基礎設施。