Recopilación de la entrada manuscrita

Artículo
05/04/2023

La plataforma Windows Presentation Foundation recopila entradas de lápiz digitales como parte esencial de su funcionalidad. Este tema trata de los métodos de recopilación de entrada manuscrita en Windows Presentation Foundation (WPF).

Requisitos previos

Para usar los ejemplos siguientes, primero debe instalar Visual Studio y el SDK de Windows. También debe saber cómo escribir aplicaciones para WPF. Para obtener más información acerca de cómo empezar a usar WPF, consulte Tutorial: Mi primera aplicación de escritorio WPF.

Uso del elemento InkCanvas

El elemento System.Windows.Controls.InkCanvas proporciona la forma más sencilla de recopilar la entrada manuscrita en WPF. Use un elemento InkCanvas para recibir y mostrar la entrada manuscrita. Normalmente, la entrada de lápiz se realiza con un lápiz, que interactúa con un digitalizador para generar trazos de lápiz. También se puede usar un mouse en lugar de un lápiz. Los trazos creados se representan como objetos Stroke y se pueden manipular mediante programación y con la entrada del usuario. InkCanvas permite a los usuarios seleccionar, modificar o eliminar un Stroke existente.

XAML permite configurar la recopilación de entrada de lápiz fácilmente: solo tiene que agregar un elemento InkCanvas al árbol. En el ejemplo siguiente se agrega un objeto InkCanvas a un proyecto de WPF predeterminado creado en Visual Studio:

<Grid>
  <InkCanvas/>
</Grid>

El elemento InkCanvas también puede contener elementos secundarios, lo que permite agregar funcionalidades de anotación de entrada de lápiz a casi cualquier tipo de elemento XAML. Por ejemplo, para agregar funcionalidades de entrada de lápiz a un elemento de texto, solo tiene que convertirlo en un elemento secundario de un elemento InkCanvas:

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

Agregar compatibilidad para marcar una imagen con entrada de lápiz es así de fácil:

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

Modos de InkCollection

El InkCanvas proporciona soporte para varios modos de entrada a través de su propiedad EditingMode.

Manipulación de la entrada manuscrita

El InkCanvas proporciona soporte para muchas operaciones de edición de entrada manuscrita. Por ejemplo, InkCanvas es compatible con el borrador del extremo opuesto a la punta y no requiere código adicional para agregar la funcionalidad al elemento.

Número de selección

Establecer el modo de selección es tan sencillo como establecer la propiedad InkCanvasEditingMode en Select.

El código siguiente establece el modo de edición en función del valor de 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

Use la propiedad DrawingAttributes para cambiar la apariencia de los trazos de entrada manuscrita. Por ejemplo, el miembro Color de DrawingAttributes establece el color del renderizado Stroke.

En el ejemplo siguiente se cambia el color de los trazos seleccionados a rojo:

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

La propiedad DefaultDrawingAttributes proporciona acceso a propiedades como la altura, la anchura y el color de los trazos que se crearán en un InkCanvas. Una vez que cambie DefaultDrawingAttributes, todos los trazos futuros introducidos en el InkCanvas se renderizarán con los nuevos valores de la propiedad.

Además de modificar DefaultDrawingAttributes en el archivo de código subyacente, puede utilizar la sintaxis XAML para especificar las propiedades de DefaultDrawingAttributes.

El siguiente ejemplo muestra cómo establecer la propiedad Color. Para usar este código, cree un nuevo proyecto WPF denominado "HelloInkCanvas" en Visual Studio. Reemplace el código del archivo MainWindow.xaml por el código siguiente:

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

A continuación, agregue los siguientes controladores de eventos de botón en el archivo de código subyacente, dentro de la clase 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;
}

Después de copiar este código, presione F5 en Visual Studio para ejecutar el programa en el depurador.

Observe cómo StackPanel coloca los botones encima de InkCanvas. Si se intenta realizar una entrada de lápiz encima de los botones, el elemento InkCanvas recopila y representa la entrada de lápiz detrás de los botones. Esto se debe a que los botones son elementos del mismo nivel que InkCanvas, a diferencia de los elementos secundarios. Además, los botones son superiores en el orden de z, por lo que la entrada de lápiz se representa detrás de ellos.

Compartir a través de