收集墨迹

2011-08-12

Windows Presentation Foundation 平台将收集数字墨迹作为其核心功能。本主题讨论在 Windows Presentation Foundation (WPF) 中收集墨迹的方法。

先决条件

若要使用下面的示例，首先必须安装 Microsoft Visual Studio 2005 和 Windows SDK。还应了解如何编写 WPF 应用程序。有关 WPF 入门的更多信息，请参见演练：开始使用 WPF。

使用 InkCanvas 元素

InkCanvas 元素提供了在 WPF 中收集墨迹的最简单方式。 InkCanvas 元素类似于 Tablet PC SDK 1.7 及早期版本中的 InkOverlay 对象。

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

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

<Grid>
  <InkCanvas/>
</Grid>

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

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

可轻松添加对使用墨迹标记图像的支持。

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

InkCollection 模式

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

操作墨迹

InkCanvas 对多种墨迹编辑操作提供支持。例如，InkCanvas 支持笔清除功能，不需要其他代码来将该功能添加到该元素。

Selection

设置选择模式与将 InkCanvasEditingMode 属性设置为 Select 一样容易。下面的代码根据 CheckBox 的值来设置编辑模式。

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

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

DrawingAttributes

使用 DrawingAttributes 属性可更改墨迹笔画的外观。例如，DrawingAttributes 的 Color 成员可设置呈现的 Stroke 的颜色。下面的示例将所选笔画的颜色更改为红色。

' 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

// 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;
    }
}

DefaultDrawingAttributes

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

除了在代码隐藏文件中修改 DefaultDrawingAttributes 外，还可以使用 XAML 语法指定 DefaultDrawingAttributes 属性。下面的 XAML 代码演示如何设置 Color 属性。若要使用此代码，请在 Visual Studio 2005 中创建名为“HelloInkCanvas”的新 WPF 项目。使用下面的代码替换 Window1.xaml 文件中的代码。

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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>

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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>

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

' Set the EditingMode to ink input.
Private Sub Ink(ByVal sender As Object, ByVal e As RoutedEventArgs) 

    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink

    ' Set the DefaultDrawingAttributes for a red pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = False
    inkCanvas1.DefaultDrawingAttributes.Height = 2

End Sub 'Ink

' Set the EditingMode to highlighter input.
Private Sub Highlight(ByVal sender As Object, ByVal e As RoutedEventArgs) 

    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink

    ' Set the DefaultDrawingAttributes for a highlighter pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = True
    inkCanvas1.DefaultDrawingAttributes.Height = 25

End Sub 'Highlight


' Set the EditingMode to erase by stroke.
Private Sub EraseStroke(ByVal sender As Object, ByVal e As RoutedEventArgs) 

    inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke

End Sub 'EraseStroke

' Set the EditingMode to selection.
Private Sub [Select](ByVal sender As Object, ByVal e As RoutedEventArgs) 

    inkCanvas1.EditingMode = InkCanvasEditingMode.Select

End Sub 'Select

// 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;
}

复制此代码后，在 Microsoft Visual Studio 2005 中按**“F5”**，在调试器中运行该程序。

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

请参见

参考

DrawingAttributes

DefaultDrawingAttributes()

System.Windows.Ink

通过

收集墨迹

先决条件

使用 InkCanvas 元素

InkCollection 模式

操作墨迹

Selection

DrawingAttributes

DefaultDrawingAttributes

请参见

参考

其他资源