win10 uwp 通过 Win2d 完全控制笔迹绘制逻辑

  • A+
所属分类：.NET技术
摘要

本文来告诉大家如何通过 Win2d 完全控制笔迹绘制逻辑，本文适合用来实现复杂的自定义逻辑，可以完全控制笔迹的行为。包括在书写过程中切换模式，如进行手势擦除切换为橡皮擦模式
便宜好用的国外VPS推荐

本文来告诉大家如何通过 Win2d 完全控制笔迹绘制逻辑，本文适合用来实现复杂的自定义逻辑，可以完全控制笔迹的行为。包括在书写过程中切换模式，如进行手势擦除切换为橡皮擦模式

本文提供的方法适合用来做复杂的自定义，本文的方法的优点也是缺点。优点是啥都可以自己控制，缺点是啥都需要自己控制。需要自己处理笔迹的多笔同步问题，处理笔迹的长笔迹分段问题，处理笔迹的绘制问题，处理动态笔迹切换

本文提供的方法依然可以实现非常高性能的笔迹，比 WPF 最快的笔迹实现还要快，但需要自己处理好各个部分的逻辑，如动态笔迹和静态笔迹，笔迹分段等逻辑。本文提供的方法的性能依然不如只使用默认的 InkCanvas 快

界面

在开始之前，请先安装 Win2d 库，可参阅 win10 uwp win2d 入门 看这一篇就够了 博客了解如何安装

在 XAML 界面上加上 xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml" 命名空间，用来导入 Win2d 控件。界面如下

  <Grid Background="#565656">     <canvas:CanvasControl x:Name="Canvas" Draw="Canvas_OnDraw"/>     <InkCanvas x:Name="InkCanvas" />   </Grid>

本文将使用一个 InkCanvas 放在 Win2d 的 CanvasControl 上层，让 InkCanvas 作为快速的事件接收层，让 Win2d 的 CanvasControl 作为实际的绘制层。其实，更好的界面框架是存放两个 Win2d 的 CanvasControl 分别用来存放动态笔迹和静态笔迹。如果自己实现的笔迹没有分动态笔迹和静态笔迹，那么可以忽略，本文为了简洁将不演示动态笔迹和静态笔迹的处理

此时的界面逻辑如下

<Page   x:Class="KeanearkallhawDaherenenallyi.MainPage"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   xmlns:local="using:KeanearkallhawDaherenenallyi"   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   mc:Ignorable="d"   xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <Grid Background="#565656">     <canvas:CanvasControl x:Name="Canvas" Draw="Canvas_OnDraw"/>     <InkCanvas x:Name="InkCanvas" />   </Grid> </Page>

初始化笔迹接收

在构造函数初始化笔迹的接收逻辑，通过 InkCanvas 进行快速的事件接收

        private readonly InkSynchronizer _inkSynchronizer;          public MainPage()         {             this.InitializeComponent();             _inkSynchronizer = InkCanvas.InkPresenter.ActivateCustomDrying();             InkCanvas.InkPresenter.SetPredefinedConfiguration(InkPresenterPredefinedConfiguration                 .SimpleMultiplePointer);             InkCanvas.InkPresenter.InputDeviceTypes =                 CoreInputDeviceTypes.Touch | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Mouse;             InkCanvas.InkPresenter.UnprocessedInput.PointerMoved += UnprocessedInput_PointerMoved;             InkCanvas.InkPresenter.InputProcessingConfiguration.Mode = InkInputProcessingMode.None;             InkCanvas.InkPresenter.InputProcessingConfiguration.RightDragAction =                 InkInputRightDragAction.LeaveUnprocessed;         }

以上的代码里面，只是监听了 UnprocessedInput 的 PointerMoved 事件，事实上需要监听更多的事件用来了解笔迹的绘制开始和完成逻辑。本文为了方便演示，就不详细写所有逻辑

以上各个部分逻辑的含义，请参阅 win10 uwp 通过 win2d 画出笔迹

收集笔迹

