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

Сбор чернил

Платформа Windows Presentation Foundation (WPF) собирает цифровые чернила как часть основного функционала. В этом разделе рассматриваются методы сбора чернил в 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>

Режимы сбора чернил

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 для изменения внешнего вида штрихов. Например, элемент 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. Чтобы использовать этот код, создайте проект 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-порядке», поэтому чернила отображаются за ними.

См. также