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

Updated: at 08:22,Created: at 12:27

本文来告诉大家如何通过 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 文件夹

参考

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

知识共享许可协议

原文链接: http://blog.lindexi.com/post/win10-uwp-%E9%80%9A%E8%BF%87-Win2d-%E5%AE%8C%E5%85%A8%E6%8E%A7%E5%88%B6%E7%AC%94%E8%BF%B9%E7%BB%98%E5%88%B6%E9%80%BB%E8%BE%91

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。 欢迎转载、使用、重新发布，但务必保留文章署名 林德熙 (包含链接: https://blog.lindexi.com )，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我 联系。