dotnet 控制臺 使用 Microsoft.Maui.Graphics 配合 Skia 進行繪圖入門

本文將告訴大家如何在 dotnet 的控制臺模式下，采用 MAUI 自繪庫 Microsoft.Maui.Graphics 進行繪圖，設定 Microsoft.Maui.Graphics 底層呼叫 Microsoft.Maui.Graphics.Skia 庫的 Skia 進行具體的繪圖實作，此控制臺可以跨平臺運行，我在本機 Win10 和 WSL 的 Ubuntu 上都運行過，輸出的結果圖片像素級相似，本文將告訴大家如何采用 Microsoft.Maui.Graphics 進行跨平臺的自繪

在開始之前，先理清一下概念，剛正式發布的 MAUI 指的是一個跨平臺的 UI 框架，而 dotnet 指的是在 UI 框架下面的運行時，這是早已實作跨平臺的了，本文所說的 Microsoft.Maui.Graphics 是屬于 MAUI 的一個組件，是 MAUI 的渲染層里面的一個部分，相當于直接使用 Microsoft.Maui.Graphics 就是將 MAUI 的渲染里面的一個模塊拆出來獨立使用，可以看到 MAUI 的設計上，渲染的一個模塊是可以拆處理獨立使用的

本文將從一個控制臺開始，從比較基礎的層面告訴大家如何使用 Microsoft.Maui.Graphics 進行繪圖，我采用 Microsoft.Maui.Graphics.Skia 庫的 Skia 進行具體的繪圖實作，實作將畫出的內容存放到本地檔案

新建一個控制臺專案，我將專案放在 D:\lindexi\Code\SkiaSharp\SkiaSharp\BihuwelcairkiDelalurnere 檔案夾里面

按照慣例，安裝 Microsoft.Maui.Graphics.Skia 的 NuGet 包，為了可以在 Windows Subsystem for Linux （WSL）適用于 Linux 的 Windows 子系統上的 Ubuntu 上運行，繼續添加 SkiaSharp.NativeAssets.Linux.NoDependencies 庫，詳細請看 dotnet 修復在 Linux 上使用 SkiaSharp 提示找不到 liblibSkiaSharp 庫

添加完成庫的 csproj 專案檔案內容如下

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net6.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.Maui.Graphics.Skia" Version="6.0.403" />
    <PackageReference Include="SkiaSharp.NativeAssets.Linux.NoDependencies" Version="2.88.0" />
  </ItemGroup>

</Project>

在 Program.cs 加上命名空間參考

using Microsoft.Maui.Graphics;
using Microsoft.Maui.Graphics.Skia;
using SkiaSharp;

在 Microsoft.Maui.Graphics 里，一切的邏輯都是從 ICanvas 畫板開始，這是一個介面，可以采用 SkiaCanvas 來進行實作，代碼如下

        var skiaCanvas = new SkiaCanvas();

而 SkiaCanvas 需要有一個具體的 Skia 繪制的畫板，也就是 Canvas 屬性，接下來開始構建 Skia 的畫板，采用的是圖片的方式，讓 Skia 繪制到圖片上

先新建圖片的資訊

var skImageInfo = new SKImageInfo(1920, 1080, SKColorType.Bgra8888, SKAlphaType.Opaque, SKColorSpace.CreateSrgb());

我喜歡配置顏色采用 Bgra8888 的格式，在通用性上來說，這個 Bgra8888 是 B(Blue藍色) G(Green綠色) R(Red 紅色) 和 A(Alpha透明度) 每個分量各 8 個位的 32 位表示一個像素的格式，由于足夠簡單，被很多個平臺和框架和硬體所支持，盡管 Bgra8888 不是效率最高的方式，但好在簡單也方便理解，同時也在多個平臺可以方便共用，因此在不確定選什么顏色的時候，默認采用這個格式也是不錯的

通過 SKImage.Create 方法創建出圖片，這個圖片不是只存放磁盤里的圖片，而是 Skia 的一個概念

using var skImage = SKImage.Create(skImageInfo);

為了在此 SKImage 上繪制，需要取出 SKBitmap 物件，放入到 SKCanvas 里，代碼如下

using (SKBitmap skBitmap = SKBitmap.FromImage(skImage))
{
    using (var skCanvas = new SKCanvas(skBitmap))
    {
    }
}

于是就獲取到了 SKCanvas 的物件，可以放入到 SkiaCanvas 里面

using (SKBitmap skBitmap = SKBitmap.FromImage(skImage))
{
    using (var skCanvas = new SKCanvas(skBitmap))
    {
        var skiaCanvas = new SkiaCanvas();
        skiaCanvas.Canvas = skCanvas;
    }
}

如此即可拿到 ICanvas 的物件，這一層就是抽象的，無論具體的底層繪制采用的是什么基礎，業務用 ICanvas 型別

        var skiaCanvas = new SkiaCanvas();
        skiaCanvas.Canvas = skCanvas;

        ICanvas canvas = skiaCanvas;

以上就完成了將 Microsoft.Maui.Graphics 的具體繪制底層邏輯更換使用為 Skia 進行繪制，相似的可以替換為采用 WPF 進行繪制，詳細請看 WPF 使用 MAUI 的自繪制邏輯

接下來就是嘗試畫一條線段測驗一下

        canvas.StrokeSize = 2;
        canvas.StrokeColor = Colors.Blue;

        canvas.DrawLine(10, 10, 100, 10);

將畫出的內容保存到圖片檔案，就需要回到 SkiaSharp 的邏輯

        var fileName = $"xx.png";

        skCanvas.Flush();

        using (var skData = https://www.cnblogs.com/lindexi/archive/2022/07/01/skBitmap.Encode(SKEncodedImageFormat.Png, 100))
        {
            var file = new FileInfo(fileName);
            using (var fileStream = file.OpenWrite())
            {
                fileStream.SetLength(0);
                skData.SaveTo(fileStream);
            }
        }

完成代碼，先在 Windows 上運行一下，可以看到輸出了圖片如下

接下來進入 WLS 也運行一下代碼

輸出的圖片和在 Windows 上輸出的圖片檔案是完全二進制相同的

更多細節請看 繪制圖形物件 - .NET MAUI Microsoft Docs

更多的 MAUI 相關博客，還請參閱我的 博客導航

本文的例子放在github 和 gitee 歡迎訪問

可以通過如下方式獲取本文的源代碼，先創建一個空檔案夾，接著使用命令列 cd 命令進入此空檔案夾，在命令列里面輸入以下代碼，即可獲取到本文的代碼

git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin d910685120d0a4be91792685ada4bd9c967f6e4a

以上使用的是 gitee 的源，如果 gitee 不能訪問，請替換為 github 的源，請在命令列繼續輸入以下代碼

git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
git pull origin d910685120d0a4be91792685ada4bd9c967f6e4a

獲取代碼之后，進入 SkiaSharp\BihuwelcairkiDelalurnere 檔案夾

我建立了一個 SkiaSharp 的群： 788018852 歡迎大家加入討論

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

標籤：.NET技术

上一篇：Terraform匯入S3模塊未按預期作業

下一篇：.NET程式組態檔操作（ini，cfg，config）