Multi-touch et fragments

Geste de « rotation » Image non disponible

Bonjour à tous ! Ce nouveau tutoriel orienté algorithmique va tenter d'expliquer la manière de gérer le geste de rotation multi-touch. 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 bibliothèque n'existe. Si on veut pouvoir utiliser des gestes cool dans son application, il faut donc les implémenter.

Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Principe global

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

Image non disponible

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.

II. 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és, on enregistre également leurs coordonnées.

Image non disponible

On calcule ensuite le point d'intersection I de la droite formée par les deux doigts au départ et de 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 consiste à 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)

Image non disponible

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 :

Image non disponible

III. 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 tous les éléments. C'est lui qui captera l'événement.

 
Sélectionnez
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 deux doigts touchent l'écran
                        if ((pointCnt == 2)&& (pointerIndex <=1)){
                                switch (action) {
                                        case MotionEvent.ACTION_POINTER_DOWN:
                                                // Sauvegarde des coordonnées de départ des deux 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;
        }
});

IV. Conclusion

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

V. Remerciements

Je tiens à remercier tout particulièrement Feanorin qui a mis ce tutoriel au format Developpez.com.
Merci également à ClaudeLELOUP et ced d'avoir pris le temps de le relire et de le corriger.

VI. Liens

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Benbourahla Nazim. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.