【UWP】初試 SkiaSharp 中的 Runtime Effect-有解無憂

SkiaSharp 是跨平臺圖形庫 skia 的 .net 封裝，在 skia 的 m81 版本中，SkRuntimeEffect 變成了一個公開的 API，而 SkRuntimeEffect 有什么用呢，根據說明，可以使用 Skia 專門的著色器語言來撰寫著色器，而著色器這個相對來說還是挺好理解的，就是給一個面添加顏色，

目前最新版本的 SkiaSharp 還是基于 m80 版本進行的封裝，我們需要用到預覽版的 SkiaSharp 才行，打開 VS，更改 nuget 包源：

Snipaste_2020-09-22_10-21-08

接下來創建 UWP 專案，添加 SkiaSharp 和 SkiaSharp.Views 參考，注意這里可能會等很久或者失敗，建議禾斗學上網，或者手動下載 SkiaSharp 的這個 nuget 包到本地，然后再更改 nuget 包源指向本地檔案夾，包下載地址：https://nugetized.blob.core.windows.net/skiasharp-eap/flatcontainer/skiasharp/2.84.0-preview.2/skiasharp.2.84.0-preview.2.nupkg

Snipaste_2020-09-22_10-23-51

版本號中的 84 表明是根據 skia m84 這個版本封裝的，

接下來修改 xaml，添加 SKSwapChainPanel 并訂閱 PaintSurface 事件，

撰寫 PaintSurface 事件處理函式：

        private void SKSwapChainPanel_PaintSurface(object sender, SKPaintGLSurfaceEventArgs e)
        {
            var renderTarget = e.BackendRenderTarget;

            var surface = e.Surface;
            var canvas = surface.Canvas;

            canvas.Clear();

            const string sksl = @"void main(float2 fragCoord, inout half4 fragColor)
{
    fragColor = half4(1.0,0.0,0.0,1.0);
}";

            using (var effect = SKRuntimeEffect.Create(sksl, out var errors))
            {
                using (var paint = new SKPaint())
                {
                    var shader = effect.ToShader(false);

                    paint.Shader = shader;

                    canvas.DrawRect(0, 0, renderTarget.Width, renderTarget.Height, paint);
                }
            }
        }

接下來我們一行行說明一下每行代碼的作用，

var renderTarget = e.BackendRenderTaget;

從事件物件中獲取渲染的目標，從這里我們可以獲取到渲染目標的大小，

var surface  = e.Surface;
var canvas = surface.Canvas;

獲取繪制畫布，

canvas.Clear();

清慷訓布，因為 PaintSurface 事件是有可能不斷觸發的（例如改變控制元件大小），如果不清空的話，內容就會不斷疊加上去，

const string sksl = @"void main(float2 fragCoord, inout half4 fragColor)
{
    fragColor = half4(1.0,0.0,0.0,1.0);
}";

宣告 skia 著色器語言（SKSL），SKSL 的說明可以看這里：https://skia.googlesource.com/skia/+/master/src/sksl/README 或者 Github 鏡像地址：https://github.com/google/skia/blob/master/src/sksl/README

而 shader 語言中需要像 c 語言一樣宣告一個 main 函式，SKSL 類似于 GLSL，但還是有一點點區別，

在 https://medium.com/cavalry-animation/sksl-in-cavalry-932d503c889e 這篇文章中，我們可以知道 SKSL 的 main 函式的簽名：

Snipaste_2020-09-22_10-52-03

也就是：

void main(float2 fragCoord, inout half4 fragColor)

float2 代表包含兩個單精度浮點數 float 的結構體，half4 代表包含四個半精度浮點數 half 的結構體，inout 表明這個引數是輸入輸出，類似 C# 里的 ref，根據引數名，我們知道第一個引數 fragCoord 是某個像素點的坐標，而 fragColor 則是這個點的顏色（rgba），

接下來我們回傳紅色，也就是 fragColor = half4(1.0, 0.0, 0.0, 1.0)，至于這里為什么不用 255 來代表全紅，而用 1.0，我理解是因為 255 包含的色域還不夠多，而用這種百分比的方式則能夠顯示更多的顏色，

using (var effect = SKRuntimeEffect.Create(sksl, out var errors))

這里就是根據 SKSL 動態編譯出一個 effect，如果沒有編譯錯誤的話，errors 將會是 null，

using (var paint = new SKPaint())

創建了一個畫筆，

var shader = effect.ToShader(false);

paint.Shader = shader;

將 effect 轉換成 shader，并附著到畫筆上，ToShader 的引數名是 isOpaque，翻譯過來就是：是否是不透明的，這里我們可能需要 alpha 通道，所以傳 false，

canvas.DrawRect(0, 0, renderTarget.Width, renderTarget.Height, paint);

最后就是在畫布上畫一個和畫布一樣大小的矩形了，這樣相當于填充了整個矩形，

運行之后我們可以看到如下效果：

Snipaste_2020-09-22_11-10-46

看上去用 Shader 比直接設定畫筆顏色畫矩形復雜多了，這里我再舉一個小例子：

const string sksl = @"void main(float2 fragCoord, inout half4 fragColor)
{
    float scale = 10;
    float x = fragCoord.x / scale;
    float y = fragCoord.y / scale;

    if (int(mod(x, 2.0)) == 0 ^^ int(mod(y, 2.0)) == 0)
    {
        fragColor = half4(1.0,0.0,0.0,1.0);
    }
    else
    {
        fragColor = half4(0.0,1.0,0.0,1.0);
    }
}";

出來的效果是這樣的：

Snipaste_2020-09-22_12-11-11

這個雖然效果用傳統的設定像素的方式也能做，但性能就會相差很多了，更別說其它高級的效果了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/106139.html

標籤：.NET技术

上一篇：C#使用Linq to csv讀取.csv檔案資料3_原始碼改造_支持設定標題行&標題映射&自動列印并忽略錯誤行資料&定義資料格式

下一篇：WPF 欄位驗證 ValidationRules