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框架，可以在任何应用框架下使用这个库，就像使用其他NuGet包一样。换句话说，我可以在WPF、WinForms或纯控制台应用中使用Microsoft.Maui.Graphics进行绘图。

此外，我也可以注入Microsoft.Maui.Graphics的实现定义，扩展其他渲染引擎或框架作为绘图的基础支持。

回到主题，本文将介绍如何在MAUI中使用Microsoft.Maui.Graphics提供的绘图能力进行自绘。对于任何UI框架来说，实现良好的自绘能够扩展出许多炫酷的界面效果，同时也方便将旧技术积累迁移到新UI框架上。无疑，MAUI在这方面做到了这一点。

目前是2022年6月，关于这部分的内容还没有多少文档，官方文档中也提到MAUI仍处于预览版，但别听官方的说法，实际上它在5月份就已经发布了，发布在6.0.312版本的dotnet上。

在MAUI中接入Microsoft.Maui.Graphics以实现自绘是有框架层支持的，只是实现方式稍微有点绕。

首先，安装VisualStudio 2022预览版，用于创建新的MAUI项目。由于MAUI的发布与VisualStudio的发布日期不匹配，目前只能通过预览版本来进行操作，但后续会合并到正式版本中。

在新建的项目中，创建一个类型，让这个类型继承

Microsoft.Maui.Graphics.IDrawable

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框架中。

稿定AI绘图

稿定推出的AI绘画工具

36

查看详情

在MAUI框架中，提供了GraphicsView元素来对接Microsoft.Maui.Graphics的绘图功能。在GraphicsView的Drawable属性中，就是用来传入IDrawable对象的。

对接的第一步是将我们编写的

GraphicsDrawable

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

请将以上代码中的

local

接着在GraphicsView中使用以上定义的资源，如下代码所示：

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

运行程序，即可在界面上看到一条线。

可以看到调用堆栈如下：

实际的实现是由Win2D提供的。

以上就是MAUI 自定义绘图入门的详细内容，更多请关注php中文网其它相关文章！