Einführung in die Verwendung fortgeschrittener Gesten in Javascript_html5-Tutorial-Fähigkeiten

Die neu hinzugefügte Erkennungsunterstützung für erweiterte Benutzereingaben in IE10, zum Beispiel: Registrieren Sie einen Klickvorgang, und durch den Satz addEventListener können Sie erkennen, auf welches Gerät der aktuelle Benutzer klickt, ob es sich um einen Fingerklick oder einen Mausklick handelt . Oder klicken Sie mit einem Stift (Tablet-Geräte werden alle mit einem Stift geliefert).

<Leinwand id="MyCanvas">Leinwand >
MyCanvas.addEventListener( "MSPointerDown"
, MyBack, false); function MyBack(e) {                                                                                                                                 ; >
Der obige Code kann identifizieren, auf welches Gerät der aktuelle Benutzer klickt, und es über e.pointerType in der Rückrufmethode bestimmen. Die Maus ist 4, der Stift ist 3 und der Finger ist 2. Was für ein Gerät der Wert 1 ist, muss noch untersucht werden.
Beachten Sie außerdem, dass die registrierten Methodenereignisse auch etwas anders sind, wenn Sie die Erkennung von Eingabegeräten in JavaScript hinzufügen möchten.
Das von
addEventListener hinzugefügte Ereignis ist MSPointerDown In IE10 werden für eine solche Erkennung mehrerer Geräte Fingerklicks priorisiert, sofern die normale Klickfunktion nicht beeinträchtigt wird. Allerdings erkennt IE10 nicht nur das Eingabegerät des Benutzers, sondern unterstützt auch viele erweiterte Gesten Das Folgende ist eine Demonstration der erweiterten Gestenunterstützung von IE10

Gestenobjekt erstellen

Der erste Schritt beim Umgang mit Gesten auf Ihrer Website besteht darin, ein Gestenobjekt zu instanziieren.

<span style="COLOR: blue">var<p> myGesture = <span style="COLOR: blue">new</span></p> MSGesture();</span>

Als nächstes geben Sie ein Zielelement für die Geste an. Der Browser löst das Gestenereignis für das Element aus. Gleichzeitig kann dieses Element auch den Koordinatenraum des Ereignisses bestimmen.

elm = document.getElementById(<span style="COLOR: maroon">"someElement"</span>

);

<span style="COLOR: blue">var</span> myGesture = <span style="COLOR: blue">new</span> MSGesture();

elm.addEventListener(<span style="COLOR: maroon">"MSGestureChange"</span>

, handleGesture);

Enfin, indiquez à l'objet gestuel quels pointeurs gérer lors de la reconnaissance gestuelle.

elm.addEventListener(<span style="COLOR: maroon">"MSPointerDown"</span>, <span style="COLOR: blue">function</span> (evt) {

<span style="COLOR: rgb(0,100,0)">// adds the current mouse, pen, or touch contact for gesture recognition</span>

myGesture.addPointer(evt.pointerId);

});

Remarque : n'oubliez pas que vous devez utiliser –ms-touch-action pour configurer l'élément afin de l'empêcher d'effectuer des actions tactiles par défaut (par exemple, panoramique et zoom) et de fournir des événements de pointeur pour la saisie.

Gestion des événements gestuels

Une fois qu'un objet gestuel a une cible valide et au moins un pointeur ajouté, il commencera à déclencher des événements gestuels. Les événements gestuels peuvent être divisés en deux types : les gestes statiques (par exemple, cliquer ou maintenir) et les gestes dynamiques (par exemple, pincer, faire pivoter et glisser).

Cliquez

La reconnaissance gestuelle la plus élémentaire est le clic. Lorsqu'un clic est détecté, l'événement MSGestureTap sera déclenché sur l'élément cible de l'objet geste. Contrairement aux événements de clic, les gestes de frappe ne peuvent être déclenchés que lorsque l'utilisateur touche, appuie sur un bouton de la souris ou touche avec un stylet sans bouger. Ceci est souvent utile si vous souhaitez faire la distinction entre un utilisateur cliquant sur un élément et un utilisateur le faisant glisser.

Appui long

Le geste d'appui long fait référence à une opération dans laquelle l'utilisateur touche l'écran avec un doigt, le maintient un instant et le soulève sans bouger. Lors d'une interaction par appui long, l'événement MSGestureHold sera déclenché plusieurs fois pour différents états du geste :

Copier le code

Le code est le suivant :

element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Begin signale le début d'un geste. Pour le geste Hold, cela signifie que l'utilisateur est resté suffisamment longtemps en place pour que le geste devienne une pression prolongée complète si le doigt est levé.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End signale la fin du geste.
>
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// Annuler signale que l'utilisateur a commencé le geste mais l'a annulé. Pour le maintien, cela se produit lorsque l'utilisateur s'éloigne avant de soulever. Ce drapeau est envoyé avec le drapeau de fin, signalant que la reconnaissance du geste est terminée.
>
}

Gestes dynamiques (pincer, faire pivoter, glisser et faire glisser)

Les gestes dynamiques (par exemple pincer ou faire pivoter) sont signalés comme des transitions, un peu comme les transitions CSS 2D. Les gestes dynamiques peuvent déclencher trois événements : MSGestureStart, MSGestureChange (qui se déclenche à plusieurs reprises à mesure que le geste se poursuit) et MSGestureEnd. Chaque événement contient des informations sur la mise à l'échelle (rétrécissement), la rotation, la transformation et la vitesse.

Étant donné que les gestes dynamiques sont signalés comme des transitions, il est facile de manipuler des éléments comme des photos ou des puzzles à l'aide de MSGesture qui inclut des transitions CSS 2D. Par exemple, vous pouvez activer la mise à l'échelle, la rotation et le glissement des éléments via :

Copier le code

Le code est le suivant :

targetElement.addEventListener("MSGestureChange", manipulerElement);
function manipulElement(e) {
// Décommentez le code suivant si vous souhaitez désactiver l'inertie intégrée fournie par reconnaissance dynamique des gestes
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSMatrix(e.target.style.transform); Transformation CSS sur l'élément
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Déplacer l'origine de la transformation sous le centre du geste
.rotate(e . rotation * 180 / Math.PI) // Appliquer la rotation
.scale(e.scale) // Appliquer l'échelle
.translate(e.translationX, e.translationY) // Appliquer la traduction
.translate ( -e.offsetX, -e.offsetY); // Reculer l'origine de la transformation
>

Les gestes dynamiques tels que la mise à l'échelle et la rotation peuvent prendre en charge les opérations de la souris, qui peuvent être effectué en tournant Ceci est réalisé en utilisant respectivement les touches de modification CTRL ou SHIFT tout en utilisant la molette de la souris.