Tutorial: compatibilidad con la entrada de lápiz en la aplicación de Windows

  • Artículo

Surface Pen hero image.
Lápiz para Surface (comprar en Microsoft Store).

En este tutorial se explica cómo crear una aplicación básica de Windows que admita la escritura y el dibujo con Windows Ink. Se usan fragmentos de una aplicación de muestra, que puede descargar desde GitHub (consulte Código de ejemplo), para mostrar las distintas características y las API de Windows Ink asociadas (consulte Componentes de la plataforma de Windows Ink) que se describen en cada paso.

Céntrese en lo siguiente:

  • Agregar compatibilidad básica con la entrada de lápiz
  • Agregar una barra de herramientas de entrada de lápiz
  • Admitir el reconocimiento de escritura a mano
  • Admitir el reconocimiento de formas básicas
  • Guardar y cargar la entrada de lápiz

Para más información sobre la implementación de estas características, consulte Interacciones de lápiz y Windows Ink en aplicaciones de Windows.

Introducción

Con Windows Ink, puede proporcionar a los clientes el equivalente digital de casi cualquier experiencia de lápiz y papel que se pueda imaginar, desde notas y anotaciones rápidas y manuscritas a demostraciones de pizarra, y desde dibujos de arquitectura e ingeniería hasta obras de arte personales.

Requisitos previos

Nota:

Aunque Windows Ink puede admitir el dibujo con un ratón y la función táctil (se muestra cómo hacerlo en el paso 3 de este tutorial) para una experiencia óptima de Windows Ink, se recomienda tener un lápiz digital y un ordenador con una pantalla que admita la entrada de ese lápiz digital.

Código de ejemplo

A lo largo de este tutorial, se utiliza una aplicación de entrada de lápiz de muestra para mostrar los conceptos y la funcionalidad que se describen.

Descargue esta muestra de Visual Studio y el código fuente de GitHub en windows-appsample-get-started-ink sample:

  1. Seleccione el botón verde Clone or download (Clonar o descargar)
    Cloning the repo.
  2. Si tiene una cuenta de GitHub, puede clonar el repositorio en la máquina local al elegir Open in Visual Studio (Abrir en Visual Studio)
  3. Si no tiene una cuenta de GitHub o solo quiere una copia local del proyecto, elija Download ZIP (Descargar ZIP) (tendrá que volver a comprobar de manera periódica para descargar las actualizaciones más recientes)

Importante

La mayor parte del código de la muestra está comentada. A medida que se avanza en cada paso, se le pedirá que quite la marca de comentario de varias secciones del código. En Visual Studio, simplemente resalte las líneas de código y presione CTRL-K y, luego, CTRL-U.

Componentes de la plataforma Windows Ink

Estos objetos proporcionan la mayor parte de la experiencia de entrada manuscrita para las aplicaciones de Windows.

Componente Descripción
InkCanvas Un control de plataforma de UI de XAML que, de manera predeterminada, recibe y muestra toda la entrada de un lápiz como un trazo de entrada manuscrita o un trazo de borrado.
InkPresenter Un objeto de código subyacente, creado junto con un control de InkCanvas (expuesto mediante la propiedad InkCanvas.InkPresenter). Este objeto proporciona toda la funcionalidad de entrada manuscrita predeterminada expuesta por el control de InkCanvas, junto con un conjunto completo de API para una personalización adicional.
InkToolbar Un control de plataformas de UI de XAML que contiene una colección personalizable y extensible de botones que activan características relacionadas con las entradas de lápiz en un control de InkCanvas asociado.
IInkD2DRenderer
Aquí no se trata esta funcionalidad, para más información, consulte Muestra de entrada de lápiz compleja.		 Habilita la representación de trazos de entrada manuscrita en el contexto designado del dispositivo Direct2D de una aplicación universal de Windows, en lugar del control predeterminado de InkCanvas.

Paso 1: ejecutar la muestra

Después de descargar la aplicación de muestra RadialController, compruebe que se ejecuta:

  1. Abra el proyecto de muestra en Visual Studio.

  2. Establezca la lista desplegable Plataformas de solución en una selección que no sea de ARM.

  3. Presione F5 para compilar, implementar y ejecutar la aplicación.

    Nota:

    Como alternativa, puede seleccionar el elemento de menú Depurar>Iniciar depuración o seleccionar el botón Ejecutar de la máquina local que se muestra aquí. Visual Studio Build project button.

Se abre la ventana de la aplicación y, después de que aparezca una pantalla de presentación durante unos segundos, verá esta pantalla inicial.

Screenshot of the empty app.

