Multi-touch et fragments: Geste de “rotation”

Bonjour à tous! Ce nouveau tutoriel orienté algorithmique va tenter d’expliquer la manière de gérer le geste de rotation multitouch. Peu de code Java dans ce tutoriel, juste de quoi illustrer mes propos et donner des pistes de réflexion. La fonction principale sera détaillée mais exceptionnellement, je ne mettrai pas de projet en téléchargement par manque de temps pour l’implémenter proprement.

Pour les gestes simple-touch, l’implémentation est très facile grâce au Gesture Builder (tutoriel en anglais ici), mais pour le multi-touch, c’est un peu plus compliqué car aucune library n’existe. Si on veut pouvoir utiliser des gestes cools dans son application, il faut donc les implémenter.

Principe global

On souhaite reconnaître un mouvement de rotation effectué avec 2 doigts pour par exemple inverser 2 fragments positionnés l’un en dessous de l’autre comme indiqué sur l’image ci dessous.

rotation

Concrètement, nous allons enregistrer les coordonnées de départ et d’arrivée de nos deux doigts puis calculer l’angle formé par ceux-ci, comme indiqué dans le schéma ci-dessous. Dans notre cas, si l’angle mesuré est supérieur à 8° (par exemple), la rotation s’effectue.

Algorithme

On détecte lorsque plusieurs doigts sont posés sur l’écran puis on sauvegarde les coordonnées des points touchés. Lorsque les doigts sont enlevées, on enregistre également leurs coordonnées.
doigts
On calcule ensuite le point d’intersection I de la droite formée par les deux doigts au départ celle formée à l’arrivée. Appelons A le point de départ du doigt 1 et B son point d’arrivée. L’étape suivante consite à calculer les distances des côtés du triangle ABI. Comme on possède les coordonnées de ces points, il ne reste qu’à utiliser la formule:

AB= (xA – xB)² + (yB – y1)² , où  A (xA, yA) et B (xB, yB)

trigo

Enfin, pour calculer l’angle en radian, on utilise le théorème d’Al Kashi (ou théorème de Pythagore généralisé) dont la formule est la suivante:
formule

Implémentation Java: quelques pistes

Premièrement, il faut placer un listener sur votre layout principal, celui qui fait la taille de la page et qui contient tout les éléments. C’est lui qui captera l’évènement.

mainLayout.setOnTouchListener(new View.OnTouchListener() {

	@Override
	public boolean onTouch(View view, MotionEvent motionEvent) {

		int pointerIndex = ((motionEvent.getAction() & MotionEvent.ACTION_POINTER_ID_MASK) >> MotionEvent.ACTION_POINTER_ID_SHIFT);
		int action = (motionEvent.getAction() & MotionEvent.ACTION_MASK);
		int pointCnt = motionEvent.getPointerCount();
		try {
			// On effectue un traitement seulement lorsque 2 doigts touchent l'écran
			if ((pointCnt == 2)&& (pointerIndex <=1)){
				switch (action) {
					case MotionEvent.ACTION_POINTER_DOWN:
						// Sauvegarde des coordonnées de départ des 2 doigts
						for (int i = 0; i < pointCnt; i++) {
							int id = motionEvent.getPointerId(i);
							//simple exemple de comment récupérer les coordonnées des points. Celles-ci doivent être traitées en fonction de ce que l'on veut faire
							float x= motionEvent.getX(i)
 							float y= motionEvent.getY(i));
						}
						break;

					case MotionEvent.ACTION_POINTER_UP:
						// Sauvegarde des coordonnées des doigts lorsque l'utilisateur les enlève de l'écran
						for (int i = 0; i < pointCnt; i++) {
							int id = motionEvent.getPointerId(i);
							//simple exemple de comment récupérer les coordonnées des points. Celles-ci doivent être traitées en fonction de ce que l'on veut faire
							float x= motionEvent.getX(i)
 							float y= motionEvent.getY(i));
						}
						//calculer ici la valeur de l'angle formé, comme expliqué dans le paragraphe précédent
						break;

					default:
						break;
					
				}
			}
		} catch (Exception e) {
			Log.e("error", e.getMessage());
		}
		return true;
	}
});

Conclusion

En espérant que ce tutoriel vous soit utile pour la compréhension du multitouch. Vous avez maintenant toutes les cartes en main pour l’implémenter !

3 commentaires


  1. comment je p eeux trouver le code source pour le télécharger s’il vous plais

    Répondre

  2. Bonjour,

    Autant le tuto est intéressant autant, il est ridicule de mettre un code qui ne compile même pas (il manque des ‘;’, “if (pointerIndex switch” ??).
    Bref un peu de relecture me semble nécessaire.
    C’est d’autant plus dommage que l’article aurait pu me servir.

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *