11.1.0-beta1 Avalonia 是 dotnet 的跨平臺 UI 框架,提供靈活的樣式系統,支持 Windows、macOS、Linux、iOS、Android 和 WebAssembly 等多種平臺。 Avalonia 已經成熟並已做好生產準備,已被 Schneider Electri ...
有網友問WPF中一些文字模糊是什麼問題。之前我也沒有認真思考過這個問題,只是大概知道和WPF的像素對齊(pixel snapping)、抗鋸齒(anti-aliasing)有關,通過設置附加屬性TextOptions.TextFormattingMode
或者TextOptions.TextRenderingMode
來解決。這次我也查了下資料,瞭解了這幾個附加屬性的取值範圍以及用法。
像素對齊和抗鋸齒
我們經常聽到WPF具有解析度無關性這個說法,因為WPF使用的是與設備無關的繪圖系統,為字體和形狀等內容指定大小或者尺寸的數值並不是真實的像素,在WPF中稱之為設備無關單位。渲染過程中,WPF會自動把設備無關單位轉換為物理像素,由於設備的差異以及DPI設置不同,轉換之後的像素很少是整數,然而無法使用零點幾個像素點去繪製,WPF會使用抗鋸齒特性進行補償。
例如繪製一條62.4992個像素長的紅線時,WPF會正常填充前62個像素,然後使用直線顏色(紅色)和背景色之間的顏色為第63個像素著色,但這個補償也會帶來新的問題,在繪製直線、矩形或者具有直角的多邊形時,抗鋸齒特性導致形狀邊緣出現一片模糊的區域。在實際應用中的體現就是前邊說的文字模糊,奇數單位寬度的直線兩側有很細的淡色邊緣,如果直線寬度只有1個設備無關單位,肉眼看到的線條顏色會比實際指定的顏色要淺一點。
TextOptions
的使用
TextOptions
定義一組影響文本在元素中的顯示方式的附加屬性。總共包含三個附加屬性:TextFormattingMode
、TextHintingMode
、TextRenderingMode
。這三個附加屬性類型都是與屬性同名的枚舉類型。
TextFormattingMode
附加屬性
TextFormattingMode
附加屬性用於切換WPF在格式化文本時使用的文本度量。取值範圍如下:
枚舉名 | 值 | 說明 |
---|---|---|
Ideal | 0 | 指示 TextFormatter 使用理想的字體規格佈局文本。 |
Display | 1 | 指示 TextFormatter 使用 GDI 相容字體規格佈局文本。 |
官方文檔上的這個描述看起來似乎很直觀,但並不容易理解它倆的區別以及開發過程中選取哪一個值。
- Ideal:自推出WPF以來一直用於格式化文本的度量。繪製的字體形狀與字體文件中的輪廓保持高保真。創建字形點陣圖或者字形與字形之間的相對定位時,不會考慮最終位置。
- Display:WPF4.0中引入的新的格式化文本的度量模式。它使用GDI相容的文本度量。該模式下每個字形的寬度都是整數個像素,字形的大小和換行與基於GDI的框架相似(比如WinForm)。這也就意味著字形的大小和換行不完全準確。
兩種模式都有各自的優勢和缺點,Ideal模式可以提供最佳的字形和間距,減少用戶閱讀疲勞,但是在較小的字體情況下,文字渲染會模糊。Display模式則是犧牲字體形狀和間距為代價,提供像素對齊的清晰的文字。
大多數情況下,兩種模式渲染的文字效果差異很小,Display模式主要是解決較小字體情況下文字模糊的問題。Ideal模式在大於15pt的字體情況下,和Display模式渲染的文字一樣清晰,且具有更好的字形和間距。此外以下三種情況也應選擇Ideal模式。
- 變換文本:Display模式只有在字形繪製在完整的像素上時才有清晰的效果,對文本進行變換時,Display模式的像素對齊存在偏差,因為該模式的優化是在所有變換之前應用的,應用變換後將不再對齊到像素邊界,從而導致文字模糊。而Ideal模式在任何地方繪製文字都具有同樣的渲染效果。
- 縮放文本:縮放其實也是變換的一種形式,但相比其他的2D變換,Display模式在縮放文本時渲染的效果更差,主要是因為該模式下的文本度量不會隨著縮放倍數線性變化,為了保持縮放的準確性,Display模式是對原始尺寸文字的點陣圖進行縮放,這導致在任何明顯尺度變化時產生模糊和偽影。
- 字形高保真:對字形有非常高的要求時,Ideal模式具有更好的效果,這也是Ideal模式的主要優勢之一。
TextRenderingMode
附加屬性
TextRenderingMode
附加屬性用於控制渲染文字時使用的抗鋸齒演算法。取值範圍如下:
枚舉名 | 值 | 說明 |
---|---|---|
Auto | 0 | 根據用於設置文本格式的佈局模式,使用最合適的呈現演算法呈現文本。除非操作系統已經被設置為在本機禁用ClearType,該模式將使用ClearType。 |
Aliased | 1 | 使用雙層抗鋸齒功能呈現文本。(有的地方說不使用抗鋸齒演算法) |
Grayscale | 2 | 使用灰度抗鋸齒功能呈現文本。 |
ClearType | 3 | 使用最合適的ClearType呈現演算法呈現文本。 |
通常情況,不需要對該屬性進行設置,除非操作系統已經設置在本機禁用ClearType,預設是會使用ClearType呈現演算法呈現文本。在液晶顯示器環境,ClearType技術增強了文本的清晰度和可讀性。
ClearType使用亞像素呈現技術,通過將字元對齊到像素的小數部分,以更高的保真度顯示文本的真實形狀。超高的解析度增加了文本顯示中細節的清晰度,使其更便於長時間閱讀。WPF中ClearType可以朝Y軸方向抗鋸齒,使文本字元中平緩曲線的頂端和底端變得平滑。
TextHintingMode
附加屬性
TextHintingMode
附加屬性用於設置靜態文本或動態文本的呈現行為。取值範圍如下:
枚舉名 | 值 | 說明 |
---|---|---|
Auto | 0 | 自動確定是否使用適用於動畫文本或靜態文本的質量設置來繪製文本。 |
Fixed | 1 | 以最高靜態質量呈現文本。 |
Animated | 2 | 以最高動畫質量呈現文本。 |
Fixed模式使用的演算法針對視覺上精確的字體平滑效果進行優化,但是將動畫應用於字體元素的屬性時,可能導致性能問題以及抖動,尤其是對於 轉換和投影。Animated模式通過使用一個更高效、但視覺精確下降的平滑演算法來針對動畫進行優化。
參考
https://devblogs.microsoft.com/visualstudio/wpf-text-clarity-improvements/
https://learn.microsoft.com/en-us/archive/blogs/text/additional-wpf-text-clarity-improvements
https://learn.microsoft.com/en-us/archive/blogs/text/wpf-4-0-text-stack-improvements