Bien, ahora tenemos la aplicación básica de Windows que utilizaremos en el resto de este tutorial. En los pasos siguientes, añadimos nuestra funcionalidad de entrada de lápiz.

Paso 2: utilizar InkCanvas para admitir la entrada manuscrita básica

Quizás ya haya observado que la aplicación, en su forma inicial, no permite dibujar nada con el lápiz (aunque puede utilizar el lápiz como un dispositivo de puntero estándar para interactuar con la aplicación).

En este paso, se corrige ese pequeño defecto.

Para agregar la funcionalidad básica de entrada manuscrita, basta con colocar un control de InkCanvas en la página adecuada de la aplicación.

Nota:

Un control de InkCanvas tiene las propiedades predeterminadas Height (Altura) y Width (Ancho), a menos que sea el elemento secundario de un elemento que ajuste automáticamente el tamaño de sus elementos secundarios.

En la muestra:

  1. Abre el archivo MainPage.xaml.cs.
  2. Busque el código marcado con el título de este paso ("// Step 2: Use InkCanvas to support basic inking").
  3. Quite la marca de comentario de las líneas siguientes. (Estas referencias son obligatorias para la funcionalidad que se utiliza en los pasos posteriores).
    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;
  1. Abra el archivo MainPage.xaml.
  2. Busque el código marcado con el título de este paso ("<!-- Step 2: Basic inking with InkCanvas -->").
  3. Quite la marca de comentario de la línea siguiente:
    <InkCanvas x:Name="inkCanvas" />

Eso es todo.

Ahora, vuelva a ejecutar la aplicación. Continúe y escriba su nombre o (si tiene un espejo o memoria muy buena) dibuje un autorretrato.

Screenshot of the Basic Ink Sample app highlighted in this topic.

Paso 3: admitir la entrada manuscrita con la función táctil y el ratón

Observará que, de manera predeterminada, la entrada de lápiz solo se admite para la entrada manuscrita. Si intenta escribir o dibujar con el dedo, el ratón o el panel táctil, se decepcionará.

Para no decepcionarse, debe agregar una segunda línea de código. Esta vez se encuentra en el código subyacente del archivo XAML en el que declaró el control InkCanvas.

En este paso, presentamos el objeto InkPresenter, que proporciona una administración más detallada de la entrada, el procesamiento y la representación de la entrada de lápiz (estándar y modificada) en InkCanvas.

Nota:

La entrada de lápiz estándar (punta de lápiz o botón/punta de borrador) no se modifica con una prestación secundaria de hardware, como un botón de menú contextual de lápiz, un botón derecho del ratón o un mecanismo similar.

Para habilitar el ratón y la entrada manuscrita táctil, establezca la propiedad InputDeviceTypes de InkPresenter en la combinación de los valores de CoreInputDeviceTypes que quiere.

En la muestra:

  1. Abre el archivo MainPage.xaml.cs.
  2. Busque el código marcado con el título de este paso ("// Step 3: Support inking with touch and mouse").
  3. Quite la marca de comentario de las líneas siguientes.
    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Vuelva a ejecutar la aplicación y descubrirá que ya puede dibujar en la pantalla de un ordenador con los dedos.

Nota:

Al especificar tipos de dispositivo de entrada, debe indicar compatibilidad con cada tipo de entrada específico (incluido el lápiz), ya que establecer esta propiedad invalida la configuración predeterminada InkCanvas.

Paso 4: agregar una barra de herramientas de entrada de lápiz

InkToolbar es un control de plataforma para UWP que proporciona una colección personalizable y extensible de botones para activar características relacionadas con la entrada de lápiz.

De manera predeterminada, InkToolbar incluye un conjunto básico de botones que permiten a los usuarios seleccionar rápidamente entre un lápiz, un bolígrafo, un marcador o un borrador, cualquiera de los cuales se puede usar junto con una galería de símbolos (regla o transportador). Los botones de bolígrafo, lápiz y marcador también proporcionan un control flotante para seleccionar el color del trazo y el tamaño del trazo.

Para agregar una InkToolbar predeterminada a una aplicación de entrada manuscrita, colóquela en la misma página que inkCanvas y asocie los dos controles.

En la muestra

  1. Abra el archivo MainPage.xaml.
  2. Busque el código marcado con el título de este paso ("<!-- Step 4: Add an ink toolbar -->").
  3. Quite la marca de comentario de las líneas siguientes.
    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Nota:

Para mantener la UI y el código tan desordenados como sea posible, se utiliza un diseño de cuadrícula básico y declaramos InkToolbar después de InkCanvas en una fila de cuadrícula. Si lo declara antes de InkCanvas, InkToolbar se representa primero, debajo del lienzo y es inaccesible para el usuario.

