Démarrage rapide : capture de données d’entrée manuscrite (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Ce démarrage rapide vous guide à travers la capture des données d’entrée manuscrite à partir d’un digitaliseur d’entrée.

Remarque Le code utilisé dans cette rubrique provient d’un projet JavaScript Microsoft Visual Studio 2013 entièrement fonctionnel. Le projet n’est pas disponible en téléchargement, mais vous pouvez récupérer les fichiers CSS (Cascading Style Sheets), HTML et JavaScript complets dans Code complet pour la capture de données d’entrée manuscrite.

Mises à jour pour Windows 8.1: Dans Windows 8.1, les API d’entrée de pointeur ont fait l’objet de plusieurs mises à jour et améliorations. Pour plus d’informations, voir Modifications apportées aux API pour Windows 8.1.

Objectif: Après ce démarrage rapide, vous comprendrez comment utiliser la plateforme d’encre pour détecter et capturer l’entrée à partir d’un périphérique de pointage (souris, stylo/stylet ou interaction tactile) dans une application du Windows Store en JavaScript.

Prérequis

Nous partons du principe que vous savez créer une application élémentaire du Windows Store en JavaScript qui utilise le modèle Bibliothèque Windows pour JavaScript.

Pour suivre ce didacticiel, vous devez :

Installer Windows 8.
Installer Microsoft Visual Studio.
Obtenir une licence de développeur. Pour obtenir des instructions, voir Développer des applications du Windows Store à l’aide de Visual Studio 2013.
Créer votre première application du Windows Store en JavaScript.
Passer en revue Démarrage rapide : ajout de contrôles et de styles WinJS pour découvrir les contrôles et objets WinJS.

Instructions

1. Créer un projet "Application vide" dans Visual Studio et ajouter les fichiers HTML, CSS et JavaScript

Pour cet exemple, nous disposons d’un fichier HTML ("InkPage.html"), d’un fichier CSS ("InkPage.css") et d’un fichier JavaScript ("InkPage.js").

Les fichiers CSS, HTML et JavaScript complets sont disponibles dans Code complet pour la capture de données d’entrée manuscrite.

2. Configurer une surface de dessin dans votre interface utilisateur

Cet exemple utilise un élément Canvas en tant que dessin manuscrit et surface de rendu.

Un canvas est un élément HTML 5 qui agit comme une surface pour le dessin, le rendu et la manipulation dynamiques d’éléments graphiques dans une application du Windows Store en JavaScript.

Remarque Un objet SVG (Scalable Vector Graphics) peut également être utilisé.

Dans le fichier HTML, déclarez un élément canvas et attribuez-lui un id ayant pour valeur "inkCanvas". Utilisez cet id pour référencer l’élément à partir du fichier 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. Créer un gestionnaire d’encre

Un objet InkManager traite et manipule les données d’entrée manuscrite reçues du pointeur en entrée.

Dans le fichier JavaScript, créez le gestionnaire d’entrée manuscrite. Pour cet exemple, l’objet InkManager est 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. Connecter votre application à la surface de dessin

Pour utiliser l’objet canvas et ses éléments enfants, vous devez définir deux variables.

La première variable (inkCanvas) se voit affecter une référence à l’élément canvas, "inkCanvas", au moyen de getElementById. La seconde variable (inkContext) se voit affecter le contexte de dessin de l’élément canvas (en l’occurrence, une surface 2D), au moyen de la méthode getContext.

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

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

5. Définir les fonctions du gestionnaire d’événements

Dans cette section, nous définissons les différents gestionnaires d’événements nécessaires pour l’entrée du pointeur. Ces derniers seront associés aux détecteurs d’événements que vous ajouterez à l’étape suivante.

pointerdown représente l’événement permettant de commencer la capture de l’encre.

Dans cet exemple, les méthodes beginPath et moveTo sont utilisées pour définir l’emplacement en coordonnées d’écran auxquelles l’affichage des données d’encre doit commencer. (La capture de l’encre et son affichage constituent deux actions à part.) L’événement pointerdown est alors traité à travers inkManager en passant les données du pointeur (currentPoint) de l’événement à ProcessPointerDown.

La variable globale, penID, est utilisée pour stocker le pointerId du pointeur d’entrée associé à cet événement. Nous aborderons cette nécessité plus loin.

Remarque Cet exemple filtre l’entrée du pointeur (à l’aide de la propriété pointerType), de telle sorte que la capture de l’encre soit effectuée pour l’entrée du stylo/stylet et l’entrée de la souris uniquement lorsque le bouton gauche est enfoncé. L’entrée tactile est réservée à la manipulation de l’interface utilisateur de l’application.

    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.
        }
    }

