win10 uwp 通过 Win2d 完全控制笔迹绘制逻辑
本文来告诉大家如何通过 Win2d 完全控制笔迹绘制逻辑,本文适合用来实现复杂的自定义逻辑,可以完全控制笔迹的行为。包括在书写过程中切换模式,如进行手势擦除切换为橡皮擦模式
本文提供的方法适合用来做复杂的自定义,本文的方法的优点也是缺点。优点是啥都可以自己控制,缺点是啥都需要自己控制。需要自己处理笔迹的多笔同步问题,处理笔迹的长笔迹分段问题,处理笔迹的绘制问题,处理动态笔迹切换
本文提供的方法依然可以实现非常高性能的笔迹,比 WPF 最快的笔迹实现还要快,但需要自己处理好各个部分的逻辑,如动态笔迹和静态笔迹,笔迹分段等逻辑。本文提供的方法的性能依然不如只使用默认的 InkCanvas 快
界面
在开始之前,请先安装 Win2d 库,可参阅 win10 uwp win2d 入门 看这一篇就够了 博客了解如何安装
在 XAML 界面上加上
xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"命名空间,用来导入 Win2d 控件。界面如下
<Grid Background="# 56c 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>56c
初始化笔迹接收
在构造函数初始化笔迹的接收逻辑,通过 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.DrawingSess 15a8 ion.DrawInk(new []{_inkStroke}); } }
为什么在 Win2d 的设计里面,是传入数组?原因是笔迹是需要分段的,多段笔迹可以一起绘制。另外,如果有笔迹分段,那么逻辑上就需要额外的转换为静态笔迹的功能,大概就是将一段连续的多段笔迹合成一段笔迹的过程。建议绘制动态笔迹和静态笔迹放在两个 Win2d 的 CanvasControl 里。这样也能提升笔迹的动态绘制性能,因为笔迹在绘制的时候需要不断调用 Win2d 的刷新,如果此时刷新的是一个只包含很少笔迹的动态笔迹层的画布,那每次刷新的性能就比较好
无限漫游
如果需要做无限漫游,可以使用 CanvasVirtualControl 做一个超级大的画布,同时只画出可见的范围
使用时需要自己转换坐标,可以在 InkStrokeBuilder 的 CreateStrokeFromInkPoints 方法传入缩放和平移的矩阵,此时创建出来的笔迹是包含了变换的
代码
可以通过如下方式获取本文的源代码,先创建一个空文件夹,接着使用命令行 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 文件夹
参考
更多笔迹和触摸,请参阅 触摸相关
- 通过游戏逻辑对骨骼动画角色的局部骨骼进行控制,让游戏角色更加生动有趣!
- UWP开发入门(25)——通过Radio控制Bluetooth, WiFi
- 一种强大、灵活的方法,通过游戏逻辑参数化的控制特效表现
- [记录]通过ssh由win10控制安卓termux使用metasploit搞事情
- 写程序 控制cpu占用率-4 绘制CPU使用率的正弦曲线2 通过C#指定线程运行的 CPU
- Win10 UWP开发中的重复性静态UI绘制小技巧 2
- 通过js判断访问来自移动端还是pc端从而去控制事件的逻辑或者元素的显示
- 【UWP开发】如何通过unity发布win10 uwp应用
- 不通过数据源完全控制MDB数据库
- Win10 UWP开发中的重复性静态UI绘制小技巧 1
- Win10 UWP开发中的重复性静态UI绘制小技巧 2
- ORACLE只有表空间文件通过重建控制文件进行不完全恢复
- Spring:完全通过程序控制Spring事务
- 通过游戏逻辑对骨骼动画角色的局部骨骼进行控制,让游戏角色更加生动有趣!
- Win10 UWP开发中的重复性静态UI绘制小技巧 1
- C#上位机通过TCP/IP完全控制YAMAHA四轴机器人开发
- 能完全通过声音控制的,除了你家楼道里的灯泡,原来还有这么多产品
- 无人驾驶,PID 控制,代码示例。通过简单的代码来理解PID控制的逻辑。
- 不通过数据源完全控制MDB数据库
- win10通过vnc远程控制ubuntu桌面