添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

有两种不同的控件可促进 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 字形作为顶级图标。

    InkToolbar 交互

    所有内置的笔和工具按钮都包含一个浮出控件菜单,可以在该菜单中设置墨迹属性和笔尖形状与大小。 一种“扩展字形”显示在按钮上,以指示存在浮出控件。

    当再次选择活动工具的按钮时,会显示浮出控件。 当颜色或大小更改时,将自动消除浮出控件,并且可以恢复墨迹书写。 自定义笔和工具可以使用默认的浮出控件或指定自定义布局。

    橡皮擦也有提供 擦除所有墨迹 命令的浮出控件。

    有关自定义和可扩展性的信息,请查看 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 & 草图

    创建 InkCanvas 和 InkToolbar

  • 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 墨迹数据
  •