WINDOWS 10 2015 年特别版
此文章由机器翻译。
# 数字墨迹 - Windows 10 中的墨迹交互
通过 [Connor Weins](https://msdn.microsoft.com/zh-cn/magazine/mt149362?author=Connor+Weins) |Windows 2015 年
在本文中,我将介绍如何将提升自然的用户交互使用墨迹书写。数字墨迹,很像在纸上、 笔从您的数字笔设备、 笔针、 手指或鼠标的提示将排并呈现在屏幕上。若要获取开始与数字墨迹和手写 Windows 10 中,我将首先通过解决基本问题: 为什么是您必须在您的应用程序中使用墨迹?
人类具有已传达的想法和创意通过手写世纪。尽管鼠标和键盘的发明,笔和纸方法仍扮演着关键角色在我们的生活中 — 从粘滞便笺的步骤和我们的办公室中我们学校笔记本和我们的孩子他人之手着色丛书中的白板。
笔和纸是即时、 自由格式且唯一个人到我们每一个人,这使得用户可利用来表示他们的创造力和情感的理想选择。将想法转换成文本和到笔记的关系图的 act 还会使手写更适合进行思考、 记忆和学习,根据 2013年研究发布到心理科学中 ([bit.ly/1tKDrhv](http://bit.ly/1tKDrhv))、 从普林斯顿和 UCLA 研究人员在其中找到手写的便笺已明显优于类型化的说明为长期的理解。
与传统的类型化的键盘输入的墨迹这些优点,设想一下是否您可能会使手写笔和纸和工具一样容易的设备上的计算机的处理能力来执行现实生活中您不能执行的操作。使用数字墨迹,您可以轻松地改变颜色和墨迹的外观就像在现实生活中,而采用其基础上更进一步、 分析的内容和形状的手写内容来提供元数据,或将墨迹转换为其他内容,如文本、 图形或命令。它提供了您的日常 notebook,使数字墨迹绘图、 笔记记录批注以及在您的应用程序进行交互的功能强大的工具不能复制到的墨迹书写的全新维度。随着支持笔和触摸的设备市场不断扩大,墨迹书写将成为用户和应用程序开发人员交互的一个关键方法。
在 Windows 10 中,是便于您能够将您的应用程序通过 DirectInk 平台到数字墨迹书写。DirectInk 提供了一套丰富且可扩展 Windows 运行时 (WinRT) 允许您收集、 呈现和管理在通用 Windows 平台应用程序中的墨迹的 Api。通过使用 DirectInk,您可以获得的同一个很好的手写内容和 Microsoft 边缘浏览器,通用 OneNote 和手写板使用的性能。下面是 DirectInk 提供您的应用程序的功能的快速概述:
* 既美观又具备手写内容: DirectInk 使用输入平滑处理并贝塞尔呈现算法以确保您的手写内容始终看起来清晰和漂亮的触摸和笔输入。
* 低延迟、 内存不足: DirectInk 使用高优先级后台线程和输入的预测以确保手写内容始终是即时且对用户的响应能力和它所管理资源,有效地以保持您的应用程序开销较低。
* 简单而又可扩展的 API 图面: DirectInk 提供了 Api (如 InkCanvas 和 InkPresenter,允许您快速地开始收集和管理墨迹,并提供允许您构建您的应用程序中的丰富而复杂的功能的高级的功能。
希望目前为止您非常高兴地开始在您的应用程序中使用数字墨迹。现在将一看如何在您的应用程序中利用 DirectInk 平台并为用户提供更完美的墨迹书写体验。
## 收集应用程序中的墨迹
若要开始使用数字墨迹,第一步是设置了一个可以收集和呈现为墨迹输入面。在 Windows 8.1 应用商店应用程序中引入到您的应用程序的墨迹书写时涉及到创建一个画布,侦听事件,以及如何创建和呈现笔画--逐一使用您自己的呈现代码输入一个扩展的过程。对于通用 Windows 应用程序,以收集手写内容的开头是像将 InkCanvas 放到您的应用程序一样简单:
~~~
<Grid>
<InkCanvas x:Name="myInkCanvas"/>
</Grid>
~~~
如您所见中 图 1, ,这行代码为您提供开始收集的笔输入和输入为黑色圆珠笔的呈现的透明覆盖。将笔橡皮擦按钮还将擦除它自带联系任何收集的手写内容。尽管这是很好的入门知识的墨迹书写,如果想要更改墨迹收集或显示如何?
![](https://box.kancloud.cn/2016-01-08_568f407143fc9.png)
图 1 使用 InkCanvas 以收集手写内容类似于黑色圆珠笔
通过 InkCanvas,您可以访问您的 InkPresenter,公开用于控制外观和墨迹的输入的配置的功能。虽然笔输入提供了最佳的用户体验的墨迹书写,许多系统不会配备用笔。只需将会收集笔、 触摸和鼠标输入和您没有选择的输入的类型的任意组合的墨迹 InkPresenter 允许传递作为到 InkCanvas XAML 元素的指针事件。通过 InkPresenter,还可以管理绘图的墨水在 InkCanvas,从而允许您更改画笔大小、 颜色及更多内容上收集的属性的默认值。这些功能的示例,作为您的应用程序可以将配置您 InkCanvas 以收集手写笔、 触摸和鼠标输入,并通过执行以下操作模拟书法画笔:
~~~
InkPresenter myPresenter = myInkCanvas.InkPresenter;
myPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Pen |
Windows.UI.Core.CoreInputDeviceTypes.Touch |
Windows.UI.Core.CoreInputDeviceTypes.Mouse;
InkDrawingAttributes myAttributes = myPresenter.CopyDefaultDrawingAttributes();
myAttributes.Color = Windows.UI.Colors.Crimson;
myAttributes.PenTip = PenTipShape.Rectangle;
myAttributes.PenTipTransform =
System.Numerics.Matrix3x2.CreateRotation((float) Math.PI/4);
myAttributes.Size = new Size(2,6);
myPresenter.UpdateDefaultDrawingAttributes(myAttributes);
~~~
程序将生成结果中所示 图 2。
![](https://box.kancloud.cn/2016-01-08_568f40715c4e9.png)
图 2 模拟书法画笔使用 InkPresenter DrawingAttributes
DirectInk 支持许多内置了更多配置输入和手写内容呈现允许您呈现作为荧光笔墨迹、 接收事件收集笔画时、 访问细粒度的输入的事件和墨迹具有高级配置中的多个指针。
## 编辑、 保存和加载墨迹
因此既然您已经收集一些墨迹,什么您如何使用它? 用户经常需要擦除或编辑的墨迹收集它们,或保存以后访问该手写内容的能力。为了给您的用户提供这种体验,您必须以访问和修改 DirectInk 已呈现在屏幕的笔画的墨迹数据。
在您 InkCanvas 上不会收集手写内容,DirectInk 内 InkPresenter InkStrokeCollection 内存储它。此 InkStrokeCollection 包含 WinRT 对象来表示每个当前在您画布上的笔画和更改对此容器进行了您的应用程序,它们将还将呈现在屏幕上。这允许您以编程方式添加、 删除或修改笔画,并允许 DirectInk 可帮助您了解到在屏幕上的笔画它做的任何更改。让我们看看一些常见的用户交互可以实现使用 InkPresenter 和其 InkStrokeContainer 之间的连接。
Erasing 虽然 InkCanvas 支持擦除使用笔橡皮擦按钮默认情况下,但它需要在 InkPresenter 清除墨迹的鼠标和触摸输入一些配置。DirectInk 提供内置支持擦除通过 InputProcessingConfiguration 中的模式属性的任何受支持的输入的墨迹。下面是举例说明如何将 Erasing 模式设置为一个按钮:
~~~
private void Eraser_Click(object sender,
RoutedEventArgs e)
{
myInkCanvas.InkPresenter.
InputProcessingConfiguration.Mode =
InkInputProcessingMode.Erasing;
}
~~~
按下此按钮时,DirectInk 收集 InkCanvas 的所有输入将被都视为橡皮擦。如果设置此模式后,用户输入与笔画相交,则将从 InkPresenter InkStrokeContainer 中删除该笔划,并将其从屏幕上删除。当使用笔墨迹书写模式下的,橡皮擦按钮将始终被视为擦除模式。
选择 遗憾的是,DirectInk 不具有对这一次,在内置的选定内容的支持,但它确实提供了一种方法来通过未处理的输入事件自己开发。只要 DirectInk 收到告诉侦听,但不是能呈现到墨迹输入引发未处理的事件。这可以通过设置处理配置模式下为无 DirectInk 完成对所有输入并还可以配置为发生这种情况仅用于鼠标右按钮和笔笔杆按钮使用 RightDragAction 属性:
~~~
myInkCanvas.InkPresenter.InputProcessingConfiguration.RightDragAction =
InkInputRightDragAction.LeaveUnprocessed;
~~~
例如, 图 3 显示了如何使用未处理的输入事件以使所选内容套索 (如中所示 图 4) 选择在屏幕上的笔画。
图 3 使用未处理的输入的事件以使所选内容套索
~~~
...
myInkCanvas.InkPresenter.UnprocessedInput.PointerPressed += StartLasso;
myInkCanvas.InkPresenter.UnprocessedInput.PointerMoved += ContinueLasso;
myInkCanvas.InkPresenter.UnprocessedInput.PointerReleased += CompleteLasso;
...
private void StartLasso(
InkUnprocessedInput sender,Windows.UI.Core.PointerEventArgs args)
{
selectionLasso = new Polyline()
{
Stroke = new SolidColorBrush(Windows.UI.Colors.Black),
StrokeThickness = 2,
StrokeDashArray = new DoubleCollection() { 7, 3},
};
selectionLasso.Points.Add(args.CurrentPoint.RawPosition);
AddSelectionLassoToVisualTree();
}
private void ContinueLasso(
InkUnprocessedInput sender, Windows.UI.Core.PointerEventArgs args)
{
selectionLasso.Points.Add(args.CurrentPoint.RawPosition);
}
private void CompleteLasso(
InkUnprocessedInput sender, Windows.UI.Core.PointerEventArgs args)
{
selectionLasso.Points.Add(args.CurrentPoint.RawPosition);
bounds =
myInkCanvas.InkPresenter.StrokeContainer.SelectWithPolyLine(
selectionLasso.Points);
DrawBoundingRect(bounds);
}
~~~
![](https://box.kancloud.cn/2016-01-08_568f407179cf5.png)
图 4 选择使用套索笔画
您选择的笔画后,可以使用 InkStrokeContainer.MoveSelected 方法来转换笔画,或使用 InkStroke.PointTransform 属性将仿射转换应用于这些笔画。以这种方式转换描边或笔画 InkStrokeContainer 由管理组时, DirectInk 将拾取这些更改并呈现到屏幕。
保存和加载 DirectInk 本身支持手写内容保存并加载通过墨迹序列化格式 (ISF),它将手写内容保存在矢量格式使其成为共享和编辑、 更简单。这是通过 InkStrokeContainer SaveAsync 和 LoadAsync 函数可访问。
SaveAsync 采用当前存储在 InkStrokeContainer 的笔画数据并将其保存为 GIF 文件与嵌入 ISF 数据。图 5 演示如何将手写内容保存从您 InkStrokeContainer。
图 5 将手写内容保存从 InkStrokeContainer
~~~
var savePicker = new FileSavePicker();
savePicker.SuggestedStartLocation =
Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
savePicker.FileTypeChoices.Add("Gif with embedded ISF",
new System.Collections.Generic.List<string> { ".gif" });
StorageFile file = await savePicker.PickSaveFileAsync();
if (null != file)
{
try
{
using (IRandomAccessStream stream =
await file.OpenAsync(FileAccessMode.ReadWrite))
{
await myInkCanvas.InkPresenter.StrokeContainer.SaveAsync(stream);
}
}
catch (Exception ex)
{
GenerateErrorMessage();
}
}
~~~
LoadAsync 将执行相反的函数中,清除已在您 InkStrokeContainer 笔画,并从 ISF 文件或 GIF 文件与嵌入 ISF 数据加载一组新的笔画。笔画载入 InkStrokeContainer 后,DirectInk 自动将呈现它们在屏幕上。
## 高级墨迹书写功能
开发带有手写内容的用户交互的关键能够编辑和处理在屏幕上的手写内容时,它可能不是不足以满足您的需要。更多创意希望您的应用程序以支持交互,您的应用程序将具有以中断的交互 DirectInk 提供了一组默认的越多。让我们深入了解 DirectInk 使您能够构建丰富而独特的手写功能的方式的少数几个:
墨迹书写识别 墨迹是不止是在屏幕上的像素。用户的墨迹可以解释为图片、 关系图、 形状或文本。识别用户的墨迹的内容,可将手写内容相关联以致其意义或交换与它所代表的内容的墨迹。例如,如果用户在笔记记录应用程序中编写文本,您的应用程序可以识别手写内容表示,用于当用户搜索栏中输入一个查询时生成搜索结果中使用该文本数据的文本。InkRecognizerContainer 供电意识到这种方式中的文本。图 6 演示如何使用 InkRecognizerContainer 以将手写内容解释为简体中文字符。
图 6 使用 InkRecognizerContainer 简体中文字符作为解释笔迹
~~~
async void OnRecognizeAsync(object sender, RoutedEventArgs e)
{
InkRecognizerContainer recoContainer = new InkRecognizerContainer();
IReadOnlyList<InkRecognizer> installedRecognizers =
recoContainer.GetRecognizers();
foreach (InkRecognizer recognizer in installedRecognizers)
{
if (recognizer.Name.Equals("Microsoft 中文(简体)手写识别器"))
{
recoContainer.SetDefaultRecognizer(recognizer);
break;
}
}
var results = await recoContainer.RecognizeAsync(
myInkCanvas.InkPresenter.StrokeContainer,InkRecognitionTarget.All);
if (results.Count > 0)
{
string str = "Result:";
foreach (var r in results)
{
str += " " + r.GetTextCandidates()[0];
}
}
}
~~~
而这将允许你将手写内容识别为文本,InkRecognizerContainer 在于它当前支持从仅 33 不同的语言包的识别文本有限制。如果您想要识别从另一种语言的文本或识别符号、 图形或其他更抽象的墨迹解释,您需要构建该逻辑从零开始。幸运的是,该 InkStroke 对象所提供 GetInkPoints 函数,使你能获取 x / y 位置的每个输入点用于构造与笔画。据此,您可以构建一种算法来分析笔划的输入的点或一组笔划并随意对其进行解释 — 为符号,形状、 命令或您的想象力的任何能想到的 !
独立输入 DirectInk 是一种功能强大的引擎为在一组简单的输入的规则下运行的呈现墨迹 — 呈现一个给定的笔划的墨迹或不。若要使此决定,它看起来在受支持的输入的类型的输入处理模式提供配置和右拖放操作配置。这缺少了大量您的应用程序可能想要提供的墨迹书写的上下文 — 您的应用程序可能不允许在画布上的某些部分中的墨迹书写或可能有手势的墨迹书写应在停止后识别出的笔势。若要启用您做出这样的决策,DirectInk 提供输入之前它将开始处理通过独立输入事件的访问权限。这些事件使您能够之前 DirectInk 因此如果不允许的墨迹书写区域或完成手势移动事件中收到一个按下的事件您期盼已久的只是可以将标记该事件作为 Handled 已呈现它,检查输入。
DirectInk 时该事件被标记为 Handled,将停止处理笔画,并且如果一个笔划已过程中,它将取消并从屏幕上删除。您需要时使用这些事件,但请务必小心。它们而不是 UI 线程的 DirectInk 后台线程上发生了,因为任何处理工作繁重您在执行操作的事件或等待如 UI 线程可能会引入会影响您的手写内容的响应能力的滞后时间在速度较慢的线程中运行的活动。
自定义干 DirectInk 最复杂的功能之一是烘干自定义的模式,它允许您的应用程序来呈现和管理已完成或"干"墨迹笔画时让 DirectInk 处理正在进行的高性能呈现、 您自己 DirectX 表面上或"湿"墨迹笔画。虽然 DirectInk 的默认烘干模式可以处理大多数情况下可能需要在您的应用程序中启用,但是了几种方案需要您可以独立地管理墨迹:
* 在保持 z 顺序的同时交替墨迹和非手写内容 (文本、 形状)
* 高性能平移和缩放到大型墨迹画布上具有大量墨迹笔画
* 转换为直线或形状类似的 DirectX 对象以同步方式烘干墨迹
在 Windows 10 自定义烘干模式支持与 SurfaceImageSource (SIS) 或 VirtualSurfaceImageSource (VSI) 同步。SIS 和 VSI 提供您的应用程序绘制到和撰写,DirectX 共享图面虽然 VSI 提供了虚拟的表面大于平移和缩放的高性能的屏幕。当手写内容呈现到 SIS 或 VSI,视觉对象更新到这些表面会同步到 XAML UI 线程上,因为它可以删除从 DirectInk 湿层同时。自定义 Drying 也支持烘干墨迹转换为 SwapChainPanel 但并不能保证同步。因为 SwapChainPanel 不与 UI 线程同步的则将有之间小重叠时手写内容呈现给您 SwapChainPanel 而当从 DirectInk 湿手写内容图层中删除手写内容。
时您激活烘干自定义时,你会获得的许多功能都 DirectInk 提供默认情况下,允许您以构建呈现和从您干的图面中删除手写内容的方式的逻辑并确定如何将墨迹笔划数据管理您的应用程序的精细控制。为了帮助您生成此项功能,许多 DirectInk 组件都可用作独立对象以填充空白帮助您的应用程序。自定义烘干激活时,DirectInk 提供了一个 InkSynchronizer 对象,它允许您开始和结束烘干过程以便墨迹删除从 DirectInk 湿层与同步时将其添加到您的自定义干层。DirectInk 默认干墨呈现逻辑它也可通过 InkD2DRender 以确保墨迹外观湿和干层之间保持一致。有关擦除,可以使用未处理的输入事件生成擦除逻辑类似于前面的示例。
有关详细信息和使用自定义烘干的示例,请查看 ComplexInk 示例可在 GitHub 上 [bit.ly/1NkRjt7](http://bit.ly/1NkRjt7)。
## 开始创建具有墨迹
使用您已了解到目前为止有关 InkCanvas、 InkPresenter 和 InkStrokeContainer 中,您现在可以收集手写内容的不同类型的输入,自定义如何显示的墨迹在屏幕上访问笔画数据并具有对笔画数据的更改会反映在由 DirectInk 呈现墨迹笔划。与该简单级别的功能,您可以构建范围广泛的用户交互,从简单灵机一动详细专注于方案的功能,例如笔记记录和收集用户的签名。您还可以用于构建更复杂的交互通过 InkRecognizerContainer,独立的输入事件和自定义烘干模式下的工具。
使用可供您使用这些工具,您的应用程序应该能够利用所有数字墨迹可以提供给您的用户提供更完美的墨迹书写体验的优势。随着的笔和触控启用的设备数量不断增加,为客户提供更完美的墨迹书写体验将变得更为重要的用户的满意度和应用程序的区分作用。希望您可能需要一些时间想有关数字墨迹书写程序可以在您的应用程序中工作并开始试验 DirectInk。
最后请注意,墨迹书写仍然是 microsoft 的投资的重要区域以及对改进的最大密钥之一并展开针对将来版本的 DirectInk 平台是我们的开发人员社区的反馈。如果在使用 DirectInk 进行开发时有任何疑问、 意见或想法,请将它们发送到 [DirectInk@microsoft.com](mailto:DirectInk@microsoft.com)。
* * *
Connor Weins *是处理笔触笔和墨迹书写 Windows 开发人员生态系统平台组中的团队的项目经理。与他联系 [conwei@microsoft.com](mailto:conwei@microsoft.com)。*
- 介绍
- Microsoft .NET - .NET 和通用 Windows 平台开发
- 图形和动画 - Windows 组合支持 10 倍缩放
- 应用生命周期 - 通过后台任务和扩展执行使应用处于活动状态
- 通知 - Windows 10 中的自适应和交互式通知
- 应用集成 - 在 Windows 10 上链接和集成应用
- Visual Studio 工具 - NuGet 功能增强了 Windows 10 的开发功能
- UI 设计 - 通用 Windows 应用的响应式设计
- UI 设计 - 适用于 Windows 10 的自适应应用
- 数字墨迹 - Windows 10 中的墨迹交互
- 游戏开发 - 使用 Unity 为通用 Windows 平台编写游戏
- 结束语 - 欢迎使用 Windows 10 应用开发
- 编者寄语 - 从 3.0 开始的发展之路