Les données d’encre sont capturées lorsqu’un événement pointermove se produit.

Dans l’exemple suivant, la variable globale, penId, permet de contrôler que la propriété pointerId de cet événement est identique à celle de l’événement pointerdown associé. Dans le cas contraire, l’entrée est ignorée et aucune donnée d’encre n’est capturée. Cela s’avère utile, par exemple, pour filtrer l’entrée depuis une souris poussée par inadvertance pendant un mouvement brusque du stylet traçant un trait.

Les méthodes lineTo (utilisant la propriété RawPosition du pointeur tel que signalé par le digitaliseur) et stroke sont utilisées pour dessiner et afficher les données d’entrée manuscrite directement sous forme de segments de ligne discrets. (La capture de l’encre et son affichage constituent deux actions à part.) L’événement pointermove est alors traité à travers inkManager en passant les données du pointeur (currentPoint) de l’événement à 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 capture des données d’encre se termine lorsqu’un événement pointerup se produit.

Comme pour l’exemple précédent, cette fonction utilise la variable globale, penId, pour s’assurer que la propriété pointerId pour cet événement est identique à celle des événements pointerdown et pointermove associés. Dans le cas contraire, l’entrée est ignorée et aucune donnée d’encre n’est capturée.

Les méthodes lineTo, stroke et closePath sont appelées pour terminer et fermer le chemin d’accès créé dans la fonction handlePointerDown. L’événement pointerup est alors traité à travers inkManager en passant les données du pointeur (currentPoint) de l’événement à ProcessPointerUp.

La fonction renderAllStrokes de cet exemple est facultative. Elle est appelée pour traiter les données d’entrée manuscrite et effectuer le rendu des segments de traits bruts sur l’élément canvas sous forme de courbes lisses (voir Comment assurer le rendu des données d’entrée manuscrite).
```
// 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.
    }
}
```

Des liens vers des exemples plus complexes sont proposés à la section Rubriques associées, en bas de cette page.

6. Attacher des détecteurs d’événements d’entrée à la surface de dessin

À l’aide de la référence à l’élément canvas, attachez des détecteurs PointerEvent et associez-les aux gestionnaires d’événements du pointeur définis à l’étape précédente.

L’événement pointerdown est déclenché lorsque l’utilisateur appuie sur la surface du digitaliseur à l’aide d’un stylet ou du doigt, ou lorsqu’il appuie sur le bouton gauche de la souris.
L’événement pointermove s’exécute lorsque le pointeur associé à l’événement pointerdown se déplace sur l’élément canvas.
pointerup est déclenché quand l’utilisateur met fin au contact (du stylet ou du doigt) sur la surface du digitaliseur, ou relâche le bouton gauche de la souris.

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

Récapitulatif

Vous disposez maintenant d’une connaissance de base de la capture des données d’entrée manuscrite avec votre application du Windows Store.

Pour voir ce code en action, générez et exécutez les exemples d’entrée manuscrite suivants sur la page d’accueil des exemples d’applications du Windows Store :

Entrée : exemple d’entrée manuscrite simplifiée - cet exemple illustre des fonctionnalités d’entrée manuscrite supplémentaires, telles que l’enregistrement et le chargement d’entrées manuscrites, la sélection et la suppression d’entrées manuscrites, ainsi que la conversion de traits d’encre en texte via la reconnaissance de l’écriture manuscrite.
Entrée : exemple d’entrée manuscrite - en plus de la fonctionnalité illustrée dans Entrée manuscrite simplifiée : exemple, cet exemple fournit une interface utilisateur enrichie et illustre comment effectuer des recherches parmi des résultats de reconnaissance.