WPF 自訂繪圖進階：幾何圖形、影像與文字渲染詳解

幾何圖形繪製：Shape 與 Geometry 的差異

在 WPF 開發中，繪製圓形或橢圓形有兩種常見方式：使用 Ellipse 元素或 EllipseGeometry 類別。雖然兩者都能在螢幕上呈現相同視覺效果，但其底層架構截然不同。

Ellipse 繼承自 Shape 類別，支援 WPF 版面配置系統、輸入事件與焦點管理，適合需要互動的 UI 元素。相對地，EllipseGeometry 繼承自 Geometry，屬於輕量級繪圖基元，不參與版面配置，無法接收輸入焦點，但效能顯著優於 Shape，適合大量幾何圖形渲染或效能敏感場景。

<GeometryDrawing Brush="Blue">
  <GeometryDrawing.Geometry>
    <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
  </GeometryDrawing.Geometry>
  <GeometryDrawing.Pen>
    <Pen Thickness="1" Brush="Black" />
  </GeometryDrawing.Pen>
</GeometryDrawing>

在程式碼後置中，透過覆寫 OnRender 方法並使用 DrawingContext，可進一步發揮 Geometry 的效能優勢：

protected override void OnRender(DrawingContext dc)
{
    base.OnRender(dc);
    Geometry ellipse = new EllipseGeometry(new Point(100, 70), 100, 50);
    GeometryDrawing drawing = new GeometryDrawing(Brushes.LightBlue, new Pen(Brushes.Green, 1), ellipse);
    dc.DrawDrawing(drawing);
}

其他基本幾何圖形如 RectangleGeometry、LineGeometry 使用方式類似，皆可透過 GeometryDrawing 封裝後由 DrawingContext 繪製。

影像繪製：ImageDrawing 的靈活運用

雖然 Image 控制項提供最簡單的影像顯示方式，但自訂繪製場景下，ImageDrawing 類別能更精確控制影像繪製區域與轉換。以下範例示範從網路載入影像並在指定矩形區域繪製：

protected override void OnRender(DrawingContext dc)
{
    base.OnRender(dc);
    BitmapImage bmp = new BitmapImage(new Uri("https://images.cnblogs.com/logo.gif", UriKind.Absolute));
    ImageDrawing drawing = new ImageDrawing(bmp, new Rect(10, 10, 326, 43));
    dc.DrawDrawing(drawing);
}

文字渲染：GlyphRun 與 Glyphs 的深度控制

WPF 提供極度精細的文字繪製能力，核心在於 GlyphRun 與 GlyphRunDrawing 類別。Glyphs 元素可直接在 XAML 中聲明，控制字型、大小、樣式模擬、字符索引與定位等細節：

<Glyphs
  FontUri="C:\WINDOWS\Fonts\ARIAL.TTF"
  FontRenderingEmSize="36"
  StyleSimulations="ItalicSimulation"
  UnicodeString="Hello World!"
  Fill="SteelBlue"
  OriginX="50"
  OriginY="75" />

透過 Indices 屬性可精確控制字符寬度與連字，實現專業排版效果。詳細屬性請參考 SDK 中 GlyphRun 類別文件。

下一篇將深入探討合併繪製、路徑幾何與繪圖轉畫刷等進階主題。