Ahora vuelva a ejecutar la aplicación para ver InkToolbar y probar algunas de las herramientas.

Screenshot of the Basic Ink Sample app highlighted in this topic with the default InkToolbar.

Desafío: agregar un botón personalizado

Este es un ejemplo de InkToolbar personalizado (del bloc de bocetos en el Área de trabajo de Windows Ink).

Screenshot of the Ink Toolbar from Sketchpad in the Ink Workspace.

Para más información sobre cómo personalizar un control InkToolbar, consulte Agregar un control InkToolbar a una aplicación de entrada manuscrita de Windows.

Paso 5: admitir el reconocimiento de escritura a mano

Ahora que puede escribir y dibujar en la aplicación, vamos a intentar hacer algo útil con esos garabatos.

En este paso, utilizamos las características de reconocimiento de escritura a mano de Windows Ink para intentar descifrar lo que ha escrito.

Nota:

El reconocimiento de escritura a mano se puede mejorar a través de la configuración de Lápiz y Windows Ink:

  1. Abra el menú Inicio y seleccione Configuración.
  2. En la pantalla de Configuración seleccione Dispositivos>Lápiz y Windows Ink. Screenshot of the Pen & Windows Ink settings page.
  3. Seleccione Información sobre mi escritura a mano para abrir el cuadro de diálogo Personalización de escritura a mano. Screenshot of the Handwriting Recognition Personalization dialog box.

En la muestra:

  1. Abra el archivo MainPage.xaml.
  2. Busque el código marcado con el título de este paso ("<!-- Step 5: Support handwriting recognition -->").
  3. Quite la marca de comentario de las líneas siguientes.
    <Button x:Name="recognizeText" 
            Content="Recognize text"  
            Grid.Row="0" Grid.Column="0"
            Margin="10,10,10,10"
            Click="recognizeText_ClickAsync"/>
    <TextBlock x:Name="recognitionResult" 
                Text="Recognition results: "
                VerticalAlignment="Center" 
                Grid.Row="0" Grid.Column="1"
                Margin="50,0,0,0" />
  1. Abre el archivo MainPage.xaml.cs.
  2. Busque el código marcado con el título de este paso ("Step 5: Support handwriting recognition").
  3. Quite la marca de comentario de las líneas siguientes.
  • Estas son las variables globales necesarias para este paso.
    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;
  • Este es el controlador del botón Reconocer texto, donde hacemos el procesamiento del reconocimiento.
    private async void recognizeText_ClickAsync(object sender, RoutedEventArgs e)
    {
        strokesText = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // Ensure an ink stroke is present.
        if (strokesText.Count > 0)
        {
            analyzerText.AddDataForStrokes(strokesText);

            resultText = await analyzerText.AnalyzeAsync();

            if (resultText.Status == InkAnalysisStatus.Updated)
            {
                words = analyzerText.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);
                foreach (var word in words)
                {
                    InkAnalysisInkWord concreteWord = (InkAnalysisInkWord)word;
                    foreach (string s in concreteWord.TextAlternates)
                    {
                        recognitionResult.Text += s;
                    }
                }
            }
            analyzerText.ClearDataForAllStrokes();
        }
    }
  1. Vuelva a ejecutar la aplicación, escriba algo y haga clic en el botón Reconocer texto.
  2. Los resultados del reconocimiento se muestran junto al botón.

Desafío 1: reconocimiento internacional

Windows Ink admite el reconocimiento de texto para muchos de los idiomas que admite Windows. Cada paquete de idioma incluye un motor de reconocimiento de escritura a mano que se puede instalar con el paquete de idioma.

Para seleccionar un idioma específico, consulte los motores de reconocimiento de escritura a mano instalados.

Para más detalles acerca del reconocimiento de escritura a mano internacional, consulte Reconocer trazos de Windows Ink como texto.

Desafío 2: reconocimiento dinámico

Para este tutorial, es necesario presionar un botón para iniciar el reconocimiento. También puede ejecutar el reconocimiento dinámico mediante una función de sincronización básica.

Para más detalles acerca del reconocimiento dinámico, consulte Reconocer trazos de Windows Ink como texto.

Paso 6: reconocimiento de formas

Ahora puede convertir las notas escritas a mano en algo un poco más legible. ¿Pero, qué pasa con los garabatos movidos de la reunión de fanáticos de los diagramas de flujo anónimos de la mañana después de beber una bebida con cafeína?

