Dieser Artikel wurde noch nicht bewertet - Dieses Thema bewerten.

Schnellstart: Erfassen von Freihanddaten (Windows Store-Apps mit JavaScript und HTML)

Inhalt dieses Artikels

Voraussetzungen
Einrichten einer Zeichenoberfläche in der UI
Erstellen eines Freihand-Managers
Verbinden der App mit der Zeichenoberfläche
Anhängen von Eingabeereignislistenern an die Zeichenoberfläche
Festlegen der Ereignishandlerfunktionen
Vollständiges Beispiel
Zusammenfassung
Verwandte Themen

Wichtige APIs

Windows.UI.Input.Inking

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

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 benötigen Sie Folgendes:

Windows 8 und Microsoft Visual Studio Express 2012 für Windows 8. Informationen zum Herunterladen finden Sie unter Herunterladen der Tools.
Eine Entwicklerlizenz. Entsprechende Anweisungen finden Sie unter Anfordern einer Entwicklerlizenz.
Anweisungen zum Erstellen der ersten Windows Store-App finden Sie unter Erste Schritte mit Windows Store-Apps mit JavaScript.
Informationen zur Verwendung von Objekten und Steuerelementen der Windows-Bibliothek für JavaScript finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Anweisungen

1. Einrichten einer Zeichenoberfläche in der UI

In diesem Beispiel wird ein HTML5-Canvaselement als Benutzeroberfläche für das Zeichnen und Rendern von Freihand 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.

Wir deklarieren hier ein canvas-Element mit der ID inkCanvas, mit der Sie auf das Element in JavaScript verweisen.

HTML


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

Initialisieren Sie ein InkManager-Objekt, mit dem die Freihanddaten aus der Zeigereingabe verarbeitet und bearbeitet werden.

JavaScript


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

3. 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 weisen Sie mit getElementById einen Verweis auf das canvas-Element (inkCanvas) zu. Der zweiten Variablen weisen Sie den Zeichnungskontext (in diesem Fall eine 2D-Oberfläche) für das canvas-Element zu, indem Sie die getContext-Methode aufrufen.

JavaScript


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

JavaScript


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

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

Verwenden Sie den Verweis auf das canvas-Element, um die folgenden drei MSPointerEvent-Listener für jede Zeigergeräteingabe anzufügen. (Die in diesem Beispiel genannten Ereignishandlerfunktionen werden weiter unten in diesem Schnellstartthema erläutert.)

MSPointerDown wird ausgelöst, wenn Benutzer mit einem Stift oder Finger auf die Oberfläche des Digitalisierers drücken oder mit der linken Maustaste klicken.
MSPointerMove wird ausgelöst, wenn der dem MSPointerDown-Ereignis zugeordnete Zeiger über die canvas bewegt wird.
MSPointerUp wird ausgelöst, wenn Benutzer den Stift oder Finger von der Oberfläche des Digitalisierers heben oder die linke Maustaste loslassen.

JavaScript


// Set up the handlers for input processing.
inkCanvas.addEventListener("MSPointerDown", onPointerDown, false);
inkCanvas.addEventListener("MSPointerMove", onPointerMove, false);
inkCanvas.addEventListener("MSPointerUp", onPointerUp, false);

5. Festlegen der Ereignishandlerfunktionen

In diesem Abschnitt werden die Ereignishandler festgelegt, die den im vorherigen Schritt hinzugefügten Ereignislistenern zugeordnet werden sollen.

Mit dem MSPointerDown-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 MSPointerDown-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 Fingereingabe ist für das Bearbeiten der UI der App vorgesehen.

JavaScript


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

JavaScript


    // 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 MSPointerMove-Ereignis stattfindet.

Im folgenden Beispiel wird die globale Variable penId verwendet, um sicherzustellen, dass die pointerId-Eigenschaft für dieses Ereignis und die des zugeordneten MSPointerDown-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 MSPointerMove-Ereignis wird dann über inkManager durch Übergabe der Zeigerdaten (currentPoint) des Ereignisses an ProcessPointerUpdate verarbeitet.

JavaScript


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

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

Wie im vorherigen Beispiel verwendet diese Funktion die globale Variable penId, um sicherzustellen, dass die pointerId-Eigenschaft für dieses Ereignis und die der zugeordneten Ereignisse MSPointerDown und MSPointerMove 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 MSPointerUp-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).

JavaScript


// 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. Vollständiges Beispiel

Informationen hierzu finden Sie unter Erfassen von Freihanddaten (vollständiger Code).

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.