WPF 材質製作：位圖與向量圖的效能與品質抉擇

目標效果

建立可平鋪的斜紋背景材質：

方案一：位圖 (PNG) 平鋪

繪製最小圖元 (6x6 像素) 並重複：

<DrawingBrush x:Key="PicTwillBrush" Stretch="Fill" TileMode="Tile"
    Viewport="0,0,6,6" ViewportUnits="Absolute">
  <DrawingBrush.Drawing>
    <ImageDrawing ImageSource="Textures/Twill.png" Rect="0,0,6,6"/>
  </DrawingBrush.Drawing>
</DrawingBrush>

放大渲染缺陷

使用 Viewbox 放大時出現明顯方塊邊界：

原因：WPF 獨立渲染每個 Tile，雙線性過濾導致邊界模糊。此為已知渲染行為 (可視為 Bug)。

緩解方案：調整圖元內容

將單像素線條改為雙像素寬度，減少邊界對比：

視覺改善約 50%：

經驗法則：材質設計優先使用邊緣銜接，避免角落銜接。

方案二：向量圖 (StreamGeometry) 平鋪

初版：單一路徑定義

問題：線條端點非垂直，平鋪後不連續。

改版：邊緣銜接拆分為兩條線

兩種寫法自行評估優劣：

<StreamGeometry x:Key="SimpleTwill">M3,0 L4,0 0,4 0,3 Z M3,6 L4,6 6,4 6,3 Z</StreamGeometry>
<StreamGeometry x:Key="BestTwill">M2.5,0 L3.5,0 0,3.5 0,2.5Z M2.5,6 L3.5,6 6,3.5 6,2.5 Z</StreamGeometry>

渲染結果：像素未對齊導致模糊

放大檢視：

向量圖最終仍需光柵化，座標若未落在像素中心會產生反鋸齒模糊。SnapsToDevicePixels 無法解決此類平鋪渲染問題。

向量圖效能陷阱

• 未對齊像素 → 每幀重新計算所有像素顏色 → 拖曳視窗明顯閃爍 (低配機器明顯)
• 對齊像素 → 性能等同位圖，但失去無限縮放優勢

高性能向量方案：強制像素對齊

手工編寫座標落在整數像素格：

<StreamGeometry x:Key="PixelTwill">
M0,2 L1,2 1,3 0,3 Z
M1,1 L2,1 2,2 1,2 Z
M2,0 L3,0 3,1 2,1 Z
M3,5 L4,5 4,6 3,6 Z
M4,4 L5,4 5,5 4,5 Z
M5,3 L6,3 6,4 5,4 Z
</StreamGeometry>

• 優點：無閃爍、銳利、性能佳
• 缺點：代碼冗長、放大仍有鋸齒、大圖元維護成本高

總結建議

下一篇將介紹常見導致 WPF 圖形模糊的原因與解決方案。