Créez un projet M1IF13-TP2 sur la forge, ajoutez-y votre binôme et vos encadrants (comme reporters). N'oubliez pas de mettre vos noms dans la description du projet.
Vous partirez de l'application située ici (dérivée de celle-ci et adaptée à l'aide de la bibliothèque jquery.transform.js). Cette application vous présente une galerie de tableaux et permet, au clic, de leur appliquer différentes transformations :
Ces transformations sont dans le code à titre indicatif. Le travail demandé dans ce TP va consister à utiliser les touch events pour manipuler les tableaux et leur faire subir des transformations spécifiques aux gestes et nombres de doigts utilisés.
Supprimez les transformations faites automatiquement de l'application (vous pouvez les conserver quelque part pour l'exemple). Utilisez les touch events simples (un doigt) de la façon suivante :
touchstart
pour sélectionner un tableautouchmove
pour le déplacer sur la gallerietouchend
pour finaliser le déplacementUtilisez les multitouch events à deux doigts de la façon suivante :
touchstart
(premier doigt) pour sélectionner un tableautouchstart
(second doigt) pour identifier l'état initial de la transformation: mesurez et enregistrez la distance et l'angle (par rapport à l'horizontale) entre les 2 doigtstouchend
pour finaliser la transformation : mesurez et enregistrez la distance et l'angle entre les 2 doigts dans l'état final, et :
Utilisez les multitouch events à trois doigts de la façon suivante :
touchstart
(premier doigt) pour sélectionner un tableautouchstart
(deuxième et troisième doigt) pour identifier l'état initial de la transformation: mesurez et enregistrez les positions des 3 doigtstouchend
pour finaliser la transformation : mesurez et enregistrez les positions des 3 doigts, calculez les vecteurs de déplacement du deuxième et du troisième par rapport au premier, et appliquez une déformation en X et en Y en fonction de la différence (en pourcentage) de ces deux vecteurs