WPF繪制矢量圖形模糊的問題

WPF默認提供了抗鋸齒功能，通過向外擴展的半透明邊緣來實現模糊化。由於WPF采用了設備無關單位，當設備DPI大於系統DPI時，可能會產生像素自動擴展問題，這就導致線條自動向外擴展一個像素，並且與邊緣相鄰的線條顏色變成了半透明，如下圖所示:

這種特性在繪制細線條的時候會導致一些我們所不期望的結果：顏色變淡，線條模糊，線條變粗。很多時候，我們是無法繪制一個像素的清晰的線條的。對於這個問題，WPF給我們提供了幾種解決方案：

1、設置像素對齊

對於系統內置的一些控件，通過設置SnapsToDevicePixels為true，可以非常方便的實現像素對齊。

這個屬性是有繼承效果的，只要在父控件上設置了，其所有的子控件都是生效的。但它有時會出現改變窗口大小時線條消失的情況

2、設置對齊參考線

方法1只針對系統的內置的一些控件有效，但對於使用DrawingVisual等方式自繪的圖形則沒有效果。此時可以通過設置參考線解決這一問題。

簡單的示例如下：

void render(DrawingContext dc)
{
    var pen = new Pen(Brushes.Black, 1);
    var d = pen.Thickness / 2;

    var guidelines = new GuidelineSet(new []{d}, new[]{d});
    dc.PushGuidelineSet(guidelines);

    dc.DrawLine(pen, new Point(30, 10), new Point(30, 80));
    dc.DrawLine(pen, new Point(50, 20), new Point(50, 80));
}

具體代碼參見MSDN：Apply a GuidelineSet to a Drawing，也可以參看這篇文章WPF DrawingContext seems ignore SnapToDevicePixels

 

3、設置 RenderOptions.EdgeMode="Aliased"

前面的設置參考線方式效果較好，不過需要編寫較多的代碼，並且只能適用於水平或垂直的線條。很多時候，我使用的是設置 RenderOptions.EdgeMode="Aliased"（如果在代碼中則是使用this.SetValue(RenderOptions.EdgeModeProperty, EdgeMode.Aliased)），

4、設置UseLayoutRounding="True"

這個是在WPF4后增加的一個選項，用來控制布局舍入的，用來控制圖片模糊的效果非常好，用於控制控件的模糊效果也不錯的。不過也是對DrawingContext繪制的圖形沒有效果的。

小結：WPF的抗鋸齒效果在給我們帶來的很好的視覺效果的同時，也給我們帶來的不少困擾，本文就總結了幾種常見的解決方案，希望能對大家的工作帶來一點幫助。