Сбор рукописных данных

Статья
11/05/2008

Обновлен: Ноябрь 2007

Платформа Windows Presentation Foundation (WPF) выполняет сбор цифровых рукописных данных в качестве основной части своих функциональных возможностей. В этом разделе обсуждаются методы сбора рукописных данных в приложении WPF (Windows Presentation Foundation).

Необходимые компоненты

Чтобы использовать следующие примеры, необходимо сначала установить Microsoft Visual Studio 2005 и Windows SDK. Следует также иметь представление о создании приложений для WPF. Дополнительные сведения о начале работы с приложением WPF см. в разделе Введение в Windows Presentation Foundation.

Использование элемента InkCanvas

Элемент InkCanvas предоставляет простой способ сбора рукописных данных в приложении WPF. Элемент InkCanvas похож на объект InkOverlay из Пакет SDK 1.7 для планшетных ПК и более ранних версий.

Используйте элемент InkCanvas для получения и отображения ввода рукописных данных. Обычно ввод рукописных данных осуществляется с использованием пера, которое взаимодействует с дигитайзером для создания рукописных штрихов. Кроме того, в качестве пера можно использовать мышь. Созданные штрихи представлены как объекты Stroke, и ими можно управлять программно или путем ввода данных пользователем. Объект InkCanvas позволяет пользователям выбирать, изменять или удалять существующие объекты Stroke.

Используя язык XAML, можно настроить коллекцию рукописных данных так же легко, как добавить элемент InkCanvas к дереву. В следующем примере добавляется объект InkCanvas в проект WPF по умолчанию, созданный в среде Microsoft Visual Studio 2005.

<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 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 для изменения внешнего вида рукописных штрихов. Например, член Color объекта DrawingAttributes задает цвет отображаемого объекта 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. Чтобы использовать этот код, создайте новый проект WPF с именем «HelloInkCanvas» в Visual Studio 2005. Замените код в файле Window1.xaml следующим кодом:

<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>

<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>

Затем добавьте следующие обработчики событий кнопки к файлу фонового кода внутри класса 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;
}

После копирования этого кода нажмите клавишу F5 в Microsoft Visual Studio 2005 для запуска программы в отладчике.

Обратите внимание, как элемент управления StackPanel размещает кнопки в верхней части объекта InkCanvas. При попытке рукописного ввода данных поверх кнопок элемент управления InkCanvas собирает и отображает рукописные данные позади кнопок. Это происходит потому, что в отличие от дочерних элементов, кнопки имеют общий родительский объект InkCanvas. Кроме того, кнопки находятся выше по z-координате, поэтому рукописный текст отображается позади.

См. также

Ссылки

DrawingAttributes

DefaultDrawingAttributes()

System.Windows.Ink

Поделиться через

Сбор рукописных данных

Необходимые компоненты

Использование элемента InkCanvas

Режимы InkCollection

Управление рукописными данными

Выбор фрагмента

DrawingAttributes

DefaultDrawingAttributes

См. также

Ссылки

Дополнительные ресурсы