网站编程培训机构排名前十,计算机网站建设专业热门吗,兰州网络技术服务中心,在线协同办公软件在2022的5月份#xff0c;某软正式发布了 MAUI 跨平台 UI 框架。我本来想着趁六一儿童节放假来写几篇关于 MAUI 入门的博客#xff0c;可惜发现我不擅长写很入门的博客。再加上 MAUI 似乎是为了赶发布日期而发布#xff0c;只能勉强说能开发了#xff0c;能用了。于是我就来… 在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 version1.0 encodingutf-8 ?ContentPage xmlnshttp://schemas.microsoft.com/dotnet/2021/mauixmlns:xhttp://schemas.microsoft.com/winfx/2009/xamlxmlns:localclr-namespace:HejawrawceaJurheakelerelax:ClassHejawrawceaJurheakelerela.MainPageContentPage.Resourceslocal:GraphicsDrawable x:KeyGraphicsDrawable/local:GraphicsDrawable/ContentPage.Resources/ContentPage还请将以上代码的 local 的命名空间更换为你的项目对应的命名空间接着在 GraphicsView 里使用以上定义的资源如以下代码GraphicsView x:NameGraphicsView WidthRequest100 HeightRequest100 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 initgit remote add origin https://gitee.com/lindexi/lindexi_gd.gitgit pull origin 2da0315302ae504f50c4c3baa47fe3f45d0cdc26以上使用的是 gitee 的源如果 gitee 不能访问请替换为 github 的源git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git获取代码之后进入 HejawrawceaJurheakelerela 文件夹
