Cinq cartes apprennent la traduction des coordonnées d'Android Canvas (rotation de l'échelle de traduction)

Five Maps Learn Coordinate Translation Android Canvas



Lors de l'écriture d'un projet d'entreprise, vous devez dessiner un SeekBar vertical. Au début, il est simple d'ajouter la configuration android: rotate = '- 90' dans le fichier xml, mais de nombreux problèmes se trouvent par la suite. Enfin, les données de recherche en ligne, en utilisant la combinaison de Canvas.rotate () et Canvas.translate (), pour obtenir une disposition SeekBar verticale.

A. Introduction au système de coordonnées de Canvas



D'une manière générale, la zone d'affichage d'un canevas de vue personnalisée est la zone de la vue et la taille est la largeur * la hauteur.



@Override protected synchronized void onDraw(Canvas canvas) { super.onDraw(canvas) Paint p = new Paint() p.setColor(getResources().getColor(R.color.yellow)) canvas.drawRect(0, 0, 200, 100, p) }

Les sommets du système de coordonnées Canvas sont à la position du coin supérieur gauche (0, 0), l'axe X est à droite et l'axe Y est en bas.



2. La méthode de rotation (), translate (), scale (), etc. de Canvas.

1.Canvas.rotate ()

Les deux figures montrent à quoi ressemblent les graphiques après canvas.rotate (90) et canvas.rotate (-90). Mais il convient de noter que, cependant, après quelle transformation, la zone d'affichage est toujours la zone du canevas d'origine, donc cette transformation ne verra rien à l'écran.

2.Canvas.translate ()



Après la transformation de canvas.translate (100,100), le canevas entier se déplace de 100 degrés dans la direction positive de x et y.

Canvas.translate (-100, -100) consiste à déplacer 100 dans la direction négative de X et Y, de sorte qu'une partie du Rect n'est pas dans la plage visible.

3.Canvas.scale ()

L'image de gauche est le graphique obtenu après canvas.scale (0.5f, 0.5f). Vous pouvez voir que la largeur et la hauteur de la toile et du rect au-dessus sont de moitié.

La figure ci-dessus est le graphique obtenu après canvas.scale (2f, 2f). On voit que la largeur et la hauteur de la toile et du Rect ci-dessus sont doublées. On peut également voir que le Rect a une partie qui est au-delà du visible. La portée, l'excès n'est pas visible.

Trois. La SeekBar horizontale devient la SeekBar verticale

Comme le montre la figure ci-dessus, la SeekBar horizontale peut être rendue verticale par canvas.rotate (-90) et canvas.translate (-200, 0). Notez que lors du changement de translation, en raison du changement du système de coordonnées, il s'agit de canvas.translate (-200, 0) au lieu de canvas.translate (0, 200).

La chose la plus importante à noter ici est la position de l'axe après la transformation rotate (). L'axe pivote également lorsque le canevas pivote.