Tutorial: Soporte de tinta en tu aplicación de Windows

Surface Pen (disponible para compra 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. Usamos fragmentos de código de una aplicación de ejemplo, 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.

Nos centramos en lo siguiente:

• Adición de compatibilidad básica con entrada de lápiz
• Agregar una barra de herramientas de tinta
• Compatibilidad con el reconocimiento de escritura a mano
• Compatibilidad con el reconocimiento básico de formas
• Guardar y cargar tinta

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

Introducción

Con Windows Ink, puedes proporcionar a tus clientes el equivalente digital de casi cualquier experiencia de lápiz y papel imaginable, desde notas rápidas, manuscritas y anotaciones a demostraciones de pizarra, y desde dibujos arquitectónicos e ingeniería hasta obras maestras personales.

Prerrequisitos

• Un equipo (o una máquina virtual) que ejecuta la versión actual de Windows 10 o Windows 11
• Visual Studio 2019 y el SDK de RS2 o posterior
• SDK de Windows 10 (10.0.15063.0)
• Dependiendo de la configuración, es posible que tenga que instalar el paquete NuGet Microsoft.NETCore.UniversalWindowsPlatform y habilitar el modo desarrollador en la configuración del sistema (Configuración -> Actualización y seguridad -> Para desarrolladores -> Usar características de desarrollador).
• Si no está familiarizado con el desarrollo de aplicaciones de Windows con Visual Studio, eche un vistazo a estos temas antes de iniciar este tutorial:
  • Instalación de herramientas para el SDK de aplicaciones de Windows
  • Crear una aplicación "Hola mundo" (XAML)
• [OPCIONAL] Lápiz digital y un ordenador con una pantalla que admite la entrada de ese lápiz digital.

Nota:

Aunque Windows Ink puede admitir el dibujo con un mouse y un toque (mostramos cómo hacerlo en el paso 3 de este tutorial) para obtener una experiencia óptima de Windows Ink, se recomienda tener un lápiz digital y un equipo con una pantalla que admita la entrada de ese lápiz digital.

Código de ejemplo

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

Descargue este ejemplo de Visual Studio y el código fuente de GitHub en windows-appsample-get-started-ink ejemplo:

1. Seleccione el botón verde Clonar o descargar
   
2. Si tiene una cuenta de GitHub, puede clonar el repositorio en la máquina local si elige Abrir en Visual Studio.
3. Si no tiene una cuenta de GitHub o solo quiere una copia local del proyecto, elija Descargar ZIP (tendrá que volver a comprobar periódicamente para descargar las actualizaciones más recientes).

Importante

La mayoría del código del ejemplo está comentado. A medida que avancemos por cada paso, se le pedirá que descomente varias secciones del código. En Visual Studio, simplemente resalte las líneas de código y presione CTRL-K y, a continuación, CTRL-U.

Componentes de la plataforma Windows Ink

Estos objetos son fundamentales para la experiencia de escritura a mano en aplicaciones de Windows.

Componente	Descripción
InkCanvas	Un control de plataforma de interfaz de usuario XAML que, de forma predeterminada, recibe y muestra toda la entrada de un lápiz como un trazo de tinta o un trazo de borrado.
PresentadorDeTinta	Objeto de código subyacente, que se instancia junto con un control InkCanvas (expuesto mediante la propiedad InkCanvas.InkPresenter). Este objeto proporciona toda la funcionalidad de entintado predeterminada expuesta por el InkCanvas, junto con un conjunto amplio de APIs para personalización adicional.
Barra de herramientas de tinta	Control de interfaz de usuario XAML que contiene una colección personalizable y extensible de botones que activan características relacionadas con la tinta en una InkCanvas asociada .
IInkD2DRenderer Aquí no tratamos esta funcionalidad, para obtener más información, consulte la muestra de tinta compleja .	Habilita la representación de trazos de lápiz en el contexto designado del dispositivo Direct2D de una aplicación universal de Windows, en lugar del control InkCanvas predeterminado.

Paso 1: Ejecución del ejemplo

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

1. Abra el proyecto de ejemplo en Visual Studio.

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

3. Presione F5 para compilar, implementar y ejecutar.

   Nota:

   Como alternativa, puede seleccionar el elemento de menú Depurar>Iniciar depuración o seleccionar el botón Ejecutar Máquina local que se muestra aquí.

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.

Bien, ahora tenemos la aplicación básica de Windows que usaremos en el resto de este tutorial. En los pasos siguientes, agregamos nuestra funcionalidad de tinta.

Paso 2: Usar InkCanvas para proporcionar soporte básico para entrada manuscrita

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

Vamos a corregir esa pequeña falta en este paso.

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

Nota:

Un InkCanvas tiene propiedades predeterminadas de altura y anchura de cero, a menos que sea un elemento secundario de un elemento que ajuste automáticamente el tamaño de sus elementos secundarios.

En el ejemplo:

1. Abra el archivo MainPage.xaml.cs.
2. Busque el código marcado con el título de este paso ("// Paso 2: Usar InkCanvas para admitir la entrada manuscrita básica").
3. Descomenta las siguientes líneas. (Estas referencias son necesarias para la funcionalidad usada en los pasos posteriores).

    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;

4. Abra el archivo MainPage.xaml.
5. Busque el código marcado con el título de este paso ("<!-- Paso 2: Entrada manuscrita básica con InkCanvas -->").
6. Descomente la siguiente línea.

    <InkCanvas x:Name="inkCanvas" />

Eso es todo.

Ahora vuelva a ejecutar la aplicación. Adelante, haz garabatos, escribe tu nombre, o (si sostienes un espejo o tienes una memoria muy buena) dibuja tu autorretrato.

Paso 3: Soporte para escritura a mano con táctil y ratón

Observará que, de forma predeterminada, solo se admite la entrada de lápiz. Si intentas escribir o dibujar con el dedo, el mouse o el panel táctil, te decepcionarás.

Para convertir esa tristeza en alegría, necesitas añadir una segunda línea de código. Esta vez está en el código subyacente del archivo XAML en el que declarós tu 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 tinta (estándar y modificada) en su InkCanvas.

Nota:

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

Para habilitar el mouse y la tinta táctil, configure la propiedad InputDeviceTypes del InkPresenter a la combinación de los valores de CoreInputDeviceTypes que prefiera.

En el ejemplo:

1. Abra el archivo MainPage.xaml.cs.
2. Busque el código marcado con el título de este paso ("// Paso 3: Compatibilidad con entrada manuscrita con entrada táctil y mouse").
3. Descomenta las siguientes líneas.

    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Vuelve a abrir la aplicación y verás que todos tus sueños de pintar con los dedos en una pantalla de ordenador se han hecho realidad.

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 tinta

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 forma predeterminada, el InkToolbar incluye un conjunto básico de botones que permite a los usuarios seleccionar rápidamente entre un bolígrafo, un lápiz, un resaltador o un borrador, cualquiera de los cuales se puede usar junto con una plantilla (regla o transportador). Los botones de bolígrafo, lápiz y resaltador ofrecen un menú desplegable para seleccionar el color de tinta y el tamaño del trazo.

Para agregar un InkToolbar predeterminado a una aplicación de dibujo, colóquelo en la misma página que el InkCanvas y asocie los dos controles.

En el ejemplo

1. Abra el archivo MainPage.xaml.
2. Busque el código marcado con el título de este paso ("<-- Paso 4: Agregar una barra de herramientas de lápiz -->").
3. Descomenta las siguientes líneas.

    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Nota:

Para mantener la interfaz de usuario y el código lo menos desordenados y lo más sencillos posible, usamos un diseño de cuadrícula básico y declaramos el InkToolbar después del InkCanvas en una fila de la cuadrícula. Si lo declaras antes del InkCanvas, la InkToolbar se muestra primero, debajo del lienzo, y resulta inaccesible para el usuario.

Ahora ejecute nuevamente la aplicación para ver el InkToolbar y probar algunas de las herramientas.

Desafío: Agregar un botón personalizado

Este es un ejemplo de un inkToolbar personalizado (desde Sketchpad en el área de trabajo de Windows Ink).

Para obtener más información acerca de cómo personalizar un InkToolbar, consulta Agregar un InkToolbar a una aplicación de Windows con capacidad de escritura.

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 esas escrituras.

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

Nota:

La mejora del reconocimiento de escritura a mano se puede lograr mediante la configuración de Lápiz y Windows Ink.

1. Abra el menú Inicio y seleccione Configuración.
2. En la pantalla Configuración, seleccione Dispositivos>Lápiz y Windows Ink.
3. Seleccione Explorar mi escritura a mano para abrir el cuadro de diálogo de Personalización de escritura a mano .

En el ejemplo:

1. Abra el archivo MainPage.xaml.
2. Busque el código marcado con el título de este paso ("<-- Paso 5: Admitir el reconocimiento de escritura a mano -->").
3. Descomenta las siguientes líneas.

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

4. Abra el archivo MainPage.xaml.cs.
5. Busque el código marcado con el título de este paso (" Paso 5: Admitir el reconocimiento de escritura a mano").
6. Descomenta las siguientes líneas.

• 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 procesamos el 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();
        }
    }

7. Vuelva a ejecutar la aplicación, escriba algo y haga clic en el botón Reconocer texto .
8. 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 admitidos por Windows. Cada paquete de idioma incluye un motor de reconocimiento de escritura a mano que se puede instalar con el paquete de idioma.

Dirigirse a un lenguaje específico consultando los motores de reconocimiento de escritura a mano instalados.

Para obtener más información sobre el reconocimiento internacional de escritura a mano, 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 realizar el reconocimiento dinámico mediante una función de control de tiempo básica.

Para obtener más detalles sobre el reconocimiento dinámico, consulte Reconocer trazos de Windows Ink como texto.

Paso 6: Reconocimiento de formas

Ok, así que ahora puedes convertir tus notas manuscritas en algo un poco más legible. ¿Pero qué pasa con esos doodles agitados y cafeinados de la reunión de Flowcharters Anonymous de la mañana?

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

• Círculo
• Diamante
• Dibujo
• Elipse
• Triángulo Equilátero
• Hexágono
• Triángulo isósceles
• Paralelogramo
• Pentágono
• Cuadrilátero
• Rectángulo
• RightTriangle
• Cuadrado
• Trapezoide
• Triángulo

En este paso, usamos las características de reconocimiento de formas de Windows Ink para intentar limpiar los doodles.

En este ejemplo, no intentamos volver a dibujar trazos de lápiz (aunque eso es posible). En su lugar, agregamos un lienzo estándar bajo el InkCanvas donde dibujamos objetos equivalentes de una elipse o polígono derivados de la tinta original. A continuación, eliminamos los trazos de lápiz correspondientes.

En el ejemplo:

1. Abra el archivo MainPage.xaml.
2. Busque el código marcado con el título de este paso ("<-- Paso 6: Reconocer formas -->")
3. Descomente 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" />

4. Abra el archivo MainPage.xaml.cs
5. Busque el código marcado con el título de este paso ("// Paso 6: Reconocer formas")
6. Descomente estas líneas:

    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

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

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

7. Ejecutar la aplicación, dibujar algunas formas y hacer clic en el botón Reconocer forma

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

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

Paso 7: Guardar y cargar tinta

Así que has estado garabateando y te gusta lo que ves, pero crees que te gustaría retocar un par de cosas más tarde. Puede guardar los trazos de lápiz en un archivo de formato serializado de lápiz (ISF) y cargarlos para su edición cada vez que se produzca la inspiración.

El archivo ISF es una imagen GIF básica que incluye metadatos adicionales que describen las propiedades y los comportamientos de trazos de lápiz. Las aplicaciones que no están habilitadas para 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 Formato Serializado de Tinta (ISF) se puede descargar del Centro de Descargas de Microsoft.

En este paso, conectamos los botones Guardar y Cargar situados junto a la barra de herramientas de tinta.

En el ejemplo:

1. Abra el archivo MainPage.xaml.
2. Busque el código marcado con el título de este paso ("<-- Paso 7: Guardar y cargar entrada de lápiz -->").
3. Descomenta las siguientes líneas.

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

4. Abra el archivo MainPage.xaml.cs.
5. Busque el código marcado con el título de este paso ("// Paso 7: Guardar y cargar entrada de lápiz").
6. Descomenta las siguientes líneas.

    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

7. Ejecute la aplicación y dibuje algo.
8. Seleccione el botón Guardar y guarde el dibujo.
9. Borra la entrada de lápiz o reinicia la aplicación.
10. Seleccione el botón Cargar y abra el archivo de tinta que acaba de guardar.

Desafío: Usar el Portapapeles para copiar y pegar trazos de lápiz

Windows Ink también admite copiar y pegar trazos de lápiz hacia y desde el Portapapeles.

Para obtener más información sobre cómo usar el Portapapeles con entrada de lápiz, consulta Guardar y recuperar datos de trazo de Windows Ink.

Resumen

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

Artículos relacionados

• Interacciones de lápiz y Windows Ink en aplicaciones de Windows

Muestras

• muestra de análisis de tinta (básico) (C#)
• ejemplo de reconocimiento de escritura a mano de lápiz (C#)
• Guardar y cargar trazos de lápiz desde un archivo de formato serializado de lápiz (ISF)
• Guardar y cargar trazos de lápiz desde el Portapapeles
• Ejemplo básico de ubicación y orientación de la barra de herramientas Ink
• Ejemplo de orientación y ubicación de la barra de herramientas Ink (dinámica)
• Ejemplo simple de muestra de tinta (C#/C++)
• muestra de tinta compleja (C++)
• Muestra de tinta (JavaScript)
• Tutorial para comenzar: Soporte de tinta digital en tu aplicación de Windows
• ejemplo de libro de colorear
• notas de la familia