Discussion :

[Raz-X]

Bonjour à tous,

voilà le topo:
Je souhaite créer une customView qui dessine une flèche allant de la gauche vers la droite. Ensuite, je souhaite attribuer un angle à cette vue, afin que la flèche pivote à partir de sa base de l'angle souhaité (comme pour l'aiguille d'une montre, même si ce n'est pas le but de mon appli).

D'après ce que j'ai vu, il faut utiliser la méthode canvas.rotate dans le onDraw de ma vue, au moment de dessiner ma flèche. Cela fonctionne partiellement:
La taille de ma vue est définie aux dimensions de ma flèche, du coup, lors de la rotation du canvas, je ne vois qu'une petite partie de la flèche (la base), car le reste de la flèche n'est plus couvert par la vue.

Ce que je souhaiterai donc, c'est faire pivoter non pas le canvas dans la vue, mais la vue elle-même lors de se création (c'est de cette manière que j'avais fait sur iPhone). Ainsi, j'ai juste à dessiner ma flèche aux bonnes proportions, et c'est l'Activity qui s'occupe de la placer et de l'orienter convenablement.

J'ai remarqué la méthode setRotation (dans View) mais disponible à partir d'API level 11, et je développe en 8... Pas pour moi.

Avez-vous une solution pour réaliser cette rotation de vue?
Bonne journée à tous.

Merci.

[Feanorin]

Avez-vous une solution pour réaliser cette rotation de vue?

Bonjour,

Tu peux toujours utiliser les animations mais je ne penses pas que cela soit fait pour cela. L'utilisation du Canvas reste quand même la meilleure solution à mon avis et non de la View.

[Raz-X]

En fait, je vois au moins 2 inconvénients majeurs à la solution Canvas, les actions de type OnClick et les calculs de dimensions:

En effet, pour pouvoir afficher correctement ma flèche, je suis obligé d'agrandir les dimensions de ma vue.

Par exemple, si ma flèche pointe vers 4h30 (soit 45°) et bien elle devient la diagonale de ma vue. Si je clic alors à côté de la flèche, l'action onClick sera validée car la vue est bien plus grande que le dessin de la flèche qu'elle contient...

En plus, je vais être obligé de calculer au plus juste les dimensions de ma vue en fonction de la longueur de la flèche et de son angle, chose que je n'aurai pas à faire si je pivotais simplement la vue.

Je ne sais pas si je suis très clair dans mes propos... Ça peut paraître confus dit comme ça ^^

[MrDuChnok]

Ça peut paraître confus dit comme ça

euh comment dire... oui un peu

Quelques questions :
- veux tu gérer la rotation de ton téléphone ? Si l'utilisateur le tient en mode horizontal est-ce différent de s'il le tient en mode vertical ? Si non, tu peux forcer un mode d'affichage de ta vue, et donc ne plus trop te soucier de ce genre de chose.
- peux-tu nous expliquer ce que fais ton application ou le rendu qu'elle doit avoir ? Ca peut nous aider à mieux voir ton problème.

[Raz-X]

Je vais essayer d'être le plus clair possible.

Pour commencer, mon application est bloquée en mode paysage (c'est une application de supervision).

Je dois afficher différents éléments sur l'écran, à des coordonnées envoyées par un serveur. L'un de ces éléments est une flèche.
Le serveur m'envoie deux positions:
- P1: l'origine de la flèche (x,y)
- P2: le point d'arrivée de la flèche (x',y')

J'ai déjà réalisé cette flèche sur iPhone, pour y arriver, je dessinais la flèche (de gauche à droite, à plat) à la bonne longueur, puis j'appliquais une rotation et une translation sur la vue pour la placer correctement entre mes 2 points P1 et P2. Ainsi, la vue correspondait exactement aux dimensions de la flèche, et je pouvais lui attribuer des actions OnClick.

Sous Android, j'arrive à faire pivoter le canvas contenu dans une vue, mais pas la vue elle même, ce qui me pose des problèmes. Je voulais donc savoir si il existe une méthode/astuce pour réaliser ce que j'ai envie de faire (en sachant que je développe en API level 8 et que la méthode View.setRotation est disponible en API level 11 seulement).

J'espère avoir été plus clair.

PS: J'ai une idée, mais je ne pense pas que ce soit réalisable. Ma flèche est dessinée via un ShapeDrawable et un Path. Est-il possible de spécifier à la vue que le OnClick est attaché au ShapeDrawable, et non à la totalité de la vue? Ainsi, plus aucun problème avec le OnClick...

[Feanorin]

Bonjour,

Pourquoi tu ne peux pas réaliser cette rotation et translation directement avec le canvas de ta vue principale au lieu de ta View?

PS: J'ai une idée, mais je ne pense pas que ce soit réalisable. Ma flèche est dessinée via un ShapeDrawable et un Path. Est-il possible de spécifier à la vue que le OnClick est attaché au ShapeDrawable, et non à la totalité de la vue? Ainsi, plus aucun problème avec le OnClick...

Je ne pense pas, par exemple pour les overlays sous GoogleMaps qui est proposé par Google il passe par une nouvelle vue qu'il attache à la principale.

Si tu ne veux pas gérer le click le mieux est de s'inspirer de cela à mon avis, en superposons les vues et assigner le click sur une vue.

[Raz-X]

Pourquoi tu ne peux pas réaliser cette rotation et translation directement avec le canvas de ta vue principale au lieu de ta View?

Car ma flèche doit-être "clickable" et doit donc être associée à une vue, ce n'est pas qu'un simple dessin, mais un objet "intelligent" qu'il me faut créer. Car par la suite, l'appui sur cette flèche doit m'afficher une fenêtre avec des informations plus précises sur l'objet qu'elle représente. Si je dessine dans le canvas de la vue principale, toutes les flèches que j'afficherai seront associées au OnClick de cette vue (qui a déjà une autre fonction).

J'ai comme l'impression que ce que je souhaite réaliser n'est pas possible (tout du moins, pas avant l'API 11 qui offre la rotation de vue).

