Inicio rápido: Capturar datos de entrada de lápiz (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Este artículo de inicio rápido te guiará en el proceso de capturar datos de entrada de lápiz a partir de un digitalizador de entrada.

Nota El código usado en este tema proviene de un proyecto Javascript plenamente operativo de Microsoft Visual Studio 2013. Aunque el proyecto no está disponible para su descarga, puedes encontrar todos los archivos de hojas de estilos CSS, HTML y JavaScript en Código completo de captura de datos de entrada de lápiz.

Actualizaciones para Windows 8.1: Windows 8.1 incorpora varias actualizaciones y mejoras para las API para entrada de puntero. Para obtener más información, consulta el tema sobre cambios en las API para Windows 8.1.

Objetivo: Cuando hayas terminado este artículo, entenderás cómo usar la plataforma de entrada de lápiz para detectar y capturar entradas a partir de un dispositivo señalador (mouse, pluma/lápiz o táctil) en una aplicación de la Tienda Windows con JavaScript.

Requisitos previos

Damos por sentado que Puedes crear una aplicación básica de la Tienda Windows desarrollada para Windows con JavaScript que use la plantilla de la Biblioteca de Windows para JavaScript.

Para completar este tutorial, necesitas:

Instalar Windows 8
Instalar Microsoft Visual Studio.
Obtener una licencia de desarrollador. Para obtener instrucciones, consulta Desarrollar con Visual Studio 2013.
Crear la primera aplicación de la Tienda Windows con JavaScript
Consulta Inicio rápido: Agregar estilos y controles de WinJS para obtener información sobre los objetos y controles de WinJS.

Instrucciones

1. Crear un nuevo proyecto "Aplicación vacía" en Visual Studio y agregar archivos HTML, CSS y JavaScript

Para este ejemplo, tenemos un archivo HTML ("InkPage.html"), un archivo CSS ("InkPage.css") y un archivo JavaScript ("InkPage.js").

Puedes encontrar todos los archivos CSS, HTML y JavaScript en Código completo de captura de datos de entrada de lápiz.

2. Configurar una superficie de dibujo en la interfaz de usuario

Este ejemplo usa un elemento Canvas como superficie de dibujo y representación de entrada de lápiz.

canvas es un elemento de HTML5 que actúa como superficie para dibujar, representar y manipular de forma dinámica elementos gráficos en una aplicación de la Tienda Windows con JavaScript.

Nota También se puede usar un objeto Scalable Vector Graphics (SVG).

En el archivo HTML, declara un elemento canvas y asígnale un id de "inkCanvas". Usa este id para hacer referencia al elemento desde el archivo JavaScript.

<body>
<div id="applicationTitle">Ink sample</div>
<div>
    <canvas id="inkCanvas"></canvas>
    <div>
        <button id="load">Load</button>
        <button id="save">Save</button>
        <button id="draw">Draw</button>
        <button id="select">Select</button>
        <button id="selectall">Select all</button>
        <button id="erase">Erase</button>
        <button id="eraseAll">Erase all</button>
        <button id="recognize" value="selected">Handwriting recognition</button>
    </div>
</div>
<div id="modeMessage"></div>
<div id="deviceMessage"></div>
<div id="statusMessage"></div>
</body>

3. Crea un administrador de entrada de lápiz

Un objeto InkManager procesa y manipula los datos relacionados con la entrada de lápiz obtenidos de la entrada del puntero.

En el archivo JavaScript, crea el administrador de entrada de lápiz. Para este ejemplo, el objeto InkManager es global.

        // Create an ink manager.
        // InkManager is documented at https://go.microsoft.com/fwlink/?LinkID=260648.
        var inkManager = new Windows.UI.Input.Inking.InkManager();

4. Conecta la aplicación a la superficie de dibujo

Para trabajar con el canvas y sus elementos secundarios, debes definir dos variables.

A la primera variable (inkCanvas) se le asigna una referencia al elemento canvas, "inkCanvas", usando getElementById. A la segunda variable (inkContext) se le asigna el contexto de dibujo del elemento canvas (en este caso, una superficie en 2D) usando el método getContext.

// Obtain reference to the specified element.
function get(elementId)
{
    return document.getElementById(elementId);
}

inkCanvas = get("inkCanvas");
inkContext = inkCanvas.getContext("2d");

5. Define las funciones de los controladores de eventos

En esta sección, definimos los diferentes controladores de evento necesarios para la entrada del puntero. Estarán asociados a las escuchas de eventos que agregues en el próximo paso.

pointerdown es el evento que se usa para iniciar la captura de entrada de lápiz.

En este ejemplo, se usan los métodos beginPath y moveTo para establecer la ubicación, en coordenadas de pantalla, en la cual empezar a mostrar los datos de entrada de lápiz. (Capturar entrada de lápiz y mostrarla son dos acciones independientes). A continuación, se procesa el evento pointerdown mediante el inkManager pasando los datos de puntero (currentPoint) del evento a ProcessPointerDown.

La variable global, penID, se usa para almacenar el pointerId del puntero de entrada asociado con este evento. Más adelante, veremos por qué es necesario.

Nota Este ejemplo filtra la entrada del puntero (usando la propiedad pointerType) de modo que la captura de entrada de lápiz se ejecuta para la entrada de la pluma/lápiz y el mouse solo cuando se presiona el botón primario. La entrada táctil se reserva para controlar la interfaz de usuario de la aplicación.

    function getPointerDeviceType(pId)
    {
        var pointerDeviceType;
        var pointerPoint = Windows.UI.Input.PointerPoint.getCurrentPoint(pId);
        switch (pointerPoint.pointerDevice.pointerDeviceType)
        {
            case Windows.Devices.Input.PointerDeviceType.touch:
                pointerDeviceType = "Touch";
                break;

            case Windows.Devices.Input.PointerDeviceType.pen:
                pointerDeviceType = "Pen";
                break;

            case Windows.Devices.Input.PointerDeviceType.mouse:
                pointerDeviceType = "Mouse";
                break;
            default:
                pointerDeviceType = "Undefined";
        }
        deviceMessage.innerText = pointerDeviceType;
        return pointerDeviceType;
    }

    // Occurs when the pointer (touch, pen, mouse) is detected by the canvas.
    // Each stroke begins with onPointerDown.
    function onPointerDown(evt)
    {
        // Get the device type for the pointer input.
        pointerDeviceType = getPointerDeviceType(evt.pointerId);

        // Process pen and mouse (with left button) only. Reserve touch for manipulations.
        if ((pointerDeviceType === "Pen") || ((pointerDeviceType === "Mouse") && (evt.button === 0)))
        {
            statusMessage.innerText = pointerDeviceType + " pointer down: Start stroke. "

            // Process one pointer at a time.
            if (pointerId === -1)
            {
                var current = evt.currentPoint;

                // Start drawing the stroke.
                inkContext.beginPath();
                inkContext.lineWidth = strokeWidth;
                inkContext.strokeStyle = strokeColor;

                inkContext.moveTo(current.position.x, current.position.y);

                // Add current pointer to the ink manager (begin stroke).
                inkManager.processPointerDown(current);

                // The pointer id is used to restrict input processing to the current stroke.
                pointerId = evt.pointerId;
            }
        }
        else
        {
            // Process touch input.
        }
    }

Los datos de entrada de lápiz se capturan cuando ocurre un evento pointermove.

En el ejemplo siguiente, la variable global, penId, se usa para asegurarse de que el pointerId para este evento sea idéntico al del evento pointerdown asociado. Si no lo es, la entrada se pasa por alto y no se capturan datos de entrada de lápiz. Este procedimiento es útil, por ejemplo, para filtrar la entrada de un mouse que se movió por error mientras se realizaba un trazo con una pluma.

Se llama a los métodos lineTo (usando la RawPosition del puntero notificada por el digitalizador) y stroke para dibujar y mostrar los datos de entrada de lápiz inmediatamente como segmentos de línea discretos. (Capturar entrada de lápiz y mostrarla son dos acciones independientes). A continuación, se procesa el evento pointermove mediante el inkManager pasando los datos de puntero (currentPoint) del evento a ProcessPointerUpdate.

    // Mouse: Occurs when the pointer moves.
    // Pen/Touch: Occurs at a steady rate (approx. 100 messages/second) whether the pointer moves or not.
    function onPointerMove(evt)
    {
        // Process pen and mouse (with left button) only. Reserve touch for manipulations.
        if ((pointerDeviceType === "Pen") || ((pointerDeviceType === "Mouse") && (evt.button === -1)))
        {
            statusMessage.innerText = pointerDeviceType + " pointer move: Draw stroke as lines. "
            // The pointer Id is used to restrict input processing to the current stroke.
            // pointerId is updated in onPointerDown().
            if (evt.pointerId === pointerId)
            {
                var current = evt.currentPoint;

                // Draw stroke in real time.
                inkContext.lineTo(current.rawPosition.x, current.rawPosition.y);
                inkContext.stroke();

                // Add current pointer to the ink manager (update stroke).
                inkManager.processPointerUpdate(current);
            }
        }
        else
        {
            // Process touch input.
        }
    }

La captura de los datos de entrada de lápiz finaliza cuando ocurre un evento pointerup.

Como en el ejemplo anterior, esta función usa la variable global, penId, para asegurar que el pointerId de este evento sea idéntico al de los eventos pointerdown y pointermove asociados. Si no lo es, la entrada se pasa por alto y no se capturan datos de entrada de lápiz.

Se llama a los métodos lineTo, stroke y closePath para finalizar y cerrar la ruta de acceso creada en la función handlePointerDown. A continuación, se procesa el evento pointerup mediante el inkManager pasando los datos de puntero (currentPoint) del evento a ProcessPointerUp.

La función renderAllStrokes de este ejemplo es opcional y se llama a esta función para procesar los datos de entrada de lápiz y representar los segmentos de trazos sin procesar en el elemento canvas como curvas suaves (consulta el tema sobre el procedimiento para representar datos de entrada de lápiz).
```
// Occurs when the pointer (touch, pen, mouse) is lifted from the canvas.
// Each stroke ends with onPointerUp.
function onPointerUp(evt)
{
    // Process pen and mouse (with left button) only. Reserve touch for manipulations.
    if ((pointerDeviceType === "Pen") || ((pointerDeviceType === "Mouse") && (evt.button === 0)))
    {
        statusMessage.innerText = pointerDeviceType + " pointer up: Finish stroke. "
        if (evt.pointerId === pointerId) {
            // Add current pointer to the ink manager (end stroke).
            inkManager.processPointerUp(evt.currentPoint);

            // End live drawing.
            inkContext.closePath();

            // Render strokes using bezier curves.
            renderAllStrokes();

            // Reset pointer Id.
            pointerId = -1;
        }
    }
    else
    {
        // Process touch input.
    }
}
```

Consulta Temas relacionados en la parte inferior de esta página para obtener vínculos a muestras más complejas.

6. Adjuntar escuchas de eventos de entrada a la superficie de dibujo

Usando la referencia al elemento canvas, adjunta escuchas PointerEvent y asócialas a los controladores de eventos del puntero definidos en el paso anterior.

pointerdown se desencadena cuando el usuario presiona la superficie del digitalizador con una pluma o con el dedo, o bien hace clic con el botón primario del mouse.
pointermove se desencadena cuando el puntero asociado con el evento pointerdown se desplaza por el canvas.
pointerup se desencadena cuando el usuario levanta el lápiz o el dedo de la superficie del digitalizador, o cuando libera el botón primario del mouse.

// Set up the handlers for input processing.
inkCanvas.addEventListener("pointerdown", onPointerDown, false);
inkCanvas.addEventListener("pointermove", onPointerMove, false);
inkCanvas.addEventListener("pointerup", onPointerUp, false);

Resumen

Ahora tienes una idea básica de cómo capturar datos de entrada de lápiz con tu aplicación de la Tienda Windows.

Para ver este código en acción, crea y ejecuta las siguientes muestras de entrada de lápiz en la página de inicio de muestra de una aplicación de la Tienda Windows:

Entrada: muestra de entrada de lápiz simplificada: en esta muestra se ven otras funcionalidades de entrada de lápiz, como guardar y cargar la entrada de lápiz, seleccionar y eliminar la entrada de lápiz y convertir los trazos de entrada de lápiz en texto mediante el reconocimiento de escritura a mano.
Entrada: muestra de entrada de lápiz: además de la funcionalidad demostrada en Entrada: muestra de entrada de lápiz simplificada, esta muestra proporciona una interfaz de usuario más rica y demuestra cómo buscar dentro de los resultados de reconocimiento.