Das Thema Gestures und Multitouch im Flash Player 10.1 und AIR 2 hatte ich bereits vorgestellt. Heute möchte ich im Speziellen auf die „Pan”-Geste eingehen, also das Scrollen mit zwei Fingern (TransformGestureEvent.GESTURE_PAN
). Landläufig könnte man es auch als „Wischen” mit 2 Fingern bezeichnen (manchmal auch Swipe, obwohl Adobe darunter die 3-Fingergeste versteht).
Die folgenden Beispielklassen zeigen, wie es möglich, zu erkennen, ob der Nutzer nach rechts, links, oben oder unten gewischt hat.
Dazu habe ich mir eine kleine Hilfsklasse gebaut. Sie wird als Event Handler benutzt und erfasst die Geste. Eine Geste hat 3 Phasen: GesturePhase.BEGIN
, GesturePhase.UPDATE
und GesturePhase.END
. Die Update-Phase wird mehrmals ausgelöst, so ca. 15-20x bei einem „Wisch”.
Zählt man nun, wie oft der Offset zwischen den Events in x- und y-Richtung ungleich 0 ist, erkennt man, in welche Richtung die Finger sich bewegt haben. So bedeutet zum Beispiel offsetX:-1.234 und offsetY:0 eine horizontale Bewegung. Sie wird als „1x horizontal” gespeichert.
Letztendlich kann dann nach Beenden der Geste (GesturePhase.END
) ausgewertet werden. Es kommt z.B. 20x horizontal und 3x vertikal als Ergebnis für ein Wischen, woraus man schließen kann, dass der Nutzer horizontal gemeint hat (und die 3x vertikal lediglich eine Ungenauigkeit sind).
Summiert man sich die ganzen Offsets, kann man am Vorzeichen der Summe nun die Richtung erkennen (bei horizontal ob links/rechts, bei vertikal ob oben/unten).
Demo-Klasse
Hier die Demo-Anwendung.
-
span style="color: #ff0000;">"on left""on right""on up""on down";
-
}
-
}
-
}
Klasse zum Erkennen der Pan-Richtung
-
span style="color: #808080; font-style: italic;">/**
-
* Detects the direction of the Pan gesture and dispatches a PanGestureDirectEvent
-
*
-
*/// count horizontal and vertical gestures
-
// sum up the offsets of the pan event
-
/**
-
* Use this function as event handler for the
-
* TransformGestureEvent of your object
-
*
-
* @param evt
-
*
-
*//**
-
* On every update event store the value and count the used direction
-
* @param offsetX
-
* @param offsetY
-
*
-
*//**
-
* Detect pan direction and dispatch event
-
*
-
*/""// horizontal
-
// vertical
-
/**
-
* Reset the variables
-
*
-
*/
Event
-
span style="color: #ff0000;">"panGestureUp""panGestureDown""panGestureRight""panGestureLeft"
2 Kommentare zum Beitrag "TransformGestureEvent: Richtung einer Pan-Geste ermitteln"
Gut und sauber gelöst :)
Danke :-)
Schreibe einen Kommentar