前幾天發布了抄抄《CSS 故障藝術》的影片這篇文章，在這篇文章里介紹了如何使用Win2D繪制文字然后配合BlendEffect制作故障藝術的影片，本來打算就這樣收手不玩這個影片了，但后來又發現性能不符合理想，明明只是做做Resize影片和用BlendEffect混合，為什么性能會這么差呢？
1. 分析原因
其實不用分析都知道哪里出問題了，畢竟這個懶是自己偷的，不過這里順便介紹介紹Visual Studio的性能分析，Visual Studio不停更新它的性能探測器，最近幾年我還挺喜歡的的“應用程式時間線”功能，對桌面應用來說這個功能很好用，可以直觀地看到幀率、CPU使用、布局消耗、呈現消耗等資訊，
要開始性能分析，首先在頂部選單選擇“除錯”->“性能探測器”：
在打開的性能探測器配置頁面，選中“CPU使用率”和“應用程式時間線”兩個工具后點擊“開始”按鈕：
之后Visual Studio就會啟動性能會話并運行程式，切換到打開的應用程式里，一頓操作后關閉程式，稍等一下就可以看到分析報告，
為了凸顯性能問題，我復制粘貼了好幾個個故障藝術的影片，可以看到后半段的FPS下降了，且“應用程式代碼”占了很大的比例，切換到"CPU使用率"選項卡，能看到具體的CPU消耗都在DrawSurfaceCore這個函式附近
雙擊DrawSurfaceCore這行進去具體代碼，這里顏色越紅代表CPU占用率越高，并且會在原始碼左側顯示具體的CPU占用率，很明顯這里的代碼很糟糕，那么罪魁禍首就是這堆代碼了，
2. 使用AlphaMaskEffect優化性能
上面的這段代碼是使用Win2D繪制文字和使用GaussianBlurEffect制作陰影，本來這代碼性能應該沒問題（當然，在這個影片里有優化空間，例如因為我在這里總是使用BlurAmount = 0的陰影所以根本不需要GaussianBlurEffect也不需要DrawImage），但是我使用了Storyboard控制文字的高度，然后每次高度改變都重新呼叫這個函式繪制文字，從結果上來說我的代碼在不停畫圖，所以小小的影片造成了巨大的性能消耗，
現在我要做什么才可以改善這種狀況？當然上面這段代碼有很多優化的空間，但最根本要做的是應該少呼叫這段代碼，少重新繪圖，一個很復雜的情況是，我需要使用兩個這段代碼繪制出來的CompositionSurfaceBrush作為BlendEffect的輸入，而CompositionSurfaceBrush本質上是一張位圖，而作為Brush又沒法修改它的尺寸，CompositionSurfaceBrush關聯了一個CompositionDrawingSurface，后者雖然有Resize函式，但使用這個函式會令圖片在影片程序中移位，明明單獨使用Resize效果不錯，但用在影片里就總是錯，我也沒心思去糾結它的原因，
其實要改變Brush的高度，一種很實在的方法是使用遮罩，CompositionApi提供了CompositionMaskBrush，使用它可以實作OpacityMask的效果，復習一下它的原始碼：
paint-with-a-compositionbrush-with-opacity-mask-applied
Compositor _compositor;
SpriteVisual _maskVisual;
CompositionMaskBrush _maskBrush;
_compositor = Window.Current.Compositor;
_maskBrush = _compositor.CreateMaskBrush();
CompositionLinearGradientBrush _sourceGradient = _compositor.CreateLinearGradientBrush();
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(0,Colors.Red));
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(1,Colors.Yellow));
_maskBrush.Source = _sourceGradient;
LoadedImageSurface loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/circle.png"), new Size(156.0, 156.0));
_maskBrush.Mask = _compositor.CreateSurfaceBrush(loadedSurface);
_maskVisual = _compositor.CreateSpriteVisual();
_maskVisual.Brush = _maskBrush;
_maskVisual.Size = new Vector2(156, 156);
使用CompositionMaskBrush之前首先要有一張作為Mask的圖片，用Paint.Net兩三下就做好了，比奧特曼打到怪獸還快，
接下來只要用顯示文字的CompositionSurfaceBrush作為CompositionMaskBrush的Source，用上面這張圖片制作的CompositionSurfaceBrush作為Mask，再對Mask做Scale的影片，高度改變的影片就…………
就報錯了，
好吧，我想起來了檔案里就說明了CompositionMaskBrush不能玩BlendEffect，
不過幸運的是Win2D本來就提供了AlphaMaskEffect這個類，它的作用幾乎和CompositionMaskBrush一樣，我之前都沒想到會有使用它的一天，使用它的代碼大同小異，兩三下就寫完了：
private (CompositionBrush, CompositionSurfaceBrush) CreateMaskedBrush(CompositionBrush source)
{
var compositor = Window.Current.Compositor;
var effect = new AlphaMaskEffect()
{
Source = new CompositionEffectSourceParameter("Source"),
AlphaMask = new CompositionEffectSourceParameter("Mask"),
};
var opacityMaskSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/Images/mask.Png"));
var opacityBrush = Compositor.CreateSurfaceBrush(opacityMaskSurface);
opacityBrush.Stretch = CompositionStretch.UniformToFill;
var effectFactory = compositor.CreateEffectFactory(effect);
var compositionBrush = effectFactory.CreateBrush();
compositionBrush.SetSourceParameter("Source", source);
compositionBrush.SetSourceParameter("Mask", opacityBrush);
return (compositionBrush, opacityBrush);
}
3. 結果
左邊是舊的代碼（每次改變高度重新繪圖），右邊是新的代碼（對作為Mask的CompositionSurfaceBrush進行Scale影片），可以看到……嗯，好像新影片是劉暢了些，
看起來再玩大些都還撐得住，GPU占用率還算滿意，CPU占用率也不高，其實還有不少優化空間，但我還是完全想不到這個影片實際應用場景（恕我想象力貧乏），所以就到吃為止吧，
4. 參考
CompositionMaskBrush Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs
AlphaMaskEffect Class
合成畫筆 - UWP applications Microsoft Docs
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/98.html
標籤：UWP