Сбора рукописных фрагментов

Платформа 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 в проект 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 свойства выберите.

Следующий код устанавливает режим редактирования на основе значения из CheckBox:

// 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
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 свойства.

Далее примере показано, как задать 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-порядке, поэтому рукописные фрагменты отображаются позади них.