Façon la plus simple de détecter une pincée
C'est un WEB APP pas une application native. S'il vous plaît pas en Objective-C NS les commandes.
Donc j'ai besoin de détecter les "pincer" les événements sur iOS. Le problème est que chaque plugin ou de la méthode que je vois pour faire des gestes ou des multi-touch événements, est (généralement) avec jQuery et est un ensemble supplémentaire de pluggin pour chaque geste sous le soleil. Ma demande est énorme, et je suis très sensible à deadwood dans mon code. Tout ce que je besoin est de détecter une pincée, et d'utiliser quelque chose comme jGesture est juste moyen à lourd pour mes besoins simples.
En outre, j'ai une compréhension limitée de la façon de détecter une pincée manuellement. Je peux obtenir la position de deux doigts, ne peut pas sembler obtenir le mélange le droit de le détecter. Quelqu'un aurait-il un simple bout de code JUSTE détecte pincée?
Vous devez vous connecter pour publier un commentaire.
Vous souhaitez utiliser le
gesturestart
,gesturechange
etgestureend
événements. Ces déclenché tout le temps de 2 ou plusieurs doigts sur l'écran tactile.En fonction de ce que vous devez faire avec le geste de pincement, votre approche doit être ajusté. Le
scale
multiplicateur peut être examiné afin de déterminer comment dramatique de l'utilisateur geste de pincement a été. Voir Apple TouchEvent documentation pour plus de détails sur la façon dont lescale
propriété va se comporter.Vous pourriez également intercepter les
gesturechange
événement à détecter une pincée, comme il arrive si vous en avez besoin pour rendre votre application en réactivité.$(selector).on('gestureend',...)
, et a dû utilisere.originalEvent.scale
au lieu dee.scale
.scale
de la propriété. C'est un vendeur de propriétés spécifiques. Tandis que ma réponse comprend la façon la plus simple pour accomplir la tâche avec de la vanille JS, si vous êtes déjà à l'aide de frameworks JS vous serait mieux de les utiliser hammer.js car il va vous fournir une bien meilleure API.Réfléchissez à ce qu'un
pinch
événement: deux doigts sur un élément, en se déplaçant vers ou à l'opposé les uns des autres.Les événements de mouvement sont, à ma connaissance, un nouveau standard, et c'est probablement le moyen le plus sûr pour y parvenir est d'utiliser les événements tactiles comme suit:
(
ontouchstart
événement)(
ontouchmove
événement)(
ontouchend
événement)Pour obtenir la distance entre les deux doigts, utilisez le
hypot
fonction:sqrt
peuvent être coûteux, et en général seulement besoin de savoir que vos doigts déplacé ou de quelque ampleur. Mais.. j'ai dit que le théorème de pythagore, et je n'ai pas techniquement de l'utiliser 😉e.touches
est pas défini. J'ai dû remplacer avece.originalEvent.touches
0
mise à l'échelle).Hammer.js tous les le chemin! Il gère le "transforme" (pincées).
http://eightmedia.github.com/hammer.js/
Mais si vous souhaitez la mettre en œuvre, toi, je pense que Jeffrey réponse est assez solide.
Malheureusement, la détection des gestes de pincement entre les navigateurs est pas aussi simple qu'on pourrait l'espérer, mais HammerJS le rend beaucoup plus facile!
Découvrez la Pincée de Zoom et de Panoramique avec HammerJS démo. Cet exemple a été testé sur Android, iOS et Windows Phone.
Vous pouvez trouver le code source à la Pincée de Zoom et de Panoramique avec HammerJS.
Pour votre commodité, voici le code source:
HTML:
Aucune de ces réponses obtenu ce que je cherchais, alors j'ai fini par écrire quelque chose de moi-même. Je voulais pincer pour zoomer une image sur mon site à l'aide de mon MacBookPro trackpad. Le code suivant (qui nécessite jQuery) semble fonctionner dans le Chrome et le Bord, au moins. Peut-être que ce sera utile à quelqu'un d'autre.
détecter zoom à deux doigts sur un élément quelconque, facile et sans tracas 3ème partie des libs comme Hammer.js (attention, le marteau a des problèmes avec le défilement!)
}
Juste au cas où, j'ai travaillé sur un plein mvp pour ce scénario, ici, il est open source :
https://github.com/vincentduprez/touchDrawCanvas