js implémentation du résumé des événements à deux doigts du pavé tactile Mac

Avant-propos

Lors de la résolution d'un problème Web ces jours-ci, j'avais besoin de capturer l'événement à deux doigts du pavé tactile Mac (haut, bas, gauche, droite, zoom avant, zoom arrière), mais j'ai trouvé qu'il n'y avait pas de prêt- J'ai fait une roue, j'ai donc dû la fabriquer moi-même.

Par exemple : jquery.mousewheel.js (ajout de la prise en charge de la molette de la souris entre navigateurs) est trop simple et ne gère pas le comportement à deux doigts du Mac, il ne peut donc pas être utilisé.

Objectif

Il existe deux manières spécifiques d'obtenir le comportement à deux doigts du pavé tactile Mac, l'une consiste à faire glisser l'itinéraire en temps réel et l'autre à utiliser les gestes (haut, bas, gauche, droite, zoom avant, zoom arrière ).

Difficulté

L'action à deux doigts déclenchera uniquement l'événement de la molette de la souris. Les autres événements tactiles et de la souris ne seront pas déclenchés. Vous ne pouvez commencer qu'avec cela.

Fonction à deux doigts

1. Pendant le processus de glissement rapide, les valeurs positives et négatives des valeurs initiales de deltaX et deltaY sont différentes de la direction de glissement.

2. Au cours du processus de glissement lent, la plage de valeurs des valeurs deltaX et deltaY est très petite, généralement dans [-3, 3].

3. En 1 seconde, l'événement mousewheel est déclenché environ 100 fois.

4. Pendant le processus de glissement, la valeur numérique tremblera.

Implémenter l'idée d'un itinéraire de traînée (Chemin)

Pour des balayages rapides

1. Les données dont les valeurs initiales positives et négatives de deltaX et deltaY sont différentes de la direction de glissement doivent être rejetées. (Parce que ce n'est pas la vraie direction)

2. Les valeurs deltaX et deltaY de chaque déclencheur sont soustraites les unes des autres. Si la valeur du résultat est différente de la direction, elle est ignorée.

3. La différence restante est la distance de mouvement directionnelle.

4. Toutes les différences dans les deux directions sont additionnées et il y a deux groupes au total. Celui qui a la plus grande valeur est choisi. Le positif ou le négatif détermine la direction.

Pour un balayage lent

1. Étant donné que la plage des valeurs deltaX et deltaY est très petite, elles sont toutes deux conservées, mais celles avec des valeurs et des directions différentes sont également ignorées.

2. Toutes les différences dans les deux directions sont additionnées et il y a deux groupes au total. Celui qui a la plus grande valeur est choisi. Le positif ou le négatif détermine la direction.

Mettre en œuvre des idées de gestes (Gesture)

Sur la base de ce qui précède, enregistrez deltaX, deltaY et la différence par paire sur une période de temps :

deltaX et deltaY sont utilisés pour compter les gestes de zoom avant et arrière.

La différence par paire est utilisée pour compter les gestes de la main gauche, vers le haut, vers le bas, vers la gauche et vers la droite.

Par conséquent, un geste est un geste sur une période de temps et non sur un instant.

Code d'implémentation

Je ne publierai pas le code spécifique, mais vous pouvez le télécharger directement depuis mon Github : http://www.php.cn/

Résumé

Problème d'itinéraire : les valeurs deltaX et deltaY données par la molette de la souris sont assez différentes des effets de fonctionnement, et l'effet de glissement rapide est particulièrement imprécis.

Problème de geste : en raison du troisième point des caractéristiques à deux doigts, la mise en œuvre du geste ne peut pas être précise. Même si la période de temps est très courte, elle deviendra encore moins précise en raison de la quantité de données (l'idée de). le calcul ne peut pas être utilisé); la période de temps À mesure que les segments s'allongent, le temps de réaction deviendra également plus long ;

Vous pouvez télécharger le code pour voir l'effet spécifique. L'effet n'est pas satisfaisant, mais vous pouvez le télécharger et y jeter un œil. Si vous avez une meilleure solution, dites-le-moi, merci.​

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!