Discussion :

[yoyolepsy]

Bonjour à tous,

Depuis quelque temps déjà je bute sur un problème. Je souhaite pouvoir faire tourner un texte autour d'un cercle comme si ce texte glisser sur le cercle. J'arrive à faire tourner le texte au début mais malheureusement, après une rotation d'un angle de PI, puisque le textfield est placé par son coin haut gauche, le texte vient "manger sur le cercle". Quelqu'un aurait'il une idée pour pouvoir décaler le texte?
D'avance merci

Utilisation de l'AS3

[ferber]

Bonjour,
Pouvez vous mettre en ligne l'animation pour mieux cible le problème ?

[yoyolepsy]

Bonjour.

Je n'ai malheureusement pas sous la main l'animation. Ce que je souhaite faire (je vais essayer d'être plus précis) c'est de faire tourner un texte qui reste horizontal le long d'un cercle. Par exemple, quand mon angle vaut 0 degrés, mon texte est horizontal est son côté gauche est collé au cercle. Quand mon angle vaut 180 degrés, mon texte est toujours horizontal mais cette fois ci, c'est son côté droit qui est collé au cercle.
D'avance merci.

[ferber]

Dans ce cas de figure je calculerais la position du point de base sur le rayon.
Et selon la valeur de _rotation je soustrairais un certain % de la largeur du texte pour obtenir la position a affecter au texte.
Je suis pas sur que mon explication soit très claire.

[yoyolepsy]

Qu'appelez vous le point de base?

[ferber]

par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var ww:number=MonText.width;
x-=ww/180*rotation;

[ferber]

Qu'appelez vous le point de base?

le point de base étant la position x y sur le rayon.
comme si dessous, par contre dans l'exemple si dessous je ne rappèle plus sir l'angle est en degré ou en radian

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 
var rayon:Number = 100;
	var angle:Number  ; 
	 _x =  rayon*Math.cos(angle) ;
	 _y = rayon*Math.sin(angle) ;

[yoyolepsy]

Par exemple pour un angle de degrés, le point de base serait par exemple le point ayant la même ordonnée que le centre est une abscisse égale à l'abscisse du centre + le rayon +, par exemple, la moitié de mon champ texte?

[yoyolepsy]

le point de base étant la position x y sur le rayon.
comme si dessous, par contre dans l'exemple si dessous je ne rappèle plus sir l'angle est en degré ou en radian

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 
var rayon:Number = 100;
	var angle:Number  ; 
	 _x =  rayon*Math.cos(angle) ;
	 _y = rayon*Math.sin(angle) ;

C'est sur quoi je suis déjà parti. Mais Malheureusement, pour un champ texte le point d'ancrage est en haut à gauche donc de 0 à 90 degrès pas de problème mais au delà, le texte viendra dans le cercle.

[ferber]

Par exemple pour un angle de degrés, le point de base serait par exemple le point ayant la même ordonnée que le centre est une abscisse égale à l'abscisse du centre + le rayon +, par exemple, la moitié de mon champ texte?

Disons que je ne comprend absolument rien au termes abscisses.
pour le code je testerais quelque choses dans le genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
	var rotationDegr:Number=90;
	var txFieldWidth:Number=field.width;
	var rayon:Number = 100;
	var angle:Number = rotationDegr/180; 
	_x = rayon*Math.cos(angle) ;
	_y = rayon*Math.sin(angle) ; 
	_x-=(txFieldWidth/180)*rotationDegr;

[ferber]

Quoi que le calcule de mon angle a pas l'air bon

[ferber]

si je ne me trompe pas, ça devrait plus être :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
	var rotationDegr:Number=90;
	var txFieldWidth:Number=field.textWidth;
	var rayon:Number = 100;
	var angle:Number = Math.PI* rotationDegr/180; 
	_x = rayon*Math.cos(angle) ;
	_y = rayon*Math.sin(angle) ; 
	_x-=(txFieldWidth/180)*rotationDegr;

[yoyolepsy]

Disons que je ne comprend absolument rien au termes abscisses.
pour le code je testerais quelque choses dans le genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
	var rotationDegr:Number=90;
	var txFieldWidth:Number=field.width;
	var rayon:Number = 100;
	var angle:Number = rotationDegr/180; 
	_x = rayon*Math.cos(angle) ;
	_y = rayon*Math.sin(angle) ; 
	_x-=(txFieldWidth/180)*rotationDegr;

Ok excusez-moi mais la c'est moi qui m'y perd un peu. Juste pour que je comprenne bien le rôle des variables dans ce code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var rotationDegr

correspond à ma rotation de mon texte en degré

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var rayon

correspond au rayon de mon cercle?

enfin ,
je ne comprends pas bien cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

_x-=(txFieldWidth/180)*rotationDegr;

[ferber]

Ok excusez-moi mais la c'est moi qui m'y perd un peu. Juste pour que je comprenne bien le rôle des variables dans ce code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var rotationDegr

correspond à ma rotation de mon texte en degré

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var rayon

correspond au rayon de mon cercle?

enfin ,
je ne comprends pas bien cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

_x-=(txFieldWidth/180)*rotationDegr;

oui pour rotationDegr et pour rayon
pour la dernière ligne j'ai fait une faute :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var maxdeg:number=rotationDegr>180?180-(rotationDegr-180):rotationDegr;
_x-=(txFieldWidth/180)*(maxdeg);

se qui devrait donner :
si txFieldWidth= 100 et que rotation rotationDegr=0
on vas soustraire 100/180*(0)=0
si txFieldWidth= 100 et que rotation rotationDegr=180
on vas soustraire 100/180*(180)=100
si txFieldWidth= 100 et que rotation rotationDegr=270
on vas soustraire 100/180*(90)=50
si txFieldWidth= 100 et que rotation rotationDegr=360
on vas soustraire 100/180*(0)=0

Après bien sure faut tester

[yoyolepsy]

Merci beaucoup je vois bien maintenant en théorie comment cela devrait marcher. Je teste cela tout de suite et je vous tiens au courant.

[yoyolepsy]

Une autre petite interrogation pendant que je teste. Pour le _y, le principe est le même avec la hauteur du champ texte?

[ferber]

oui pareille pour le y, on vas soustraire un % de la hauteur du texte présent dans le field.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

field.textHeight;

[yoyolepsy]

D'accord c'est bien ce qui me semblait.
ET toujours par rapport à l'angle je suppose?

[ferber]

a quoi que pour le y sa vas être différent , car a 90 degre on doit soustraire 0 et 270 on doit soustraire la hauteur, donc en ajoutant 90 degre avant le calcule on devrait tomber bon.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	var rotationDegr:Number=90;
	var txFieldWidth:Number=field.textWidth;
	var txFieldHeight:Number=field.textHeight;
	var rayon:Number = 100;
	var angle:Number = Math.PI* rotationDegr/180; 
	_x = rayon*Math.cos(angle) ;
	_y = rayon*Math.sin(angle) ; 
	var maxdeg:number=rotationDegr>180?180-(rotationDegr-180):rotationDegr;
	_x-=(txFieldWidth/180)*(maxdeg);
        rotationDegr+=90;
        maxdeg:number=rotationDegr>180?180-(rotationDegr-180):rotationDegr;
	_y-=(txFieldHeight/180)*(maxdeg);
         rotationDegr-=90;

[yoyolepsy]

Merci Merci je regarde et je teste tout ça. Une question néanmoins, le _x et le _y trouvés sont bien à ajouter au x et au y du centre de mon cercle? J'ai un doute là