收集墨迹

项目
12/19/2024

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 元素添加到树中一样轻松地设置墨迹集合。以下示例将 InkCanvas 添加到 Visual Studio 中创建的默认 WPF 项目：

<Grid>
  <InkCanvas/>
</Grid>

InkCanvas 元素还可以包含子元素，因此可以将墨迹注释功能添加到几乎所有类型的 XAML 元素。例如，若要向文本元素添加墨迹书写功能，只需使其成为 InkCanvas的子元素：

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

添加对使用墨迹标记图像的支持同样简单：

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

墨水收集模式

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

操作墨迹

InkCanvas 支持多种墨迹编辑操作。例如，InkCanvas 支持笔背擦除，无需其他代码即可将该功能添加到元素中。

选择

设置选择模式与将 InkCanvasEditingMode 属性设置为选择一样简单。

以下代码基于 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 属性可更改墨迹笔划的外观。例如，Color 成员在 DrawingAttributes 中设置了渲染 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 属性提供对在 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 顺序更高，因此墨迹呈现在它们后面。

通过