Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Capturar datos de entrada de lápiz (aplicaciones de la Tienda Windows con JavaScript y HTML)

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.

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

Para usar el código incluido en este tema, necesitarás:

Instrucciones

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

Este ejemplo usa un elemento Canvas de HTML 5 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).

Aquí declaramos un elemento canvas con un identificador inkCanvas que usarás para hacer referencia al elemento en 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>


2. Crea un administrador de entrada de lápiz

Inicializa un objeto InkManager que procesará y manipulará los datos relacionados con la entrada de lápiz obtenidos de la entrada del puntero.


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


3. 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 se le asigna una referencia al elemento canvas, inkCanvas, usando getElementById, y a la segunda se le asigna el contexto de dibujo (una superficie 2D en este caso) del elemento canvas mediante una llamada al método getContext.


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



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


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

Mediante la referencia al elemento canvas, adjunta las tres escuchas MSPointerEvent siguientes para la entrada del dispositivo señalador. (Más adelante en este inicio rápido trataremos las funciones de controlador de eventos identificadas en este ejemplo).

  • MSPointerDown 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.
  • MSPointerMove se desencadena cuando el puntero asociado con el evento MSPointerDown se desplaza por el canvas.
  • MSPointerUp 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("MSPointerDown", onPointerDown, false);
inkCanvas.addEventListener("MSPointerMove", onPointerMove, false);
inkCanvas.addEventListener("MSPointerUp", onPointerUp, false);


5. Define las funciones de los controladores de eventos

En esta sección, definimos los controladores de eventos que deben asociarse con las escuchas de eventos que agregaste en el paso anterior.

  • MSPointerDown 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 MSPointerDown 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 MSPointerMove.

    En el ejemplo siguiente, la variable global penId se usa para garantizar que el pointerId de este evento sea idéntico al del evento MSPointerDown 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 MSPointerMove 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 === 0)))
            {
                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 MSPointerUp.

    Como en el ejemplo anterior, esta función usa la variable global penId para garantizar que el pointerId de este evento sea idéntico al de los eventos MSPointerDown y MSPointerMove 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 MSPointerUp 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.
        }
    }
    
    
    

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:

Temas relacionados

Responder a la entrada de pluma y lápiz
Windows.UI.Input.Inking
Entrada: muestra de entrada de lápiz
Entrada: muestra de entrada de lápiz simplificada

 

 

Mostrar:
© 2018 Microsoft