Schnellstart: Erfassen von Freihanddaten (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In dieser Schnellstartanleitung wird das Erfassen von Freihanddaten aus einem Eingabedigitalisierer erläutert.

Hinweis Der in diesem Thema verwendete Code stammt aus einem voll funktionsfähigen JavaScript-Projekt aus Microsoft Visual Studio 2013. Das Projekt steht zwar nicht als Download zur Verfügung, aber die vollständigen Cascading Stylesheets (CSS), den HTML-Code und die JavaScript-Dateien finden Sie unter Erfassen von Freihanddaten (vollständiger Code).

Updates für Windows 8.1: In Windows 8.1 werden eine Reihe von Updates und Verbesserungen für die Zeigereingabe-APIs eingeführt. Weitere Informationen dazu finden Sie unter API-Änderungen für Windows 8.1.

Ziel: Nach Abschluss dieser Schnellstartanleitung wissen Sie, wie Sie mit der Freihandplattform Eingaben eines Zeigegeräts (Maus, Stift oder Touchscreen) in einer Windows Store-App mit JavaScript erkennen und erfassen.

Voraussetzungen

Es wird vorausgesetzt, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können, in der die Vorlage der Windows-Bibliothek für JavaScript verwendet wird.

Für dieses Lernprogramm ist Folgendes erforderlich:

Installieren von Windows 8
Installieren Sie Microsoft Visual Studio.
Anfordern einer Entwicklerlizenz Anweisungen finden Sie unter Entwickeln mit Visual Studio 2013.
Erstellen Ihrer ersten Windows Store-App mit JavaScript
Informationen zu WinJS-Objekten und -Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Anweisungen

1. Erstellen eines neuen Projekts vom Typ "Leere App" in Visual Studio und Hinzufügen von HTML-, CSS- und JavaScript-Dateien

Für dieses Beispiel werden eine HTML-Datei ("InkPage.html"), eine CSS-Datei ("InkPage.css") und eine JavaScript-Datei ("InkPage.js") verwendet.

Die vollständigen CSS-, HTML- und JavaScript-Dateien finden Sie unter Erfassen von Freihanddaten (vollständiger Code).

2. Einrichten einer Zeichenoberfläche in der UI

In diesem Beispiel wird eine Canvas als Benutzeroberfläche für das Zeichnen und Rendern von Freihandelementen verwendet.

canvas ist ein HTML5-Element, das als Oberfläche für das dynamische Zeichnen, Rendern und Ändern von grafischen Elementen in einer Windows Store-App mit JavaScript fungiert.

Hinweis Sie können auch ein SVG-Objekt (Scalable Vector Graphics) verwenden.

Deklarieren Sie in der HTML-Datei ein canvas-Element, und weisen Sie als id dafür "inkCanvas" zu. Verwenden Sie diese id, um aus der JavaScript-Datei auf dieses Element zu verweisen.

<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. Erstellen eines Freihand-Managers

Über ein InkManager-Objekt werden die Freihanddaten aus der Zeigereingabe verarbeitet und geändert.

Erstellen Sie in der JavaScript-Datei den Freihand-Manager. In diesem Beispiel ist das InkManager-Objekt global gültig.

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

4. Verbinden der App mit der Zeichenoberfläche

Um mit dem canvas-Element und seinen untergeordneten Elementen arbeiten zu können, müssen Sie zwei Variablen definieren.

Der ersten Variablen (inkCanvas) wird ein Verweis auf das canvas-Element ("inkCanvas") zugewiesen, indem getElementById verwendet wird. Der zweiten Variablen (inkContext) wird der Zeichnungskontext des canvas-Elements (hier eine 2D-Oberfläche) zugewiesen, indem getContext verwendet wird.

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

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

5. Festlegen der Ereignishandlerfunktionen

In diesem Abschnitt werden die verschiedenen Ereignishandler definiert, die für die Zeigereingabe erforderlich sind. Diese werden den Ereignislistenern zugeordnet, die Sie im nächsten Schritt erstellen.

Mit dem pointerdown-Ereignis wird die Freihanderfassung gestartet.

In diesem Beispiel werden die Methoden beginPath und moveTo verwendet, um mit Bildschirmkoordinaten die Stelle anzugeben, an der die Anzeige der Freihanddaten beginnen soll. (Erfassen und Anzeigen von Freihanddaten sind zwei verschiedene Aktionen.) Das pointerdown-Ereignis wird dann über inkManager durch Übergabe der Zeigerdaten (currentPoint) des Ereignisses an ProcessPointerDown verarbeitet.

Die globale Variable (penID) wird zum Speichern der pointerId-Eigenschaft des Eingabezeigers verwendet, der diesem Ereignis zugeordnet ist Die Notwendigkeit hierfür wird später erläutert.

Hinweis In diesem Beispiel wird die Zeigereingabe gefiltert (mit der pointerType-Eigenschaft), sodass die Freihanderfassung für Stift- und Mauseingaben nur beim Drücken der linken Taste ausgeführt wird. Die Toucheingabe ist für das Bearbeiten der UI der App vorgesehen.

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

Freihanddaten werden erfasst, wenn ein pointermove-Ereignis stattfindet.

Im folgenden Beispiel wird die globale Variable penId verwendet, um sicherzustellen, dass der Wert für pointerId für dieses Ereignis und der Wert des verknüpften pointerdown-Ereignisses identisch sind. Sind sie nicht identisch, wird die Eingabe ignoriert, und es werden keine Freihanddaten erfasst. Dies ist beispielsweise nützlich zum Filtern der Eingabe über eine Maus, die versehentlich während der Stifteingabe bewegt wird.

Die Methoden lineTo (mit der vom Digitalisierer gemeldeten RawPosition-Eigenschaft des Zeigers) und stroke werden aufgerufen, um die Freihanddaten sofort als separate Liniensegmente zu zeichnen und anzuzeigen. (Erfassen und Anzeigen von Freihanddaten sind zwei verschiedene Aktionen.) Das pointermove-Ereignis wird dann über inkManager durch Übergabe der Zeigerdaten (currentPoint) des Ereignisses an ProcessPointerUpdate verarbeitet.

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

Das Erfassen von Freihanddaten ist abgeschlossen, wenn ein pointerup-Ereignis stattfindet.

Wie im vorherigen Beispiel verwendet diese Funktion die globale Variable penId, um sicherzustellen, dass der Wert für pointerId für dieses Ereignis und der Wert des verknüpften pointerdown-Ereignisses und pointermove-Ereignisses identisch sind. Sind sie nicht identisch, wird die Eingabe ignoriert, und es werden keine Freihanddaten erfasst.

Die Methoden lineTo, stroke und closePath werden aufgerufen, um den in der handlePointerDown-Funktion erstellten Pfad zu vervollständigen und zu schließen. Das pointerup-Ereignis wird dann über inkManager durch Übergabe der Zeigerdaten (currentPoint) des Ereignisses an ProcessPointerUp verarbeitet.

Die renderAllStrokes-Funktion in diesem Beispiel ist optional und wird aufgerufen, um die Freihanddaten zu verarbeiten und die unformatierten Strichsegmente im canvas-Element als gleichmäßige Kurven zu zeichnen (siehe Rendern von Freihanddaten).
```
// 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.
    }
}
```

Links zu komplexeren Beispielen finden Sie weiter unten unter "Verwandte Themen".

6. Anhängen von Eingabeereignislistenern an die Zeichenoberfläche

Fügen Sie mithilfe des Verweises auf das canvas-Element PointerEvent-Listener an, und ordnen Sie ihnen die Zeigerereignishandler zu, die im vorherigen Schritt definiert wurden.

pointerdown wird ausgelöst, wenn ein Benutzer mit dem Stift oder Finger auf die Digitalisiereroberfläche drückt oder mit der linken Maustaste klickt.
pointermove wird ausgelöst, wenn der dem pointerdown-Ereignis zugeordnete Zeiger über die canvas bewegt wird.
pointerup wird ausgelöst, wenn Benutzer den Stift oder Finger von der Oberfläche des Digitalisierers heben oder die linke Maustaste loslassen.

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

Zusammenfassung

Sie haben nun grundlegende Kenntnisse darüber, wie Sie Freihanddaten in Ihrer Windows Store-App erfassen.

Um diesen Code in Aktion zu sehen, erstellen Sie folgende Freihandbeispiele, und führen Sie sie auf der Homepage für Beispiele von Windows Store-Apps aus:

Eingabe: vereinfachtes Freihandbeispiel – Dieses Beispiel veranschaulicht Freihandfunktionen, z. B. zum Speichern und Laden von Freihanddaten, Auswählen und Löschen von Freihanddaten und Umwandeln von Freihanddaten in Text über die Schrifterkennung.
Eingabe: Freihandbeispiel – Neben den unter Eingabe: vereinfachtes Freihandbeispiel veranschaulichten Funktionen bietet dieses Beispiel eine umfangreichere Benutzeroberfläche und veranschaulicht das Durchsuchen von Erkennungsergebnissen.