WPF 自訂繪圖實戰（四·下）：複雜向量圖形的 Path 標記語法深度解析

前言：從 Expression Design 匯出的 XAML

專業向量設計工具（Expression Design、Illustrator）匯出 XAML 時，會產生大量 `` 元素，其 `Data` 屬性包含精簡的路徑標記字串（Path Markup Syntax）。本文剖析實際匯出內容，理解其結構與優化策略。

實際匯出片段分析

以下為部分匯出 XAML（簡化）：

<Viewbox Width="33.5947" Height="48.518" Canvas.Left="372.866" Canvas.Top="366.017">
  <Canvas Width="33.5947" Height="48.518">
    <Path x:Name="Path_48" Width="24.7215" Height="24.1663" Canvas.Left="0.378533" Canvas.Top="24.3516"
          Stretch="Fill" StrokeThickness="1.34774" StrokeLineJoin="Round" Stroke="#FF000000"
          Data="F1 M 12.7452,25.0255C 19.1965,25.0255 24.4262,30.1336 24.4262,36.4348C 24.4262,42.736 19.1964,47.8441 12.7452,47.8441C 6.29407,47.8441 0.761139,45.4245 1.0643,39.1302C 1.52682,29.528 6.29404,25.0255 12.7452,25.0255 Z">
      <Path.Fill>
        <LinearGradientBrush StartPoint="0.484648,0.0961876" EndPoint="1.33083,0.0961876">
          <LinearGradientBrush.RelativeTransform>
            <TransformGroup>
              <SkewTransform CenterX="0.484648" CenterY="0.0961876" AngleX="0.0564695" AngleY="0"/>
              <RotateTransform CenterX="0.484648" CenterY="0.0961876" Angle="88.7828"/>
            </TransformGroup>
          </LinearGradientBrush.RelativeTransform>
          <GradientStop Color="#FE232531" Offset="0"/>
          <GradientStop Color="#FE7976BC" Offset="1"/>
        </LinearGradientBrush>
      </Path.Fill>
    </Path>
    <!-- 更多 Path 元素... -->
  </Canvas>
</Viewbox>

Path Markup Syntax 關鍵指令

`Data` 字串以指令字母 + 參數構成，常見指令：

大寫 = 絕對座標，小寫 = 相對座標。`F1` 前綴表示填充規則 (`FillRule=NonZero`)，`F0` 為 `EvenOdd`。

巢狀 Viewbox/Canvas 結構

設計工具常輸出巢狀 `` + `` 以保留圖層群組、座標系。`` 自動縮放內容適應寬高，`` 提供絕對定位基準。實際專案中可手動扁平化、合併同樣筆刷的 Path 以提升效能。

漸層筆刷的 RelativeTransform

匯出的 `` 包含 ``、`` 等，以相對座標 (0~1) 定義漸層變換，確保縮放時漸層比例正確。此為 XAML 強大之處：筆刷本身可帶變換。

優化建議

• 移除冗餘 ``/``，直接在根 `` 定位。
• 合併相同幾何、筆刷的 ``，減少視覺樹節點。
• 將共用筆刷提升為 `` 資源，`StaticResource` 參考。
• 簡化數值精度（如保留 2 位小數），縮小 XAML 體積。

結語

理解 Path Markup Syntax 是閱讀、手寫、優化 XAML 向量圖形的核心技能。配合 `Geometry`/`Drawing` 物件模型，開發者可在程式碼與標記間自由轉換，實現設計師與開發者的高效協作流程。