在 UnprocessedInput_PointerMoved 将是本文的核心逻辑，在这里通过事件参数了解到当前是哪个手指或笔触摸，以及通过 InkStrokeBuilder 将输入的点构造笔迹

        private void UnprocessedInput_PointerMoved(InkUnprocessedInput sender, Windows.UI.Core.PointerEventArgs args)         {             var id = args.CurrentPoint.PointerId;             // 需要根据 id 分开多个手指              InkStrokeBuilder.SetDefaultDrawingAttributes(new InkDrawingAttributes()             {                 Color = Colors.Blue,                 Size = new Size(5, 5)             });              _currentPointerList.AddRange(args.GetIntermediatePoints());             _inkStroke = InkStrokeBuilder.CreateStrokeFromInkPoints(                 _currentPointerList.Select(t => new InkPoint(t.Position, t.Properties.Pressure)), Matrix3x2.Identity);              Canvas.Invalidate();         }          private readonly List<PointerPoint> _currentPointerList = new List<PointerPoint>();         private InkStroke _inkStroke;          private InkStrokeBuilder InkStrokeBuilder { get; } = new InkStrokeBuilder();

以上代码没有编写的部分是了解当前是由哪个 id 的设备触发的事件，如有多个手指在触摸，那么不同的手指的 id 是不相同的。需要自己创建列表数组进行处理

另外，通过 InkStrokeBuilder 的 CreateStrokeFromInkPoints 创建的 InkStroke 是需要预先在 SetDefaultDrawingAttributes 设置绘制属性的，而不是在创建之后依然可以设置。另外上面代码只使用了一个 InkStroke 字段，实际上需要根据当前是否有多指触摸的需求，使用列表存放多个笔迹

本文以上代码通过 CreateStrokeFromInkPoints 创建是不包含笔迹分段的，也就是说在用户绘制一段长线，将会需要使用较多的计算资源创建笔迹。请在自己的产品逻辑里面，手动分开为多个不同的笔迹段，用来提升性能

上面代码通过调用 CanvasControl 的 Invalidate 让 Win2d 的画布重新绘制。重新绘制会进入 Canvas_OnDraw 方法，将在此方法绘制出笔迹

绘制笔迹

绘制笔迹的方法十分简单，调用 Win2d 的 DrawInk 方法传入笔迹即可

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)         {             if (_inkStroke != null)             {                 args.DrawingSession.DrawInk(new []{_inkStroke});             }         }

为什么在 Win2d 的设计里面，是传入数组？原因是笔迹是需要分段的，多段笔迹可以一起绘制。另外，如果有笔迹分段，那么逻辑上就需要额外的转换为静态笔迹的功能，大概就是将一段连续的多段笔迹合成一段笔迹的过程。建议绘制动态笔迹和静态笔迹放在两个 Win2d 的 CanvasControl 里。这样也能提升笔迹的动态绘制性能，因为笔迹在绘制的时候需要不断调用 Win2d 的刷新，如果此时刷新的是一个只包含很少笔迹的动态笔迹层的画布，那每次刷新的性能就比较好

无限漫游

如果需要做无限漫游，可以使用 CanvasVirtualControl 做一个超级大的画布，同时只画出可见的范围

使用时需要自己转换坐标，可以在 InkStrokeBuilder 的 CreateStrokeFromInkPoints 方法传入缩放和平移的矩阵，此时创建出来的笔迹是包含了变换的

代码

本文所有代码放在github 和 gitee 欢迎访问

可以通过如下方式获取本文的源代码，先创建一个空文件夹，接着使用命令行 cd 命令进入此空文件夹，在命令行里面输入以下代码，即可获取到本文的代码

git init git remote add origin https://gitee.com/lindexi/lindexi_gd.git git pull origin d33e26640f0108ae6bb29b90e7b189a14a92d624

以上使用的是 gitee 的源，如果 gitee 不能访问，请替换为 github 的源

git remote remove origin git remote add origin https://github.com/lindexi/lindexi_gd.git

获取代码之后，进入 KeanearkallhawDaherenenallyi 文件夹

参考

更多笔迹和触摸，请参阅 触摸相关

便宜好用的国外VPS推荐