MAUI 自定義繪圖入門

在2022的5月份，某軟正式發布了 MAUI 跨平臺 UI 框架，我本來想著趁六一兒童節放假來寫幾篇關于 MAUI 入門的博客，可惜發現我不擅長寫很入門的博客，再加上 MAUI 似乎是為了趕發布日期而發布，只能勉強說能開發了，能用了，于是我就來開始假定大家是一個成熟的 MAUI 開發者了，開始進入復雜控制元件自繪的自定義繪圖渲染的博客

在 MAUI 里面，默認將會在 Microsoft.Maui.Dependencies 參考 Microsoft.Maui.Graphics 的負載，在 Microsoft.Maui.Graphics 里，提供了跨平臺的獨立繪圖能力，在 GitHub 上作為獨立的開源專案，開源在 https://github.com/dotnet/Microsoft.Maui.Graphics

也如 Microsoft.Maui.Graphics 在它開源專案里面描述的一樣，使用 Microsoft.Maui.Graphics 不會被局限于 MAUI 框架上，可以在任何的應用框架下使用上 Microsoft.Maui.Graphics 庫，就和其他的 NuGet 包一樣去使用，換句話說，我可以在 WPF 或 WinForms 或者是純控制臺里面使用 Microsoft.Maui.Graphics 進行繪圖

另外，我也可以自己注入 Microsoft.Maui.Graphics 的實作定義，擴展其他渲染引擎或框架作為繪圖的基礎支持

回到主題，本文將告訴大家如何在 MAUI 里面使用 Microsoft.Maui.Graphics 提供的繪圖能力進自繪，對于任何的 UI 框架來說，只要能實作好的自繪，就能擴展出超級多炫酷的界面效果，同時也可以方便將舊技識訓累遷移到此 UI 框架上，無疑，在MAUI上就實作了這一點

這部分的內容，在當前是 2022.06 還沒有多少檔案，官方的檔案里面都說 MAUI 還是預覽版，別聽官方說的，在5月就發布了，發布在 6.0.312 的 dotnet 版本上

在 MAUI 里面接入 Microsoft.Maui.Graphics 從而實作自繪是有框架層的支持的，只是實作的方式稍微有點繞

先安裝 VisualStudio 2022 預覽版用于新建 MAUI 專案，由于 MAUI 的發布和 VisualStudio 的發布日期對不上，現在只能通過預覽版本了，不過后續會合入到正式版本

在新建的專案里面，新建一個型別，讓這個型別繼承 Microsoft.Maui.Graphics.IDrawable 介面，于是此型別即可通過實作 Draw 方法，被框架層呼叫到，從而在 Draw 方法里面執行繪圖，例如和官方的例子一樣，將此型別命名為 GraphicsDrawable 如以下代碼

public class GraphicsDrawable : IDrawable
{
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
    }
}

在 Draw 里面通過 DrawLine 畫出一段線條，為了讓線條可見，再加上設定線條的顏色和粗細值的代碼

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.StrokeColor = Colors.Red;
        canvas.StrokeSize = 6;
        canvas.DrawLine(10, 10, 90, 100);
    }

完成了這一步之后，還需要將 GraphicsDrawable 接入到 MAUI 框架里面

在 MAUI 框架里提供了 GraphicsView 元素用來對接 Microsoft.Maui.Graphics 的繪圖功能，在 GraphicsView 的 Drawable 屬性里面，就是用來傳入 IDrawable 的物件的

對接的第一步是將咱寫的 GraphicsDrawable 型別定義成資源，方便后續代碼都在 XAML 里面實作，為了演示方便，以下代碼都寫在 MainPage.xaml 里

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:HejawrawceaJurheakelerela"
             x:>
    <ContentPage.Resources>
        <local:GraphicsDrawable x:Key="GraphicsDrawable"></local:GraphicsDrawable>
    </ContentPage.Resources>

</ContentPage>

還請將以上代碼的 local 的命名空間更換為你的專案對應的命名空間

接著在 GraphicsView 里使用以上定義的資源，如以下代碼

    <GraphicsView x:Name="GraphicsView" WidthRequest="100" HeightRequest="100" Drawable="{StaticResource GraphicsDrawable}"></GraphicsView>

運行程式，即可看到界面畫出一條線

可以看到呼叫堆疊如下

也就是實際的實作是由 Win2D 提供的

以上是在 Windows 平臺上運行的，那既然 MAUI 宣稱是跨平臺的，那在其他的平臺上又是如何

接下來在安卓平臺上跑一下

同樣也看一下呼叫堆疊

可以看到呼叫堆疊和 Windows 平臺上，符合預期的不同，也就是說 Microsoft.Maui.Graphics 根據不同的平臺選用不同的繪制底層技術

這就是 MAUI 自繪的開始，如何繪制出漂亮的界面就靠大家發揮

試用了幾天的 MAUI 發現了比上次我用預覽版本有了很大的進步，比如 Windows 端的除錯部署極大的提升，當然，這不是 MAUI 團隊的努力，而是 Windows App SDK 團隊的努力，將原本的 UWP 很多逗比邏輯和互動給優化的，自然，不足之處也是有的，那就是 MAUI 團隊還是太小了，好多東西還沒磨完，不過這會隨著開發的投入逐步完善，現在的 MAUI 已經達到了 Demo 級，小工具級可用的狀態，推薦大家要是有什么小工具，選擇一下 MAUI 試試水也不錯

本文代碼放在github 和 gitee 歡迎訪問

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

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

以上使用的是 gitee 的源，如果 gitee 不能訪問，請替換為 github 的源

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

獲取代碼之后，進入 HejawrawceaJurheakelerela 檔案夾

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

標籤：.NET技术

上一篇：MASA Auth - SSO與Identity設計

下一篇：MAUI 自定義繪圖入門