收集墨迹

项目
05/04/2023

Windows Presentation Foundation 平台会收集数字墨迹，这是其功能中的核心部分之一。本主题讨论在 Windows Presentation Foundation (WPF) 中收集墨迹的方法。

先决条件

若要使用以下示例，必须先安装 Visual Studio 和 Windows SDK。还应了解如何编写 WPF 的应用程序。有关 WPF 入门的详细信息，请参阅演练：我的第一个 WPF 桌面应用程序。

使用 InkCanvas 元素

System.Windows.Controls.InkCanvas 元素提供在 WPF 中收集墨迹的最简单方式。使用 InkCanvas 元素可接收和显示墨迹输入。通常使用触笔（与数字化仪交互产生墨迹笔画）输入墨迹。此外，还可以使用鼠标代替触笔。创建的笔画表示为 Stroke 对象，它们可以通过编程方式和用户输入方式进行操作。 InkCanvas 允许用户选择、修改或删除现有的 Stroke。

通过使用 XAML，可以轻松设置墨迹收集，就像将 InkCanvas 元素添加到树中一样轻松。以下示例向 Visual Studio 中创建的默认 WPF 项目添加一个 InkCanvas：

<Grid>
  <InkCanvas/>
</Grid>

InkCanvas 元素也可以包含子元素，这样便可以将墨迹批注功能添加到几乎所有类型的 XAML 元素。例如，要将墨迹功能添加到文本元素，只需使其成为 InkCanvas 的子元素即可：

<InkCanvas>
  <TextBlock>Show text here.</TextBlock>
</InkCanvas>

同样，可轻松添加图像墨迹标记支持：

<InkCanvas>
  <Image Source="myPicture.jpg"/>
</InkCanvas>

InkCollection 模式

InkCanvas 通过其 EditingMode 属性提供对各种输入模式的支持。

操作墨迹

InkCanvas 支持许多墨迹编辑操作。例如，InkCanvas 支持笔后端清除功能，且不需使用其他代码将该功能添加到该元素。

选择

设置选择模式与将 InkCanvasEditingMode 属性设置为 Select 一样容易。

下面的代码根据 CheckBox 的值来设置编辑模式：

// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}

' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If

DrawingAttributes

使用 DrawingAttributes 属性更改墨迹笔划的外观。例如，DrawingAttributes 的 Color 成员设置呈现的 Stroke 的颜色。

下面的示例将所选笔划的颜色更改为红色：

// Get the selected strokes from the InkCanvas
StrokeCollection selection = theInkCanvas.GetSelectedStrokes();

// Check to see if any strokes are actually selected
if (selection.Count > 0)
{
    // Change the color of each stroke in the collection to red
    foreach (System.Windows.Ink.Stroke stroke in selection)
    {
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red;
    }
}

' Get the selected strokes from the InkCanvas
Dim selection As StrokeCollection = theInkCanvas.GetSelectedStrokes()

' Check to see if any strokes are actually selected
If selection.Count > 0 Then
    ' Change the color of each stroke in the collection to red
    Dim stroke As System.Windows.Ink.Stroke
    For Each stroke In  selection
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red
    Next stroke
End If

DefaultDrawingAttributes

DefaultDrawingAttributes 属性可提供对在 InkCanvas 中创建的笔画的高度、宽度和颜色等属性的访问。更改 DefaultDrawingAttributes 之后，以后输入到 InkCanvas 中的所有笔划都将使用新的属性值来呈现。

除了在代码隐藏文件中修改 DefaultDrawingAttributes 外，还可以使用 XAML 语法指定 DefaultDrawingAttributes 属性。

下一个示例演示如何设置 Color 属性。若要使用此代码，请在 Visual Studio 中创建名为“HelloInkCanvas”的新 WPF 项目。将 MainWindow.xaml 中的代码替换为以下代码：

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
    Title="Hello, InkCanvas!" Height="300" Width="300"
    >
  <Grid>
    <InkCanvas Name="inkCanvas1" Background="Ivory">
      <InkCanvas.DefaultDrawingAttributes>
        <Ink:DrawingAttributes xmlns:ink="system-windows-ink" Color="Red" Width="5" />
      </InkCanvas.DefaultDrawingAttributes>
    </InkCanvas>

    <!-- This stack panel of buttons is a sibling to InkCanvas (not a child) but overlapping it, 
         higher in z-order, so that ink is collected and rendered behind -->
    <StackPanel Name="buttonBar" VerticalAlignment="Top" Height="26" Orientation="Horizontal" Margin="5">
      <Button Click="Ink">Ink</Button>
      <Button Click="Highlight">Highlight</Button>
      <Button Click="EraseStroke">EraseStroke</Button>
      <Button Click="Select">Select</Button>
    </StackPanel>
  </Grid>
</Window>

然后，将以下按钮事件处理程序添加到 MainWindow 类中的代码隐藏文件：

// Set the EditingMode to ink input.
private void Ink(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a red pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = false;
    inkCanvas1.DefaultDrawingAttributes.Height = 2;
}

// Set the EditingMode to highlighter input.
private void Highlight(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a highlighter pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = true;
    inkCanvas1.DefaultDrawingAttributes.Height = 25;
}

// Set the EditingMode to erase by stroke.
private void EraseStroke(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke;
}

// Set the EditingMode to selection.
private void Select(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Select;
}

复制此代码后，在 Visual Studio 中按 F5，以在调试器中运行该程序。

请注意 StackPanel 是如何将按钮置于 InkCanvas 顶部的。如果尝试在这些按钮顶部使用墨迹，InkCanvas 将收集墨迹并在按钮后面呈现墨迹。这是因为这些按钮是 InkCanvas 的同级，而不是子级。此外，这些按钮的 Z 顺序较高，所以墨迹呈现在其后面。