Eventos táctiles en aplicaciones Metro HTML5


Touch the Sun - IMG_9463_72dpi Los eventos táctiles en Windows 8 son muy fáciles de manejar y desde HTML5 tenemos un modo muy directo de hacerlo a través de tres eventos que nos permitirán manejar ratón, lápiz y dispositivo táctil a la vez y de una manera muy sencilla.

Estos son: MSPointerDown, MSPointerUp y MSPointerMove que podremos aplicar a cualquier elemento visual.

Para ver cómo funciona vamos a hacer una aplicación de dibujo muy básica con un canvas sobre el que podremos pintar con los dedos, con un dispositivo tipo lápiz o con el ratón. Colocamos un elemento canvas en el default.html de una aplicación Metro:

<canvas id="demoCanvas"></canvas>

Una vez tengamos el canvas, tendremos que utilizar esos eventos. En el onactivated de nuestra página (en default.js) vamos a añadir código a los eventos que he comentado antes:

var demoCanvas;
var ctx;

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        if (eventObject.detail.previousExecutionState !==
            Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        WinJS.UI.processAll();

        demoCanvas = document.querySelector("#demoCanvas");
        //ponemos el canvas a fullscreen
        demoCanvas.width = document.body.clientWidth;
        demoCanvas.height = document.body.clientHeight;

        //obtenemos el context para pintar
        ctx = demoCanvas.getContext("2d");

        //usamos los tres eventos para activar el pincel y pintar
        demoCanvas.addEventListener("MSPointerDown", startDrawing);
        demoCanvas.addEventListener("MSPointerUp", stopDrawing);
        demoCanvas.addEventListener("MSPointerMove", draw);
    }
};

Una vez tenemos los eventos, vamos a escribir esos tres métodos para pintar en el canvas. Las funciones recibirán un parámetro con la información del evento.
En la función startDrawing vamos a recuperar qué tipo de puntero estamos utilizando (ratón, lápiz o táctil) para cambiar el grosor del trazo:

var doDraw = false;
var pointerDeviceType;

function startDrawing(e) {
    doDraw = true;
    var pointer = Windows.UI.Input.PointerPoint.getCurrentPoint(e.pointerId)
    pointerDeviceType= pointer.pointerDevice.pointerDeviceType;
    draw(e);
}

En el evento stopDrawing simplemente deshabilitamos el trazo, para evitar que vaya pintando cuando movemos el ratón:

function stopDrawing(e) {
    doDraw = false;
}

Y en el método draw pintaremos con trazos diferentes según el dispositivo y colores diferentes según el identificador del puntero, para poder identificar múltiples inputs simultáneos:

function draw(e) {
    if (doDraw) {
        //cambiamos entre tres colores según el id del puntero
        var id = e.pointerId % 3;
        var rgb = [0, 0, 0];
        rgb[id] = 255;

        //cambiamos el grosor según el puntero (ratón=fino, lápiz=mediano, táctil=grueso)
        var width = 10;
        switch (pointerDeviceType) {
            case Windows.Devices.Input.PointerDeviceType.mouse:
                width = 10;
            case Windows.Devices.Input.PointerDeviceType.pen:
                width = 20;
                break;
            case Windows.Devices.Input.PointerDeviceType.touch:
                width = 40;
        }

        //pintamos un círculo en el contexto 2d en la posición del movimiento
        ctx.beginPath();
        ctx.arc(e.clientX, e.clientY, width, 0, 2 * Math.PI, false);
        ctx.fillStyle = "rgb(" + rgb.join(",") + ")";
        ctx.fill();
    }
}

Aquí podemos ver el resultado en el simulador de Windows 8:

Puedes descargar el código de ejemplo en Codeplex.

Anuncios

  1. Pingback: Algunos ejemplos de HTML y JavaScript para aplicaciones Windows Store « Mouseless Me
  2. Pingback: La funcionalidad deshacer y repetir en JavaScript para Windows 8 « Mouseless Me

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s