Façon la plus simple de détecter une pincée

Question

C'est une WEB APP pas une application native. S'il vous plaît pas en Objective-C NS les commandes.

J'ai donc 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?

Answer 1

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)

if(e.touches.length == 2) {
    scaling = true;
    pinchStart(e);
}

(ontouchmove événement)

if(scaling) {
    pinchMove(e);
}

(ontouchend événement)

if(scaling) {
    pinchEnd(e);
    scaling = false;
}

Pour obtenir la distance entre les deux doigts, utiliser le théorème de pythagore:

var dist =
Math.sqrt(
    (e.touches[0].x-e.touches[1].x) * (e.touches[0].x-e.touches[1].x) +
    (e.touches[0].y-e.touches[1].y) * (e.touches[0].y-e.touches[1].y));

Answer 2

Vous souhaitez utiliser l' gesturestart, gesturechange, et gestureend é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é. L' scale multiplicateur peut être examiné afin de déterminer comment dramatique de l'utilisateur geste de pincement a été. Voir Apple TouchEvent la documentation pour plus de détails sur la façon dont l' scale de la propriété va se comporter.

node.addEventListener('gestureend', function(e) {
    if (e.scale < 1.0) {
        // User moved fingers closer together
    } else if (e.scale > 1.0) {
        // User moved fingers further apart
    }
}, false);

Vous pouvez également intercepter l' gesturechange événement à détecter une pincée, comme il arrive si vous en avez besoin pour rendre votre application en réactivité.

Answer 3

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.