WindowsCommunityToolkit3.0无限画布新体验

Windows Community Toolkit 3.0 推出了强大的InfiniteCanvas控件，支持无限画布滚动、墨迹书写、文本输入、格式化文本、画布缩放、撤销重做以及数据导入导出功能。这一控件在“来画视频”UWP应用中得到了实际应用，提供了丰富的绘画工具选择，如不同画笔、橡皮擦、直尺和圆形尺，并支持文字输入和字体选择，方便用户创作并分享绘画作品。InfiniteCanvas的代码结构清晰，包括命令、控件、绘制功能和事件处理等模块，开发者可以通过示例代码和文档进一步了解其实现细节。

概述

InfiniteCanvas 是一个 Canvas 控件，它支持无限画布的滚动，支持 Ink，文本，格式文本，画布缩放操作，撤销重做操作，导入和导出数据。

这是一个非常实用的控件，在“来画视频” UWP 应用的绘画功能中，也用到了这个控件，它对不同画笔的选择，橡皮擦，直尺和圆形尺，文字输入和字体选择等都提供了很便捷的支持，而且支持导入和导出数据，可以很方便的创作绘画作品，并能导出和分享给别人。 

下面是 Windows Community Toolkit Sample App 的示例截图和 code/doc 地址：

Windows Community Toolkit Doc - InfiniteCanvas

Windows Community Toolkit Source Code - InfiniteCanvas

Namespace: Microsoft.Toolkit.Uwp.UI.Controls; Nuget: Microsoft.Toolkit.Uwp.UI.Controls;

开发过程

代码结构分析

首先来看 InfiniteCanvas 的代码结构，组成如下：

Commands - InfiniteCanvas 对应的所有命令，包括 redo/undo，Ink，Text 等，如上面示例图中 Toolbar 上所示；Controls - InfiniteCanvas 的主要控件都在这个文件夹里；Drawables - Text 和 Ink 主要的绘制功能在这个文件夹里；JsonConverters - 序列化和反序列化的主要功能，以及自定义的 Ink 属性等；InfiniteCanvas.Events.cs - InfiniteCanvas 的主要事件处理逻辑；InfiniteCanvas.TextBox.cs - InfiniteCanvas 添加文字的文本框控件处理逻辑；InfiniteCanvas.cs - InfiniteCanvas 控件的主要处理逻辑；InfiniteCanvas.xaml - InfiniteCanvas 控件的 XAML 样式文件；

InfiniteCanvas 整体类结构很清晰，每个类的功能也很明确，下面我们选取几个重要的类来做分析。

1.  InfiniteCanvasCreateInkCommand

Command 文件夹的每一个类都比较简单，我们找一个创建 Ink 命令看一下；该类实现了 IInfiniteCanvasCommand 这个接口，实现了 Execute() 和 Undo() 两个方法；Command 初始化也很简单，创建一个 InkDrawable 对象，初始化 drawableList 对象，执行创建时加入该 drawable，撤销时把它从 drawableList 中去掉。

代码语言：javascript代码运行次数：0运行复制

总结

到这里我们就把 Windows Community Toolkit 3.0 中的 InfiniteCanvas 的源代码实现过程讲解完成了，希望能对大家更好的理解和使用这个功能有所帮助。InfiniteCanvas 控件在绘画类场景中有非常多的应用，控件默认实现了多种笔触的绘画，橡皮，文字，redo undo 等重要功能，开发者也可以根据 InfiniteCanvas 的实现自定义 Toolbar 的样式和更多的绘画笔触，不同的笔画保存方式等。

最后，再跟大家安利一下 WindowsCommunityToolkit 的官方微博：https://weibo.com/u/6506046490, 大家可以通过微博关注最新动态。

衷心感谢 WindowsCommunityToolkit 的作者们杰出的工作，感谢每一位贡献者，Thank you so much, ALL WindowsCommunityToolkit AUTHORS !!!

文中关于绘画工具,代码结构,墨迹书写,InfiniteCanvas,文本输入的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《WindowsCommunityToolkit3.0无限画布新体验》文章吧，也可关注golang学习网公众号了解相关技术文章。