WPF 自訂繪圖實戰（四·中）：大量 Path 元素的結構與筆刷技巧

大規模向量圖形的 XAML 結構特徵

專業設計工具匯出的複雜插圖（如角色、場景）常包含數百個 `` 元素，每個擁有獨立幾何、筆刷、變換。本文續接上篇，分析更多實際片段，總結筆刷與幾何組織模式。

RadialGradientBrush 進階用法

多個 `` 使用 `` 並配合 `` 實現立體光影：

<Path.Fill>
  <RadialGradientBrush RadiusX="0.840576" RadiusY="1.52673" Center="0.35972,0.849758" GradientOrigin="0.35972,0.849758">
    <RadialGradientBrush.RelativeTransform>
      <TransformGroup>
        <SkewTransform CenterX="0.35972" CenterY="0.849758" AngleX="18.0147" AngleY="0"/>
        <RotateTransform CenterX="0.35972" CenterY="0.849758" Angle="-66.1328"/>
      </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#FEE4E4E4" Offset="0.035865"/>
    <GradientStop Color="#FEFF5D04" Offset="1"/>
  </RadialGradientBrush>
</Path.Fill>

關鍵點：

• `Center`、`GradientOrigin` 以相對座標定義輻射中心。
• `RadiusX`、`RadiusY` 控制橢圓形狀。
• `RelativeTransform` 以相對座標旋轉/傾斜漸層，配合幾何形狀產生 3D 球體感。

重複結構的模組化策略

觀察片段可見大量相似結構（如雙眼、對稱裝飾）：

• 左眼 `` 右眼 `` 幾何鏡像，筆刷微調。
• 多層疊加 `` 形成陰影、高光、輪廓層次（如 `Path_65` 白色底、`Path_66` 橙紅漸層）。

建議：將重複單元封裝為 `` 或 ``，以資源參考方式複用，減少 XAML 體積並利於維護。

幾何資料的精簡表示

所有 `Data` 屬性均為 Path Markup Syntax 字串（如 `F1 M 10.1172,19.4509L 1.5,21.2192...`），極為緊湊。對比 `` 元素展開寫法，標記語法體積小 80% 以上，解析速度快，是 XAML 儲存向量圖形的標準形式。

效能考量

• 大量細小 `` 會增加視覺樹深度、佈局計算開銷。
• 靜態複雜圖形可預先合併為單一 `GeometryDrawing` 或 `DrawingImage`，以 `ImageBrush` 或 `DrawingBrush` 繪製，大幅降低渲染負擔。
• 啟用 `RenderOptions.EdgeMode="Aliased"` 或 `BitmapScalingMode="LowQuality"` 可在動畫時提升幀率。

結語

掌握大規模 Path 元素的組織模式、RadialGradientBrush 立體技法、幾何標記語法優勢，能讓開發者高效處理設計師交付的複雜 XAML 資產，並在效能與保真度間取得平衡。