有两种不同的控件可促进 Windows 应用中的墨迹书写:
InkCanvas
和
InkToolbar
。
InkCanvas 控件将笔输入呈现为笔划墨迹(使用颜色和粗细的默认设置)或擦除笔划。 此控件是一个透明的覆盖层,该覆盖层不包含任何用于更改默认笔划墨迹属性的内置 UI。
InkCanvas 可以配置为针对鼠标和触控输入支持类似功能。
由于 InkCanvas 控件不包括对更改默认笔划墨迹设置的支持,因此它可以与 InkToolbar 控件配对。 InkToolbar 包含一组可自定义和可扩展的按钮,用于在关联的 InkCanvas 中激活墨迹相关的功能。
默认情况下,InkToolbar 包括用于绘制、擦除、突出显示和显示标尺的按钮。 根据功能,在浮出控件中提供其他设置和命令,如墨迹颜色、笔划粗细、擦除所有墨迹。
InkToolbar 支持笔和鼠标输入,并且可配置为识别触控输入。
这是正确的控件吗?
当你需要在应用中支持基本墨迹书写,而不向用户提供任何墨迹设置时,请使用 InkCanvas。
默认情况下,使用笔尖(粗细为 2 个像素的黑色圆珠笔)时笔划呈现为墨迹,使用橡皮擦尖时笔划呈现为橡皮擦。 如果橡皮擦尖不存在,则 InkCanvas 可配置为将来自笔尖的输入作为擦除笔划处理。
将 InkCanvas 与 InkToolbar 配对以提供用于激活墨迹功能和设置基本墨迹属性(如笔划大小、颜色和笔尖形状)的 UI。
若要在 InkCanvas 上对笔划墨迹呈现进行更广泛的自定义,请使用基础的
InkPresenter
对象。
InkToolbar 包含以下内置按钮:
圆珠笔:使用圆形笔尖绘制实心、不透明的笔划。 笔划大小取决于检测到的笔压力。
铅笔 - 使用圆形笔尖绘制边缘柔化、带纹理且半透明的笔划(适用于分层的着色效果)。 笔划颜色(暗度)取决于检测到的笔压力。
荧光笔:使用矩形笔尖绘制半透明笔划。
你可以为每支笔在浮出控件中自定义调色板和大小属性(最小值、最大值、默认值)。
橡皮擦:删除接触到的任何墨迹笔划。 请注意,将检测到整个笔划墨迹,而不仅仅是擦除笔划下的部分。
标尺:显示或隐藏标尺。 在标尺边缘附近绘制会导致墨迹笔划贴靠到标尺上。
尽管这是默认配置,但对于为你的应用将哪些内置按钮包含在 InkToolbar 中,你具有完全的控制权。
InkToolbar 由两组不同的按钮类型组成:
一组“工具”按钮,包含内置绘制、擦除和突出显示按钮。 在此处添加自定义的笔和工具。
功能选择相互排斥。
一组“切换”按钮,包含内置标尺按钮。 在此处添加自定义切换。
功能相互不排斥,并且可以与其他活动工具同时使用。
根据你的应用程序和所需的墨迹书写功能,你可以将以下任意按钮(绑定到你的自定义墨迹功能)添加到 InkToolbar:
自定义笔:由主机应用为其定义墨迹调色板和笔尖属性(如形状、旋转和大小)的笔。
自定义工具:非笔工具,由主机应用定义。
自定义切换:将应用定义的功能状态设置为开或关。 当打开时,功能将与活动工具结合使用。
你无法更改内置按钮的显示顺序。 默认的显示顺序为:圆珠笔、铅笔、荧光笔、橡皮擦和标尺。 自定义笔附加到最后一个默认笔,自定义工具按钮添加到最后一个笔按钮和橡皮擦按钮之间,而自定义切换按钮添加到标尺按钮之后。 (自定义按钮按照指定它们的顺序添加。)
尽管 InkToolbar 可以是最高级别项目,但它通常通过“墨迹书写”按钮或命令公开。 我们建议使用 Segoe MLD2 Assets 字体中的 EE56 字形作为顶级图标。
所有内置的笔和工具按钮都包含一个浮出控件菜单,可以在该菜单中设置墨迹属性和笔尖形状与大小。 一种“扩展字形”显示在按钮上,以指示存在浮出控件。
当再次选择活动工具的按钮时,会显示浮出控件。 当颜色或大小更改时,将自动消除浮出控件,并且可以恢复墨迹书写。 自定义笔和工具可以使用默认的浮出控件或指定自定义布局。
橡皮擦也有提供
擦除所有墨迹
命令的浮出控件。
有关自定义和可扩展性的信息,请查看
SimpleInk 示例
。
InkCanvas 和通常的墨迹书写可通过主动笔获得最佳体验。 但是,如果应用需要,我们建议支持使用鼠标和触控(包括被动笔)输入的墨迹书写。
将 InkToolbar 控件与 InkCanva 结合使用来提供基本墨迹书写功能和设置。 InkCanvas 和 InkToolbar 均可以采用编程方式自定义。
InkToolbar 和通常的墨迹书写可通过主动笔获得最佳体验。 但是,如果应用需要,可以支持使用鼠标和触控的墨迹书写。
如果支持使用触控输入的墨迹书写,我们建议为切换按钮使用“Segoe MLD2 Assets”中的“ED5F”图标,并附带“触摸写入”工具提示。
如果提供笔划选择,我们建议为工具按钮使用“Segoe MLD2 Assets”字体中的“EF20”图标,并附带“选择”工具提示。
如果使用多个 InkCanvas,我们建议使用单个 InkToolbar 控制跨画布的墨迹书写。
为了实现最佳性能,我们建议更改默认的浮出控件,而不是为默认和自定义工具都创建一个自定义浮出控件。
Microsoft Edge
Microsoft Edge 针对“Web 笔记”使用 InkCanvas 和 InkToolbar。
Windows Ink 工作区
InkCanvas 和 InkToolbar 也用于
Windows Ink 工作区
中的
Snip & 草图
。
UWP API:
InkCanvas 类
、
InkToolbar 类
、
InkPresenter 类
、
Windows。UI。Input.Inking
打开 WinUI 2 库应用,查看 InkingControls 的操作
。
WinUI 2 库
应用包含大多数 WinUI 2 控件、特性和功能的交互式示例。 通过
Microsoft Store
获取应用,或在
GitHub
上获取源代码。
将 InkCanvas 添加到应用只需一行标记:
<InkCanvas x:Name="myInkCanvas"/>
有关使用 InkPresenter 进行的详细的 InkCanvas 自定义,请参阅“Windows 应用中的笔交互和 Windows Ink”一文。
InkToolbar 控件必须与 InkCanvas 结合使用。 将 InkToolbar(以及所有内置工具)合并到应用需要一行额外的标记:
<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>
这显示以下 InkToolbar:
获取示例代码
SimpleInk 示例 - 演示关于 InkCanvas 和 InkToolbar 控件的自定义和扩展性功能的 8 个方案。 每个方案都提供了有关常见墨迹书写和控件实现的基本指南。
ComplexInk 示例 - 演示更高级的墨迹书写方案。
WinUI 2 库示例 - 查看交互式格式的所有 XAML 控件。
Windows 应用中的笔交互和 Windows Ink
将 Windows Ink 笔划识别为文本和形状
存储和检索 Windows Ink 墨迹数据