WPF 使用 VisualBrush 在 4k 加 200 DPI 設備上某些文本不渲染看不見問題

這是我做一個十萬點實時重繪的圖表控制元件遇到的問題，做過高性能圖表的伙伴大概都知道，此時需要關閉命中測驗的功能，無論是控制元件的還是 Drawing 的，否則計算命中測驗的耗時將會讓主執行緒卡住，為了解決此問題，有多個可以選擇的方法，在此控制元件，我選擇的是采用 VisualBrush 的方法，將 DrawingVisual 繪制到 VisualBrush 里面，再將 VisualBrush 作為貼圖給矩形使用，這樣的優勢在于可以在命中測驗的時候，只處理矩形，矩形命中測驗的耗時可以忽略，但是在一些 4k 加百分之 200 的 DPI 縮放設備上，看不到某些 GlyphRun 的內容，本文記錄此問題和對應的解決方法

前置要求：

• 4k 解析度螢屏
• 百分之兩百 DPI 縮放
• 使用 GlyphRun 直接或間接
• 繪制到 VisualBrush 中

在 WPF 的底層文本繪制都是采用 GlyphRun 繪制，因此可以認定為影響為全部文本，以及對應的文本控制元件

現象：

有某些文本內容不繪制渲染出來，看不見某些文本內容，但是在相同的 DrawingContext 里面的其他繪制內容，如線潭訓圖片等都可以正常繪制出來

以上的現象包括：

• 在某些設備上，暫時未找到具體影響因素
• 某些文本內容不可見，而不是全部文本內容
• 對整個控制元件進行 RenderTransform 之后可以讓某些文本可見
• 對界面進行重繪，可以讓文本可見
• 對界面進行偶數次重繪，文本不可見

開始之前先回答一下為什么會在圖表控制元件里面，將 DrawingContext 的內容放入到 VisualBrush 中，如上文所述，這是因為 DrawingContext 物件是從 DrawingVisual 里面獲取的，而 DrawingVisual 的 RenderOpen 回傳的是一個帶 RenderData 收集器的 DrawingContext 物件，也就是說此物件還遠遠不是最終被執行 DirectX 渲染的物件，僅僅是收集繪制內容，放入到 RenderData 里面，后續還有在執行默認命中測驗的時候，取 RenderData 里面的內容進行計算渲染邊距以及命中測驗，總之，如果將 DrawingVisual 加入到視覺樹里面，那么將會因為存在命中測驗等邏輯導致需要執行很多邏輯而降低性能

為了提升性能，提升性能的其中一個方法是減少 CPU 作業量，也就是減少計算邏輯量，此時將 DrawingVisual 放入到 VisualBrush 中，作為 Brush 給一個矩形做填充，這樣的優勢在于進行命中測驗的時候，默認是無視圖層的，只會對矩形進行命中測驗，剛好矩形命中測驗的耗時是基本可以被忽略的，因此也就能極大提升了性能

需要說明的是，默認是可以無視命中測驗給 DrawingVisual 帶來的性能損耗，因為計算速度還是非常快的，但是在圖表控制元件里面，架不住點的數量很多，盡管命中測驗性能足夠高，然而點的數量足夠多也可以拖住性能

如下是將 DrawingVisual 繪制到 VisualBrush 上，再將 VisualBrush 貼到矩形上的方法，也就是我的圖表控制元件的核心繪制邏輯

        private DrawingVisual CreateVisual()
        {
            var dv = new DrawingVisual();
            _visualBase = dv;
            var drawingContext = dv.RenderOpen();

            // 繪制點
            DrawPoints(drawingContext);

            // 繪制線
            DrawLine(drawingContext);

            // 繪制文本
            DrawGlyphRun(drawingContext);

            drawingContext.Close();

            var ret = new DrawingVisual();

            using (var dw = ret.RenderOpen())
            {
                var visualBrush = new VisualBrush(dv)
                {
                    Stretch = Stretch.None,
                };

                dw.DrawRectangle(visualBrush, null, dv.ContentBounds);
                _visualBrush = visualBrush;
            }

            return ret;

            //return dv;
        }

將繪制點和繪制線的 DrawingVisual 也就是上文的 dv 創建出來 drawingContext 用來做實際的圖表內容繪制收集，而將 dv 作為 VisualBrush 的輸入，接著新建一個叫 ret 的 DrawingVisual 物件，在這里面重新繪制出矩形然后用 VisualBrush 做貼圖

這樣做的優勢在于可以利用到 WPF 無視貼圖的命中測驗的特性，而提升性能

但是帶來的問題就是存在某些 GlyphRun 的文本不繪制，在相同的 drawingContext 繪制的點和線是可見的，只有文本看不到

其中最優解決方法是干掉 VisualBrush 而是換成 DrawingBrush 作為貼圖，更改之后代碼如下

        private DrawingVisual CreateTextVisual()
        {
        	// var dv = new DrawingVisual();
            var dv = new DrawingGroup();
            _visualBase = dv;
            var drawingContext = dv.Open();

            // 繪制點
            DrawPoints(drawingContext);

            // 繪制線
            DrawLine(drawingContext);

            // 繪制文本
            DrawGlyphRun(drawingContext);

            drawingContext.Close();

            var ret = new DrawingVisual();

            using (var dw = ret.RenderOpen())
            {
            	// var visualBrush = new VisualBrush(dv)
                 _drawingBrush = new DrawingBrush(dv);

                dw.DrawRectangle(_drawingBrush, null, dv.Bounds);
            }

            return ret;

            //return dv;
        }

如上面代碼，將 dv 的型別從 DrawingVisual 換成 DrawingGroup 型別，將后續的貼圖從 VisualBrush 換成 DrawingBrush 型別，這樣就能修復某些文本不顯示的問題

為什么 VisualBrush 會讓某些文本不更新臟就不顯示？和 VisualBrush 的機制有關，在 VisualBrush 里面，要求先將內容渲染為 Bitmap 位圖再作為某個元素的貼圖層，執行順序上需要有些復雜，而為什么如此復雜的邏輯會挖坑？表示我追蹤了代碼也沒有發現更本質的問題，而且此問題只有在我的此圖表控制元件才有偶爾復現，在能復現的設備上，每次都能用相同的圖表資料進行復現，在能復現的設備上，如果變更了圖表的內容，也許就又不復現了

如果將我的圖表控制元件放在 demo 上跑，那也不會有啥鍋，我也不知道是不是我的應用層挖的坑，因為我的應用層也充滿了各個逗比加詭異的邏輯，因此我也不好說是不是某個有趣的邏輯的鍋，此問題只有在使用特定的圖表內容（很復雜）再加上放入到我的某個特定的應用里面才能復現，要除錯 WPF 層的話，必須加入到我的應用層才能開始除錯此問題，因此預計我也不會繼續往底層除錯，告訴大家具體的原因

博客園博客只做備份，博客發布就不再更新，如果想看最新博客，請到 https://blog.lindexi.com/

標籤：.NET技术

上一篇：dotnet 寫一個支持層層繼承屬性的物件

下一篇：dotnet 6 使用 CreateSymbolicLink 創建檔案夾符號鏈接