Con el análisis de entrada de lápiz, la aplicación también puede reconocer un conjunto de formas principales, entre las que se incluyen:

  • Círculo
  • Diamond
  • Dibujo
  • Elipse
  • EquilateralTriangle
  • Hexágono
  • IsoscelesTriangle
  • Paralelogramo
  • Pentágono
  • Quadrilateral
  • Rectángulo
  • RightTriangle
  • Cuadrado
  • Trapecio
  • Triángulo

En este paso, se utilizan las características de reconocimiento de formas de Windows Ink para intentar limpiar los garabatos.

En este ejemplo, no se intenta volver a dibujar trazos de entrada manuscrita (aunque es posible). En su lugar, se agrega un lienzo estándar bajo el control de InkCanvas donde dibujamos objetos Ellipse o Polygon equivalentes derivados de la entrada de lápiz original. A continuación, se eliminan los trazos de entrada manuscrita correspondientes.

En la muestra:

  1. Abra el archivo MainPage.xaml.
  2. Busque el código marcado con el título de este paso ("<!-- Step 6: Recognize shapes -->").
  3. Quite la marca de comentario de esta línea.
   <Canvas x:Name="canvas" />

   And these lines.

    <Button Grid.Row="1" x:Name="recognizeShape" Click="recognizeShape_ClickAsync"
        Content="Recognize shape" 
        Margin="10,10,10,10" />
  1. Abra el archivo MainPage.xaml.cs.
  2. Busque el código marcado con el título de este paso ("// Step 6: Recognize shapes").
  3. Quite la marca de comentario de estas líneas:
    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private void DrawEllipse(InkAnalysisInkDrawing shape)
    {
        ...
    }

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }
  1. Ejecute la aplicación, dibuje algunas formas y haga clic en el botón Reconocer forma.

Este es un ejemplo de un diagrama de flujo rudimentario desde una servilleta digital.

Screenshot of a rudimentary flowchart from a digital napkin.

Este es el mismo diagrama de flujo después del reconocimiento de formas.

Screenshot of the flowchart after the user selects Recognize shape.

Paso 7: guardar y cargar la entrada de lápiz

Terminó de hacer garabatos y le gusta lo que ve, pero ¿cree que le gustaría retocar un par de cosas más tarde? Puede guardar los trazos de entrada manuscrita en un archivo Ink Serialized Format (ISF) y cargarlos para su edición cada vez que le llegue la inspiración.

El archivo ISF es una imagen GIF básica que incluye más metadatos que describen las propiedades y los comportamientos de trazos de entrada manuscrita. Las aplicaciones que no están habilitadas para entrada de lápiz pueden omitir los metadatos adicionales y seguir cargando la imagen GIF básica (incluida la transparencia de fondo del canal alfa).

Nota:

La especificación de Ink Serialized Format (ISF) se puede descargar desde el Centro de descarga de Microsoft.

En este paso, enlazamos los botones Guardar y Cargar situados junto a la barra de herramientas de la entrada de lápiz.

En la muestra:

  1. Abra el archivo MainPage.xaml.
  2. Busque el código marcado con el título de este paso ("<!-- Step 7: Saving and loading ink -->").
  3. Quite la marca de comentario de las líneas siguientes.
    <Button x:Name="buttonSave" 
            Content="Save" 
            Click="buttonSave_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
    <Button x:Name="buttonLoad" 
            Content="Load"  
            Click="buttonLoad_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
  1. Abre el archivo MainPage.xaml.cs.
  2. Busque el código marcado con el título de este paso ("// Step 7: Save and load ink").
  3. Quite la marca de comentario de las líneas siguientes.
    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }
  1. Ejecute la aplicación y dibuje algo.
  2. Seleccione el botón Guardar y guarde el dibujo.
  3. Borre la entrada de lápiz o reinicie la aplicación.
  4. Seleccione el botón Cargar y abra el archivo de entrada de lápiz que acaba de guardar.

Desafío: utilizar el portapapeles para copiar y pegar los trazos de entrada manuscrita

Windows Ink también admite copiar trazos de entrada manuscrita del portapapeles y pegarlos.

Para más información sobre cómo usar el portapapeles con entrada de lápiz, consulte Almacenar y recuperar datos de trazos de entrada manuscrita de Windows Ink.

Resumen

Enhorabuena, ha completado el tutorial Entrada: compatibilidad con la entrada de lápiz en la aplicación de Windows. Se mostró el código básico necesario para admitir la entrada de lápiz en las aplicaciones de Windows y cómo proporcionar algunas de las experiencias del usuario más enriquecidas compatibles con la plataforma Windows Ink.

Ejemplos