js-Implementierung der Mac-Touchpad-Zwei-Finger-Ereigniszusammenfassung

Vorwort

Als ich heutzutage ein Webproblem behob, musste ich das Mac-Touchpad-Zwei-Finger--Ereignis (oben, unten, links, rechts, hineinzoomen, herauszoomen) erfassen, aber ich stellte fest, dass es keine fertige Lösung gab. Rad gemacht, also musste ich es selbst machen.

Beispiel: jquery.mousewheel.js (Hinzufügen von browserübergreifender Mausradunterstützung) ist zu einfach und unterstützt nicht das Mac-Zwei-Finger--Verhalten, sodass es nicht verwendet werden kann.

Ziel

Es gibt zwei spezifische Möglichkeiten, das Zwei-Finger-Verhalten des Mac-Touchpads zu erhalten: Eine ist das Ziehen der Route in Echtzeit und die andere sind Gesten (oben, unten, links, rechts, vergrößern, verkleinern). ).

Schwierigkeiten

Die Zwei-Finger-Aktion löst nur das Mausrad-Ereignis aus. Andere Berührungen und Mausereignisse werden nicht ausgelöst. Sie können nur damit beginnen.

Zwei-Finger-Funktion

1. Während des schnellen Gleitvorgangs unterscheiden sich die positiven und negativen Werte der Anfangswerte von deltaX und deltaY von der Gleitrichtung.

2. Während des langsamen Gleitprozesses ist der Wertebereich der DeltaX- und DeltaY-Werte sehr klein, im Allgemeinen in [-3, 3].

3. Innerhalb einer Sekunde wird das Mausrad-Ereignis etwa 100 Mal ausgelöst.

4. Während des Gleitvorgangs tritt beim numerischen Wert ein Jitterproblem auf.

Drag-Route-Idee (Pfad) implementieren

Für schnelles Wischen

1. Die Daten, deren anfängliche positive und negative Werte von deltaX und deltaY sich von der Gleitrichtung unterscheiden, müssen verworfen werden. (Weil es nicht die wahre Richtung ist)

2. Die DeltaX- und DeltaY-Werte jedes Triggers werden voneinander subtrahiert. Wenn der Ergebniswert von der Richtung abweicht, wird er verworfen.

3. Der verbleibende Unterschied ist die Richtungsbewegungsdistanz.

4. Alle Unterschiede in den beiden Richtungen werden addiert, und es werden insgesamt zwei Gruppen ausgewählt. Die positive oder negative Gruppe bestimmt die Richtung.

Für langsames Wischen

1. Da der Bereich der DeltaX- und DeltaY-Werte sehr klein ist, werden beide beibehalten, aber auch diejenigen mit unterschiedlichen Werten und Richtungen werden verworfen.

2. Alle Unterschiede in den beiden Richtungen werden addiert und es werden insgesamt zwei Gruppen ausgewählt. Die positive oder negative Gruppe bestimmt die Richtung.

Gestenideen umsetzen (Geste)

Zeichnen Sie basierend auf dem oben Gesagten deltaX, deltaY und die paarweise Differenz innerhalb eines Zeitraums auf:

deltaX und deltaY werden zum Zählen von Vergrößerungs- und Verkleinerungsgesten verwendet.

Die paarweise Differenz wird zum Zählen von Aufwärts-, Abwärts-, Links- und Rechtshandgesten verwendet.

Daher handelt es sich bei einer Geste um eine Geste über einen bestimmten Zeitraum, nicht um einen bestimmten Zeitpunkt.

Implementierungscode

Ich werde den spezifischen Code nicht veröffentlichen, aber Sie können ihn direkt von meinem GitHub herunterladen: //m.sbmmt.com/

Zusammenfassung

Routenproblem: Die per Mausrad angegebenen deltaX- und deltaY-Werte unterscheiden sich stark von den Betriebseffekten, und der schnelle Gleiteffekt ist besonders ungenau.

Gestenproblem: Aufgrund des dritten Punkts der Zwei-Finger-Eigenschaften kann die Gestenimplementierung nicht genau sein. Selbst wenn der Zeitraum sehr kurz ist, wird er aufgrund der Datenmenge (die Idee von) noch ungenauer ​​Kalkül kann nicht verwendet werden); die Zeitspanne Je länger die Segmente werden, desto länger wird auch die Reaktionszeit;

Sie können den Code herunterladen, um den spezifischen Effekt zu sehen. Sie können ihn jedoch herunterladen und ausprobieren. Wenn Sie eine bessere Lösung haben, sagen Sie mir bitte, danke.​

Das obige ist der detaillierte Inhalt vonjs-Implementierung der Mac-Touchpad-Zwei-Finger-Ereigniszusammenfassung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!