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

Статья
06/02/2023

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

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

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

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

Элемент System.Windows.Controls.InkCanvas обеспечивает самый простой способ сбора данных рукописного ввода в WPF. Элемент InkCanvas можно использовать для получения и отображения данных рукописного ввода. Рукописный ввод, как правило, осуществляется с помощью пера, которое взаимодействует с дигитайзером для создания рукописных штрихов. Кроме того, вместо пера можно использовать мышь. Созданные штрихи представляются в виде объектов Stroke, и ими можно управлять программно или с помощью пользовательского ввода. InkCanvas позволяет пользователям выбирать, изменять и удалять существующие Stroke.

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

<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 для изменения внешнего вида штрихов рукописного ввода. Например, член 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

Свойство DefaultDrawingAttributes предоставляет доступ к свойствам, таким как высота, ширина и цвет штрихов, создаваемых в InkCanvas. После изменения DefaultDrawingAttributes все штрихи, которые в будущем будут вводиться в InkCanvas, отрисовываются с использованием новых значений свойства.

Помимо изменения DefaultDrawingAttributes в файле кода программной части, можно использовать синтаксис XAML для указания свойств DefaultDrawingAttributes.

В следующем примере кода показано, как установить свойство Color. Чтобы воспользоваться этим кодом, создайте новый проект WPF с именем HelloInkCanvas в Visual Studio. Замените код в файле 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;
}

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

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

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