WPF中圖像模糊的處理方法

參考:

https://www.cnblogs.com/TianFang/archive/2009/07/02/1515553.html

https://www.cnblogs.com/xiaokang088/p/3200431.html

方式一

在wpf中使用Image時,時常會出現圖像模糊的情況,有兩種方法可以解決這一問題:

  1. 設置Image的SnapsToDevicePixels屬性爲true。
    <Image Source="images/OrderedList.png" Width="20" Height="20" SnapsToDevicePixels="True" />

    網上所能查到的方法大多是這種方法,然而有的時候,這種方法也不起作用,這時候我們可以試試下面這種方法。

  2. 設置附加屬性RenderOptions.BitmapScalingMode="NearestNeighbor"
    <Image Source="images/OrderedList.png" Width="20" Height="20" RenderOptions.BitmapScalingMode="NearestNeighbor" />
    這個附加屬性也可以放在window中,這樣就對整個窗體的所有image對象都起作用了。
    <Window RenderOptions.BitmapScalingMode="NearestNeighbor" />

方式二

設計稿轉爲xaml後,設計師開始review UI了,發現圖片都模糊了。

這一張很神奇,三個圖片都是同一張,中間的那個最清楚,上面的這個左右兩邊清楚,下面的那個四個邊都不清楚。

這一張,右邊是原圖,左邊是模糊的圖,同比放大的。

於是開始查原因:

1. 檢查圖片,png, DPI=72,Stretch="None",原圖尺寸和xaml裏面寫的尺寸一致。
如果替換爲大尺寸的原圖,使用時,size寫的小一點,同比例縮小,沒問題。

2. 第一反應是像素對齊,SnapsToDevicePixels="True", 搞上去,沒用。

3. 把圖片拷貝到空白的項目裏面,發現有的圖片模糊,有的不模糊。佈局複雜一點,模糊的概率大。

4. 改變項目中的xaml 佈局,神奇的出現了,左右兩個邊清晰了,上下還是模糊的,換個地方,上下左右都模糊。

左邊是原圖,右邊是WPF的圖。

神奇啊,估計是佈局的問題。

Grid裏面放了這些圖片,如果像素裏面有小數點,可能會出現這種情況。但是沒想到那個可愛的屬性啊。

5.開始在Image上下功夫,發現了這個屬性, RenderOptions.BitmapScalingMode,裏面幾個枚舉值,一個一個試。

Unspecified使用默認位圖縮放模式,即 Linear。

LowQuality使用雙線性位圖縮放,雖然速度比 HighQuality 快,但輸出質量較低。 LowQuality 模式與 Linear 模式相同。

HighQuality使用高質量位圖縮放,雖然速度比 LowQuality 模式慢,但輸出質量更高。 HighQuality 模式與 Fant 模式相同。

Linear使用線性位圖縮放,雖然速度比 HighQuality 模式快,但輸出質量較低。

Fant使用超高質量 Fant 位圖縮放,雖然速度比所有其他位圖縮放模式都慢,但輸出質量更高。

NearestNeighbor使用最近鄰域位圖縮放,當使用軟件光柵器時,該縮放提供優於 LowQuality 模式的性能。 該模式常用於放大位圖。

MSDN:http://msdn.microsoft.com/zh-cn/library/system.windows.media.bitmapscalingmode(v=vs.100).aspx

當我試到最後一個時,奇蹟發生了,圖片居然不模糊了!上面那些問題都不存在了。

 6. 小小的興奮之後,發現圓圓的圖片出問題了,鋸齒明顯:

這麼簡單的圖片居然鋸齒了.....

7.於是開始了各種猜想,別的同事也在一起看。

有的提議用Rectangle+ImageBrush,我覺得替換工作量有點大。

有同事說 用UseLayoutRounding="True", 這個試了之後,問題馬上解決了。
MSDN查了,發現解釋和我們碰到的情況一樣:


獲取或設置一個值,該值確定對象及其可視化子樹的呈現是否應使用將呈現與整像素對齊的舍入行爲。

msdn:http://msdn.microsoft.com/zh-cn/library/system.windows.uielement.uselayoutrounding(v=VS.95).aspx

目的就是爲了把不足一個像素的,設爲一個像素。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章