WPF 使用 Skia 绘制 WriteableBitmap 图片

林德熙

发布于 2020-09-02 09:10:02

2.3K0

发布于 2020-09-02 09:10:02

文章被收录于专栏：林德熙的博客

本文告诉大家如何在 WPF 中使用 SkiaSharp 调用 Skia 这个全平台底层渲染框架，使用绘制命令在 WriteableBitmap 图片上绘制内容

谷歌提出了 Skia 全平台渲染框架，这是一个很底层的框架，详细请看 google/skia: Skia is a complete 2D graphic library for drawing Text, Geometries, and Images.

而 SkiaSharp 是 mono 组织对 Skia 的 .NET 封装库，可以完全用到 Skia 的底层渲染能力，详细请看 mono/SkiaSharp: SkiaSharp is a cross-platform 2D graphics API for .NET platforms based on Google’s Skia Graphics Library. It provides a comprehensive 2D API that can be used across mobile, server and desktop models to render images.

那么如何在 WPF 使用 SkiaSharp 绘制出 WriteableBitmap 在 WPF 中使用？其实 WriteableBitmap 是将一个数组里面的像素在屏幕显示，而 SKSurface 可以从一个像素数组开始创建，创建的时候需要规定这个数组对应的图片的格式，包括图片的大小以及 RGB 像素格式

使用下面代码创建一个简单的界面，在这个界面里面点击按钮将会给 Image 控件赋值使用 Skia 创建的图片

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Image x:Name="Image" Margin="10,10,10,10"></Image>
        <Button Margin="10,10,10,10" Grid.Row="1" Content="使用Skia绘制" Click="Button_OnClick"></Button>
    </Grid>

在 WPF 里面创建一个 WriteableBitmap 可以使用如下代码

        private WriteableBitmap CreateImage(int width, int height)
        {
            var writeableBitmap = new WriteableBitmap(width, height, 96, 96, PixelFormats.Bgra32, 
            BitmapPalettes.Halftone256Transparent);
            return writeableBitmap;
        }

为什么需要创建一个方法来创建，原因是参数 PixelFormats.Bgra32 和 BitmapPalettes.Halftone256Transparent 将会和后续的 Skia 创建相关

在 Skia 里面和 D2D 一样有 Surface 的概念，也就是可以将绘制命令输入到 Skia 绘制到 Surface 上，而绘制内容将会作为像素数组放在传入的数组里面

小伙伴是否还记得 WPF 使用不安全代码快速从数组转 WriteableBitmap 的方法，其实 Skia 在 WriteableBitmap 绘制的本质就是这样

在开始绘制之前需要调用 WriteableBitmap 的 Lock 方法，接着在绘制完成之后，需要调用 AddDirtyRect 和 Unlock 方法

大概的绘制代码如下


               private void UpdateImage(WriteableBitmap writeableBitmap)
        {
            int width = (int)writeableBitmap.Width,
                height = (int)writeableBitmap.Height;
            writeableBitmap.Lock();
            var skImageInfo = new SKImageInfo()
            {
                Width = width,
                Height = height,
                ColorType = SKColorType.Bgra8888,
                AlphaType = SKAlphaType.Premul,
                ColorSpace = SKColorSpace.CreateSrgb()
            };

            using (var surface = SKSurface.Create(skImageInfo, writeableBitmap.BackBuffer))
            {
                SKCanvas canvas = surface.Canvas;
                canvas.Clear(new SKColor(130, 130, 130));
                canvas.DrawText("SkiaSharp on Wpf!", 50, 200, new SKPaint() { Color = new SKColor(0, 0, 0), TextSize = 100 });
                canvas.DrawText("https://blog.lindexi.com", new SKPoint(50, 500), new SKPaint(new 
                SKFont(SKTypeface.FromFamilyName("微软雅黑")))
                {
                    Color = new SKColor(0, 0, 0),
                    TextSize = 20
                });
            }
            writeableBitmap.AddDirtyRect(new Int32Rect(0, 0, width, height));
            writeableBitmap.Unlock();
        }

绘制界面大概如下