建设部网站1667号,wordpress模板在哪购买,网业,南宁seo诊断我在做一个图表工具软件#xff0c;这个软件使用 MAUI 开发。我的需求是图表的内容需要和 PPT 的图表对接#xff0c;需要用到 OpenXML 解析 PPT 内容#xff0c;读取到 PPT 图表元素的内容#xff0c;接着使用 MAUI 渲染层绘制图表元素。图表工具软件需要在 Windows 平台和…我在做一个图表工具软件这个软件使用 MAUI 开发。我的需求是图表的内容需要和 PPT 的图表对接需要用到 OpenXML 解析 PPT 内容读取到 PPT 图表元素的内容接着使用 MAUI 渲染层绘制图表元素。图表工具软件需要在 Windows 平台和 Linux 平台上运行。在 Windows 下我采用 WPF 应用用来辟谣说 MAUI 不支持 WPF 应用。在 Linux 选用 Ubuntu 系统采用 GTKSharp 应用加上 Skia 渲染对接 MAUI 框架图表工具软件的开发架构如下可以看到只有和具体平台对接的一层不相同本文将包含两个部分一个是解析渲染面积图图表另一个是使用 MAUI 开发跨平台应用。解析面积图图表是用到 OpenXML 解析 PPT 的知识本文只包含很少量的 OpenXML 的知识我将详细的使用 OpenXML 解析 PPT 的面积图的方法放在了 dotnet OpenXML 解析 PPT 图表 面积图入门 博客里。本文的用到的解析 PPT 的代码也是从此博客里面抄的这部分代码将不会在本文上贴出。如对 OpenXML 解析 PPT 毫无概念的伙伴阅读本文也不会存在问题只需要假定本文的解析 PPT 的代码是通过某个方式获取到了图表的相关信息即可请将重点放在图表的绘制渲染以及如何做跨平台对接上本文使用的代码只能用来做例子本文的解析 PPT 图表的代码只能支持本文例子里的测试文件本文的测试文件和代码可以从本文最后获取在开始之前先看一下本文实现的效果效果这是在 PPT 的图表在 Windows 下使用 Skia 绘制为图片文件然后使用 Image 控件显示图片界面效果如下以上只是将 MAUI 接入 WPF 的一个方法。不代表只能通过图片文件的方式接入其他绘制方法请看 WPF 使用 MAUI 的自绘制逻辑在 Linux 下使用 Skia 对接 Gtk 框架界面效果如下动态运行效果如下接下来将告诉大家如何实现解析绘制面积图图表开始实现绘制 PPT 的图表之前需要先解析图表的内容图表的解析部分需要用到 OpenXML 知识这部分解析的内容在 dotnet OpenXML 解析 PPT 图表 面积图入门 博客里面有详细说明。使用 dotnet OpenXML 解析 PPT 图表 面积图入门 的方法解析出图表的内容将获取到的内容放入到 AreaChartRenderContext 类型此类型用来提供渲染绘制使用的上下文包括以下属性上面代码的 ChartSpace 属性是图表元素通过 dotnet OpenXML 解析 PPT 图表 面积图入门 博客可以了解到里面包含图表的信息。上面代码的 SlideContext 属性是我所在的团队开源的 OpenXml 解析辅助库提供的包含元素所在页面的类型详细请看: https://github.com/dotnet-campus/DocumentFormat.OpenXml.Extensions图表关键的信息包含类别轴上的数据也称为横坐标轴上的数据放在 CategoryAxisValueList 属性。系列信息集合放在 AreaChartSeriesInfoList 属性。这两个属性是从 ChartSpace 读取读取的方法请看 dotnet OpenXML 解析 PPT 图表 面积图入门 博客或者阅读本文用到的代码在获取到了图表的各个信息之后即可进行绘制图表。开始进行绘制之前还请先了解图表的各个组成部分横坐标轴 类别坐标轴数据纵坐标轴数据系列在图表里面有数据系列的概念每个系列的数据组成一个个的数据系列。对于大部分图表来说数据层都是由一个个数据系列组成的每个数据系列可以有自己的系列名称系列名称大部分时候都放在图例里面也就是图例里面的内容就是由系列名称提供的在图表里面核心就是对数据的处理系列的数据内容就是核心的如图面积图有两个数据系列通过上面的 Excel 内容可以了解到两个系列的数据分别如下系列 132,32,28,12,15
系列 212,12,12,21,28为了让绘制逻辑更方便阅读定义 AreaChartRender 类用来绘制图表图表绘制 AreaChartRender 需要两个参数一个是 AreaChartRenderContext 用来提供信息一个是 Microsoft.Maui.Graphics.ICanvas 用来提供渲染绘制方法。在各个平台上可以使用不同的实现对接 MAUI 的渲染也就是 Microsoft.Maui.Graphics.ICanvas 接口可以对应不同的实现。在解析渲染模块里不耦合具体的平台渲染实现只使用抽象的接口定义的类型如下图表绘制 AreaChartRender 基础的使用方法是在和 OpenXML 解析 PPT 的图表这一层对接通过 AreaChartRenderContext 类型拿到图表的内容创建出 AreaChartRender 对象传递给具体的渲染层。在渲染层里将区分平台进行渲染各个平台定义 Microsoft.Maui.Graphics.ICanvas 的实现传入到 AreaChartRender 的 Render 方法。在 Render 方法将绘制图表内容即可通过抽象的 Microsoft.Maui.Graphics.ICanvas 接口调用各个平台具体的绘制实现使用以下代码即可使用 OpenXML 解析 PPT 的图表获取图表内容关于以下代码的细节逻辑请看 dotnet OpenXML 解析 PPT 图表 面积图入门具体的平台渲染实现部分放在下一章。下面先在 Render 方法对接 MAUI 的抽象的 Microsoft.Maui.Graphics.ICanvas 接口进行绘制图表。绘制图表的工作量包括绘制坐标轴信息计算刻度线对各个系列的绘制本文这里采用的是绝对布局方式相对来说用到的知识简单。缺点是很多计算都会放在下面代码看起来比较复杂好在计算只是小学数学的加减下面的绘制代码只能作为本文的例子使用很多原本需要进行排版计算的值为了方便理解我都使用常量如下面代码还请忽略这部分的细节从 OpenXML 解析的 PPT 图表获取到的 AreaChartRenderContext 拿到图表的元素尺寸用来作为图表绘制画布的限制尺寸var chartWidth (float) Context.Width.Value;var chartHeight (float) Context.Height.Value;以上的数值定义全部采用 float 类型其原因是 MAUI 为了更好的适配更多的平台选用了 float 作为渲染绘制的参数的通用类型。这一点和 WPF 的不相同在 WPF 或 UWP 或 WinFroms 等通用的绘制计算都采用 double 类型。对于渲染绘制大部分情况使用 float 也是够用的。如果一个 double 值的范围是在 float 内那进行 double 转 float 也是安全的。至于性能的损耗如果不是热点代码也可以忽略通过以上的信息即可计算出图表的绘制范围包括坐标和尺寸var plotAreaOffsetX yAxisLeftMargin; var plotAreaOffsetY chartTitleHeight;var plotAreaWidth chartWidth - yAxisLeftMargin - yAxisRightMargin;var plotAreaHeight chartHeight - chartTitleHeight - chartLegendHeight - xAxisBottomMargin;这些信息属于布局信息本文这里只是使用简单的固定数值计算而不是跟随具体的图表数据进行计算以上的代码比较“塑料”还请不要抄到实际项目代码。完成布局计算之后开始绘制坐标轴信息。坐标轴信息包含了刻度信息也就是 Y 轴的刻度。刻度信息包括了每个刻度之间的数值间隔是多少最大值和最小值是多少的信息。我采用了玄学的计算方法 GetRatio 获取到了刻度的间隔的值以及和这份 PPT 的图表一样固定了只有 8 条线var rowLineCount 8; // 这份 PPT 测试文件里只有 8 条线// 获取数据最大值var maxData GetMaxValue(); // 获取刻度的值var ratio GetRatio(maxData, rowLineCount); // 这是一个玄学的方法。才不告诉你方法里面直接返回了一个常量var maxValue ratio * (rowLineCount - 1);完成了基础计算接下来可以开始绘制坐标轴。绘制坐标轴就需要用到 MAUI 的绘制知识对这些绘制知识感兴趣还请参阅官方文档Graphics - .NET MAUI Microsoft Docs绘制坐标轴本质上是绘制网格线步骤是先绘制 Y 轴再绘制 X 轴。如 PPT 的图表效果这份文档的 Y 轴只有刻度也就是需要绘制 Y 轴的刻度和 x 行的线。在 MAUI 里绘制线条只需要使用 DrawLine 方法传入两个点即可。控制线条的粗细和颜色等是通过在 DrawLine 方法之前先设置好参数属性。如下面代码绘制 X 行的线以上代码通过 StrokeSize 设置绘制的线条的粗细是 2 的值这里的值是没有一个单位的具体的单位是具体的渲染平台自己赋予的可以认为是像素。使用 StrokeColor 设置线条的颜色再使用 DrawLine 传入两个点绘制出线条接下来继续绘制 Y 轴的刻度。绘制刻度需要用到文本绘制的方法文本绘制中存在一个小问题那就是中文字体设置的问题好在此问题被我修复了详细请看 Fix set the Font to Microsoft.Maui.Graphics.Skia by lindexi · Pull Request #9124 · dotnet/maui以下代码只是绘制数字而已不需要设置中文字体也就不会踩到上文说到的坑。为了让绘制文本对齐到刻度需要给定绘制文本的范围这里稍微有一些知识需要了解详细请看 Microsoft.Maui.Graphics.Skia 使用 DrawString 绘制文本的坐标问题和绘制线条相同的是在绘制文本之前通过参数属性设置文本的属性例如上面代码设置了文本的字体大小。同样这里的字体大小也是没有具体单位的由具体的平台实现决定大部分情况可以认为是像素单位完成了绘制 Y 轴的刻度和 x 行的线继续绘制放在 X 轴底部的类别信息也就是对应本文的图表的日期信息。好在日期的表示的字符串也没有用到中文依然不会踩到上文描述的中文字体的坑绘制类别信息的工作量就是计算出文本的坐标和使用 GetViewText 方法获取到具体类别里的用户可见的文本的字符串然后调用 DrawString 方法即可完成坐标轴的绘制之后就进入关键的 DrawArea 方法在此方法里面将会绘制图表的数据信息。将图表的各个系列的数据作为面积图绘制绘制面积图图表的方法是获取到图表的各个系列的数值信息根据这些数值创建出一段 Path Geometry 路径几何用于填充面积图。创建路径几何可使用 PathF 类型创建一个基于 float 存储信息的路径几何。这里的 PathF 就是 Path Float 的意思如以下代码进行创建using var path new PathF();在 MAUI 里这个 PathF 是推荐做释放的在各个平台的 PathF 的底层实现有所不同不代表着一定需要释放。好在多调用释放是安全的这里就加上 using 用来在方法执行结束释放。开始绘制之前先准备一点点路径几何创建的知识。按照 Path 的创建惯例开始点采用 Move 方法设置如以下代码path.Move(startX, startY);在 MAUI 的设计里可以使用连续的方法输入绘制参数如画两条线然后设置几何关闭可以采用如下代码path.LineTo(x1, y1).LineTo(x2, y2).Close();如上面代码即可画出一段路径集合出来本文会用到的也仅仅只是以上几个方法这也就是本文用到的核心绘制路径的知识。当然路径几何 PathF 是一个复杂的类型拥有的方法和功能可远不止本文介绍的这一点更多绘制知识还请参阅官方文档。在了解了基础用法接下来开始绘制面积图绘制面积图只是一些计算逻辑通过给定的数据计算出 PathF 的内容代码如下创建 path 路径完成即可绘制到画布。按照惯例绘制需要先设置填充颜色再绘制以上简单的代码即可完成图表的绘制。我将上面代码放在一个方法方便大家阅读原本是将上面代码拆开作为多个函数为了方便调试还是放在一个函数里。在实际项目上不要让一个方法的代码如此多开发跨平台应用完成图表的绘制逻辑接下来需要各个平台进行对接。与 MAUI 的对接是十分简单的按照惯例是先安装 NuGet 库然后调用库提供的方法即可完成对接。先对接 Windows 平台的 WPF 应用在 WPF 应用里这次采用的是对接图片文件渲染方法。如本文开始的开发架构图所述在 Windows 上通过 Microsoft.Maui.Graphics.Skia 将 Skia 和 MAUI 对接使用 Skia 作为 MAUI 的画布在绘制完成之后使用 Skia 保存本地图片文件再使用 WPF 渲染保存的图片这不代表着在 WPF 里面只能通过 Skia 才能和 MAUI 对接也不代表着 WPF 对接 Skia 只能通过本地图片的显示。关于在 WPF 里面直接对接 MAUI 的方法请看 WPF 使用 MAUI 的自绘制逻辑关于在 WPF 里面使用 WriteableBitmap 控件作为 Skia 的输出的方式让 WPF 对接 Skia 的方法请看 WPF 使用 Skia 绘制 WriteableBitmap 图片回到对接的逻辑由于本文的 WPF 应用只负责将 Skia 保存的图片进行渲染也就是说 WPF 层是可以不知道任何 MAUI 和 Skia 的逻辑只需要知道保存的图片文件在哪即可。既然没有什么 WPF 的逻辑那就先来关注一下 Skia 的对接逻辑这里的 Skia 逻辑包括两个部分一个是 Skia 输出到本地图片文件另一个是 Skia 对接 MAUI 的逻辑。关于 Skia 对接 MAUI 的逻辑细节可参阅 dotnet 控制台 使用 Microsoft.Maui.Graphics 配合 Skia 进行绘图入门 文档本文将不包含细节逻辑开始之前按照惯例先安装 NuGet 库。在 dotnet 6 应用里通过编辑 csproj 项目文件的方式可以快速安装 NuGet 库在 csproj 文件上加上以下代码用来安装 NuGet 库。安装的 NuGet 库包括用来解析 PPT 的 dotnetCampus.DocumentFormat.OpenXml.Flatten 和 dotnetCampus.OpenXmlUnitConverter 和 DocumentFormat.OpenXml 库和 MAUI 的 Microsoft.Maui.Graphics 和 Microsoft.Maui.Graphics.Skia 库为了方便开发我将 Skia 对接 MAUI 的逻辑封装到 SkiaPngImageRenderCanvas 类型。此类型继承 IRenderCanvas 接口接口定义如下通过调用 Render 方法传入委托委托的参数就是 Microsoft.Maui.Graphics.ICanvas 接口在此委托里面完成实际的绘制逻辑创建 SkiaPngImageRenderCanvas 需要三个参数分别是宽度高度的画布尺寸也就是保存的图片的尺寸这里的单位是像素和保存的文件。上层业务调用 Render 完成将输出文件在 Render 方法里将先创建 Skia 的画布接着使用 Skia 的画布创建 MAUI 的画布将 MAUI 的画布传入到委托作为参数绘制完成保存本地文件在 Skia 里面最重要的概念是画布 SKCanvas 类型基本的绘制逻辑都是调用此类型的方法完成。通过此类型即可在上面绘制内容。而 Skia 与 MAUI 的对接里也需要用到此类型对接的方法是创建 Microsoft.Maui.Graphics.Skia.SkiaCanvas 对象此 SkiaCanvas 对象继承了 Microsoft.Maui.Graphics.ICanvas 接口即可用来传入图表的绘制层作为绘制的画布初始化 SkiaCanvas 对象就需要用到 SKCanvas 对象以下代码包含了创建 SKCanvas 对象和使用 SKCanvas 对象创建出 SkiaCanvas 对象接着在执行 action 委托完成之后保存为本地图片代码如下以上代码忽略细节逻辑更多对接细节请看 dotnet 控制台 使用 Microsoft.Maui.Graphics 配合 Skia 进行绘图入门以上就完成了 Skia 的对接接下来就交给 WPF 层将 OpenXML 解析和 Skia 和 MAUI 对接一起先对接 OpenXML 解析 PPT 图表的逻辑。获取测试文件将测试文件传入 ModelReader 构建出 AreaChartRender 用来绘制如此即可完成 OpenXML 的对接接着定义输出的本地图片创建 SkiaPngImageRenderCanvas 用来做画布。这里是随便找一个文件用来输出让 AreaChartRender 使用 Skia 提供的画布进行渲染这就是关键的对接代码skiaPngImageRenderCanvas.Render(areaChartRender.Render);如此即可将让图表绘制到 SkiaPngImageRenderCanvas 提供的 SkiaCanvas 对象上最终使用 SKCanvas 保存到本地文件最后一步就是在 WPF 里面将保存的文件在界面显示以上的 Root 是一个放在 XAML 的 Grid 元素Grid x:NameRoot/Grid这就是在 WPF 上对接的方法所有的代码如下运行效果如下可以看到在 Windows 下通过 WPF 对接 MAUI 是十分简单的下面开始对接 Linux 平台的应用在 Linux 平台上使用 GtkSharp 框架做应用依然使用 Skia 做 MAUI 的渲染层在 Linux 平台上的对接分为多个任务创建 GtkSharp 应用将 Skia 与 GtkSharp 对接将 Skia 与 MAUI 的对接上文已经有了 Skia 和 MAUI 的对接逻辑的细节接下来将跳过 Skia 与 MAUI 的对接部分的细节逻辑。本文接下来将重点放在如何创建 GtkSharp 应用以及将 Skia 与 GtkSharp 对接上在开始 GtkSharp 应用的创建之前需要先聊一点历史。嗯本考古学家要聊的不是上古的历史了只是聊聊现代的历史。关于上古的 Gtk 的故事还请自行查询。回到历史故事上很久之前 mono 组织就创建了 https://github.com/mono/gtk-sharp 仓库此仓库在 2020 之前还能勉力支持但渐渐就跟不上 gtk 的发展了只能支持到 gtk2 的版本。后来大佬们专门给 GtkSharp 创建了组织和仓库在 mono 组织的 gtk-sharp 的基础上继续维护现在支持到了 gtk3 的版本请看 https://github.com/GtkSharp/GtkSharp本文创建的 GtkSharp 应用就是使用 https://github.com/GtkSharp/GtkSharp 提供的支持手动创建的方法是先创建一个 dotnet 6 的控制台应用接着编辑 csproj 文件修改为以下代码安装 GtkSharp 和 SkiaSharp.Views.Gtk3 库。如以下代码可以了解到创建一个 GtkSharp 项目十分简单只需要安装上支持 .NET Standard 2.0 及以上框架的 GtkSharp 库即可其实 https://github.com/GtkSharp/GtkSharp 仓库的细节还是做的很好的除了以上手工创建的方法外还可以通过 dotnet new 命令创建项目。以下是使用 dotnet new 命令创建项目的方法第一步是安装 dotnet new 模版在控制台命令行输入以下代码即可进行安装dotnet new --install GtkSharp.Template.CSharp安装完成之后即可使用如下命令创建项目请将下面命令的 MyApplication 替换为你的项目名dotnet new gtkapp -o MyApplication创建好了 GtkSharp 项目和安装完成了必要的 NuGet 包之后接下来是让 Skia 和 GtkSharp 进行对接。在开始对接之前需要说明的是我推荐是在 Ubuntu 上构建和运行此项目而不是在 Windows 上运行。尽管 GtkSharp 声称是支持 Windows 平台的而且 https://github.com/GtkSharp/GtkSharp 仓库也做了很多辅助构建工作但是实际在 Windows 平台上的构建体验还是比较闹心的。为什么这么说构建的第一步是需要将依赖下载了依赖放在 https://github.com/GtkSharp/Dependencies 仓库里将依赖下载到 %LocalAppData%\Gtk\3.24.24\gtk.zip 文件。然而这是一个 50MB 左右的文件在国内的垃圾网速下……如果想要在 Windows 下构建同时嫌弃拉 gtk-3.24.24.zip 的速度太慢可以试试我上传到 CSDN 下载的资源 https://download.csdn.net/download/lindexi_gd/86362889如果构建成功但是运行提示 System.DllNotFoundException: Gtk: libgtk-3-0.dll 失败请参阅 GtkSharp/GtkSharp#337回到让 Skia 和 GtkSharp 进行对接的逻辑编辑 MainWindow.glade 文件替换为以下代码这个文件就是 GTK 的界面描述更多关于这个文件的知识还请自行了解这不是本文的重点。如果对 GtkSharp 不熟悉不知道如何配置推荐到本文最后获取所有的代码编辑 MainWindow.cs 修改构造函数为以下代码以下代码的含义是将一个 SKDrawingArea 对象作为窗口显示的内容这里的 SKDrawingArea 对象里提供了 PaintSurface 事件通过此事件即可获取到 Skia 的画布。在构造函数里对接了 GtkSharp 和 Skia 的逻辑在 OnPaintSurface 方法里面就是 Skia 的渲染回调有点和 WPF 的 OnRender 方法类似在此函数里通过 e.Surface.Canvas 绘制的内容将会输出到 GtkSharp 的窗口根据上文的 WPF 对接 Skia 和 MAUI 的逻辑可以了解到对接的方式是使用 Skia 的画布创建 MAUI 的 SkiaCanvas 画布如以下代码尽管推荐 OnPaintSurface 方法只处理绘制逻辑不要在这个方法里面写业务逻辑但为了方便理解在本文的例子就在 OnPaintSurface 方法处理了 PPT 解析和图表绘制逻辑。请不要在实际的项目上在 PaintSurface 事件里处理业务逻辑解析 PPT 文件需要先获取到测试文件再使用上文的 ModelReader 创建出 AreaChartRender 对象这些逻辑在各个平台都是相同的再使用和上文一样的对接 Skia 和 MAUI 的逻辑进行对接。对接方法依然是获取到 skiaCanvas 对象传入到 AreaChartRender 绘制这就是最关键的代码areaChartRender.Render(skiaCanvas);可以看到关键的代码也只需要一句即可完成这就是在 GtkSharp 上对接的方法核心的代码如下运行的效果如下这就是使用 MAUI 在 Windows 和 Linux 上解析和绘制 PPT 的图表的例子本文忽略了很多细节更多细节请阅读本文使用的代码整个 MAUI 是一个非常庞大和强大的框架如此庞大的框架想要完全完成还是需要一些时间的。本文所用到的仅仅只是 MAUI 的渲染层我将 MAUI 的渲染层拆开即可放入到现有的应用里面也可以输出到本地图片文件。既支持 Windows 平台又支持 Linux 平台。可以使用默认自带的 MAUI 具体平台实现也可以自己基于接口自己实现一套渲染进行对接代码本文以上的测试文件和代码放在github 和 gitee 欢迎访问可以通过如下方式获取本文的源代码先创建一个空文件夹接着使用命令行 cd 命令进入此空文件夹在命令行里面输入以下代码即可获取到本文的代码git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin c5477e93289a71c05787af4b1ab1dbb23f18b0e6以上使用的是 gitee 的源如果 gitee 不能访问请替换为 github 的源git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git获取代码之后打开 Pptx.sln 文件里面的包含三个项目PptxCore 是 PPT 解析和图表绘制的项目此项目可以在 Windows 和 Linux 平台使用Pptx 是一个 WPF 项目PptxGtk 是一个 GtkSharp 项目更多更多关于 OpenXML 解析请看 Office 使用 OpenXML SDK 解析文档博客目录
