专栏首页林德熙的博客MAUI 自定义绘图入门

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:Class="HejawrawceaJurheakelerela.MainPage">
    <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 试试水也不错

本文代码放在githubgitee 欢迎访问

可以通过如下方式获取本文的源代码,先创建一个空文件夹,接着使用命令行 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 文件夹

在 Microsoft.Maui.Graphics 基础上创建的 Microsoft.Maui.Graphics.Controls 仓库,此 Microsoft.Maui.Graphics.Controls 将采用 Microsoft.Maui.Graphics 进行完全的自绘,详细请看 MAUI中使用Maui.Graphics.Controls绘制控件 - 痕迹g - 博客园

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://blog.lindexi.com/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • WPF 使用 MAUI 的自绘制逻辑

    这是一个当前还没开发完成的功能,准确来说连预览版也算不上的功能。我原本以为 MAUI 是无法在 WPF 上面跑的,然而在看完了 MAUI 整个大的设计,才了解到...

    林德熙
  • matplotlib绘图入门

    color_palette()能传入任何matplot_palette()支持的颜色

    皮大大
  • python绘图入门

    将pl.plot(x, y) 改为 pl.plot(x, y, 'o')  ,可得到下面的图:

    py3study
  • SkiaSharp 渲染输出 SVG 文件

    谷歌的 Skia 的一个卖点就是提供了完美的 SVG 的支持,包括输入和输出。输入指的是给一张 SVG 图片,将这个 SVG 渲染出来。输出就是将输出画面保存为...

    林德熙
  • 一图入门Matplotlib绘图

    Matplotlib是Python里可视化的基础包,可以很方便地绘制二维,三维的图表,作图风格接近MATLAB,所以称为matplotlib。使用简单的语句就能...

    超哥的杂货铺
  • Python科学计算和绘图入门

    xferris
  • 绘图技巧|如何创建自定义colormap

    之前悄悄送了一次可视化书籍,大家都留言催更可视化的推文,这就来了。之所以推这篇文章,是因为看到了一个不错的colormap,苦于没有源文件,只能截图然后识别出颜...

    bugsuse
  • R语言入门之基本绘图

    除了统计分析之外,R语言还具有强大的数据可视化功能,这里面除了一些常用的基本函数如plot(),还有‘grid’、‘lattice’和‘ggplot2’...

    生信与临床
  • 看看MAUI候选版本3!

    我们很高兴发布 .NET 多平台应用程序 UI (.NET MAUI) 候选版本 3,这个版本包含一系列新的改进。与以前的候选版本一样,RC3 包含在“上线”支...

    沙漠尽头的狼
  • 在吗?看看MAUI候选版本3!

    我们很高兴发布 .NET 多平台应用程序 UI (.NET MAUI) 候选版本 3,这个版本包含一系列新的改进。与以前的候选版本一样,RC3 包含在“上线”支...

    郑子铭
  • 这份Cartopy绘图入门指南,请查收

    我与Cartopy的认识起源于“气象水文科研猫”的这个推文,那时候的我觉得,用代码画地图好酷,arcgis就感觉low爆了。但是一直没有时间学习。前段时间放暑假...

    陈南GISer
  • R自定义构建函数与批量绘图

    上述代码我们将绘图代码打包成了一个函数,通过函数要绘制其它基因之间的关系就大大简化了代码,并可进行重复性操作

    R语言数据分析指南
  • Python 绘图库 Matplotlib 入门教程

    Matplotlib是一个Python语言的2D绘图库,它支持各种平台,并且功能强大,能够轻易绘制出各种专业的图像。本文是对它的一个入门教程。

    小小科
  • Origin绘图使用自定义的RGB配色

    参考文献:https://www.jianshu.com/p/892711bd4a0a

    全栈程序员站长
  • matlab入门到放弃(四)、绘图基本操作

    subplot(m,n,p),其中,m和n指定将图形窗口分成mxn个绘图区,p指定当前活动区。

    根究FPGA
  • Python可视化库Matplotlib绘图入门详解

    matplotlib是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地行制图。其中,matplotlib的pyplot...

    用户6543014
  • 前端绘图:js-sequence-diagrams安装及入门

    1.js-sequence-diagrams的作用 将简单的文本行绘制成手绘风(或是简单的直线条)的流程图。优点是不需要复杂的数据结构。 ---- 这次做一个数...

    kalifa_lau
  • Python可视化库Matplotlib绘图入门详解

    Matplotlib是Python的绘图库,其中的pyplot包封装了很多画图的函数。

    代码医生工作室
  • seaborn绘图入门1(lineplot+barplot+heatmap+scatterplot)

    Michael阿明

扫码关注腾讯云开发者

领取腾讯云代金券