[Feanorin]

Bon deux solutions s'impose à toi :

Soit tu passes par des vues superposées, donc à toi de gérer les vues . Donc une qui comporte une Image de ta flèche , pas la peine de la dessiner une Bitmap suffira et sera plus propre.

Tu tourne la Bitmap dans ta View pour faire tourner ta flèche. Si tu veux la dessiner à toi de faire tourner le canvas.

Le onClick sera associé à tes View filles dynamiquement. Donc dissocier de ta View parent. La proposition que je t'avais faite qui correspondait aux Overlays

Si tu ne veux pas passer par ces superpositions alors tu n'as qu'à définir des Rect dans ta View principale et lors du click de celle ci (onTouch et MotionEvent ) regarder ces coordonnées et voir si elles appartiennent au Rect que tu as défini de ta flèche .... Le Rect devra tourner comme la flèche pour avoir les bonne coordonnée.

[Raz-X]

@Feanorin: Tout d'abord, merci de ton investissement

Je pense qu'on s'est mal compris sur le problème, j'ai fait quelques dessins pour mieux m'expliquer.
Je crée une vue qui colle au plus juste aux dimensions de ma flèche, et je dessine ma flèche dessus:



Ensuite, je souhaite tourner ma vue pour obtenir ceci:



Apparement, cela n'est pas possible, du coup j'utilise la fonction canvas.rotate, j'obtiens ceci:



Je suis donc obligé d'augmenter les dimensions de ma vue pour voir la totalité de la flèche, j'obtiens ça:



Mais le résultat n'est pas terrible, car si j'associe un évènement onClick sur cette vue, et que je click au dessus ou en dessous de la flèche, (dans la zone grise), l'action va se déclencher alors que je n'ai pas cliqué sur la flèche à l'écran...

Du coup, si je superpose une vue, j'aurai le même problème (vu que je ne peux pas la faire pivoter pour quelle se place sur ma flèche). peut-être y'a-t-il moyen de faire pivoter un Rect du même angle pour qu'il se place au dessus? (C'est bien ça que tu exprimais comme idée?) Si oui, par quelle méthode peut-il pivoter? car je n'ai rien trouvé de tel...

Merci encore (en espérant avoir été plus clair)

[Feanorin]

Désolé je n'avais pas pensé que le canvas sortirait de la vue, je n'avais pas visualiser

Du coup, si je superpose une vue, j'aurai le même problème (vu que je ne peux pas la faire pivoter pour quelle se place sur ma flèche). peut-être y'a-t-il moyen de faire pivoter un Rect du même angle pour qu'il se place au dessus? (C'est bien ça que tu exprimais comme idée?) Si oui, par quelle méthode peut-il pivoter? car je n'ai rien trouvé de tel...

Pour le Rect, je vais être désolé pour toi mais tu peux le construire avec 4 points, comme tu ne peux pas lui coller un 'rotate' dessus il faudra que tu calcules les nouveaux point en fonction de l'angle de rotation. Avec ces nouveaux points tu peux redéfinir ces 4 nouveaux points.

http://developer.android.com/referen...int, int, int)

Pour savoir si le click appartient bien au rectangle tu peux utiliser cette fonction :
http://developer.android.com/referen...ains(int, int)

Tu peux essayer également d'utiliser le constructeur Canvas(Bitmap) pour afficher ta flèche et la faire tourner ...
Bon à toi de récupérer ensuite ton Rect de ce canvas pour avoir les nouvelle coordonneés (après tontranslate et to rotate ). Pour ajouter un canvas à ta view utilises :
http://developer.android.com/referen...aphics.Canvas)
Cela t'évitera à avoir à calculer les coordonnées ...


Je suis désolé de te donner tout ceci en désordre mais je l'ai déjà réalise comme tel mais je n'ai plus le code sous la main .

[Raz-X]

Merci Feanorin,

Pour commencer, je ne peux pas utiliser la fonction Canvas(Bitmap), car les dimensions de ma flèche sont variables (définies par le serveur), elle doit donc être dessinée dynamiquement.

Pour poursuivre, je vois bien comment calculer les nouveaux points de mon rectangle pivoté (un peu de trigo de temps en temps ) mais par contre, je ne vois pas comment réatribuer ces coordonnées au Rect, qui prend des coordonnées top, left, bottom, right. Quoi qu'il arrive, il sera toujours "droit".

Si tu arrives à m'éclairer sur ce point, je devrais m'en sortir avec le contains au moment du OnClick pour vérifier que j'ai bien clické sur la flèche et pas à côté.