WPF 自訂繪圖核心（四·上）：PathGeometry 從零構建複雜向量圖形

PathGeometry 物件模型

WPF 以 `` 表示複雜向量圖形，層級結構：

• PathGeometry：根容器，屬性 `Figures` 為 ``。
• PathFigure：單一連續子圖形，屬性 `StartPoint` (起點)、`IsClosed` (是否閉合)、`Segments` (``)。
• PathSegment (抽象) 衍生類別：
  • `LineSegment`：直線段，屬性 `Point` (終點)。
  • `ArcSegment`：橢圓弧，屬性 `Point`、`Size`、`RotationAngle`、`IsLargeArc`、`SweepDirection`。
  • `BezierSegment`：三次貝塞爾，屬性 `Point1`、`Point2`、`Point3` (兩控制點+終點)。
  • `QuadraticBezierSegment`：二次貝塞爾，屬性 `Point1`、`Point2`。
  • `PolyLineSegment`、`PolyBezierSegment`、`PolyQuadraticBezierSegment`：多點批次版，效能更佳。

XAML 建構範例：繪製三角形

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>
          <PathFigureCollection>
            <PathFigure StartPoint="100,50">
              <PathFigure.Segments>
                <PathSegmentCollection>
                  <LineSegment Point="200,50" />
                  <LineSegment Point="150,100" />
                </PathSegmentCollection>
              </PathFigure.Segments>
            </PathFigure>
          </PathFigureCollection>
        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path>
</Page>

設定 `` 即自動閉合連回起點：

複雜圖形實戰：太空船插圖完整 XAML

多個 `` 組合、配合填色、筆觸、漸層，可繪製極複雜插圖。以下為完整 XAML (可貼入 XamlPad 預覽)：

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Width="800" Height="800">
    <!-- 背景、飛船主體、細節、光效等數百個 Path 元素 -->
    <Path ... Data="F1 M ..." />
    <!-- 完整代碼見原文 -->
  </Canvas>
</Page>

Path Markup Syntax：極簡幾何表示法

上述 XAML 中 `Data="F1 M 10.1172,19.4509L 1.5,21.2192..."` 即為 Path Markup Syntax。指令對應：

• `F1` / `F0`：FillRule (NonZero / EvenOdd)
• `M`：MoveTo，`L`：LineTo，`C`：Cubic Bezier，`Q`：Quadratic Bezier，`A`：Arc，`Z`：CloseFigure
• 大寫絕對座標，小寫相對座標

此語法為 `` 的序列化形式，體積小、解析快，是 XAML 儲存向量圖形的標準。詳細規格請參閱 MSDN "Path Markup Syntax"。

程式碼建構等價寫法

PathGeometry pg = new PathGeometry();
PathFigure pf = new PathFigure { StartPoint = new Point(100, 50) };
pf.Segments.Add(new LineSegment(new Point(200, 50), true));
pf.Segments.Add(new LineSegment(new Point(150, 100), true));
pf.IsClosed = true;
pg.Figures.Add(pf);

結語

PathGeometry 以 `Figure` + `Segment` 分層模型，提供構建任意向量圖形的完整原語。配合 Path Markup Syntax 的緊湊表示，支援從手寫標記、設計工具匯出、程式碼動態生成等多種工作流。掌握其核心類別與指令語法，是 WPF 進階繪圖開發的基石。