[FLASH MX2004] Tracer cercle ou arc discontinue en AS

Version imprimable

Bonsoir à tous, :D
Je viens enfin de réussir à tracer un cercle en TRAITS INTERROMPUS, (en fait, quatres arcs) en AS.
Principe, 8O comme me l'a conseillé pom :

Citation:

dessiner des courbes de Bézier point par point, ou plutôt segment par segment,

j'ai donc choisi de dessiner des traits avec des espaces de la même valeur entre chaque sur la périphérie d'un cercle de
rayon=150 //valeur du rayon r = 150 à définir par l'utilisateur
et ayant un point de centre x,y également à définir par l'utilisateur...
:roll: Celui qui veut exploiter le code pour une portion d'arc de cercle peut très facilement extraire du code la zone qui l'intéresse !
Pour le tester, créer un bouton et déposer sur celui-ci l'intégralité du code; modifier à loisir les 3 variables posx, posy, et rayon...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
//dessine un cercle en traits interrompus
on (press) {
	posx=250		//position x du point de centre du cercle
	posy=150		//position y du point de centre du cercle
	rayon=150		//valeur du rayon r = 100
	lineStyle (0, 0x00000, 100); 
//Traits interrompus sur courbe 3heures à 6heures  de 0° à 90°
moveTo (posx+rayon*Math.cos(360*Math.PI/180),posy+rayon*Math.sin(360*Math.PI/180))		
lineTo (posx+rayon*Math.cos(7.5*Math.PI/180),posy+rayon*Math.sin(7.5*Math.PI/180)) //
	moveTo (posx+rayon*Math.cos(15*Math.PI/180),posy+rayon*Math.sin(15*Math.PI/180))
	lineTo (posx+rayon*Math.cos(22.5*Math.PI/180),posy+rayon*Math.sin(22.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(30*Math.PI/180),posy+rayon*Math.sin(30*Math.PI/180))
lineTo (posx+rayon*Math.cos(37.5*Math.PI/180),posy+rayon*Math.sin(37.5*Math.PI/180))
	moveTo (posx+rayon*Math.cos(45*Math.PI/180),posy+rayon*Math.sin(45*Math.PI/180))
	lineTo (posx+rayon*Math.cos(52.5*Math.PI/180),posy+rayon*Math.sin(52.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(60*Math.PI/180),posy+rayon*Math.sin(60*Math.PI/180))
lineTo (posx+rayon*Math.cos(67.5*Math.PI/180),posy+rayon*Math.sin(67.5*Math.PI/180))
	moveTo (posx+rayon*Math.cos(75*Math.PI/180),posy+rayon*Math.sin(75*Math.PI/180))
	lineTo (posx+rayon*Math.cos(82.5*Math.PI/180),posy+rayon*Math.sin(82.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(89*Math.PI/180),posy+rayon*Math.sin(89*Math.PI/180))
lineTo (posx+rayon*Math.cos(90*Math.PI/180),posy+rayon*Math.sin(90*Math.PI/180))
///
//Traits interrompus sur courbe 6heures à 9heures   de 90° à 180°
moveTo (posx+rayon*Math.cos(90*Math.PI/180),posy+rayon*Math.sin(90*Math.PI/180))
lineTo (posx+rayon*Math.cos(97.5*Math.PI/180),posy+rayon*Math.sin(97.5*Math.PI/180)) //
	moveTo (posx+rayon*Math.cos(105*Math.PI/180),posy+rayon*Math.sin(105*Math.PI/180))
	lineTo (posx+rayon*Math.cos(112.5*Math.PI/180),posy+rayon*Math.sin(112.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(120*Math.PI/180),posy+rayon*Math.sin(120*Math.PI/180))
lineTo (posx+rayon*Math.cos(127.5*Math.PI/180),posy+rayon*Math.sin(127.5*Math.PI/180))
	moveTo (posx+rayon*Math.cos(135*Math.PI/180),posy+rayon*Math.sin(135*Math.PI/180))
	lineTo (posx+rayon*Math.cos(142.5*Math.PI/180),posy+rayon*Math.sin(142.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(150*Math.PI/180),posy+rayon*Math.sin(150*Math.PI/180))
lineTo (posx+rayon*Math.cos(157.5*Math.PI/180),posy+rayon*Math.sin(157.5*Math.PI/180))
	moveTo (posx+rayon*Math.cos(165*Math.PI/180),posy+rayon*Math.sin(165*Math.PI/180))
	lineTo (posx+rayon*Math.cos(172.5*Math.PI/180),posy+rayon*Math.sin(172.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(179*Math.PI/180),posy+rayon*Math.sin(179*Math.PI/180))
lineTo (posx+rayon*Math.cos(180*Math.PI/180),posy+rayon*Math.sin(180*Math.PI/180))
////
//Traits interrompus sur courbe 9heures à 12heures   de 180° à 270°
moveTo (posx+rayon*Math.cos(180*Math.PI/180),posy+rayon*Math.sin(180*Math.PI/180))
lineTo (posx+rayon*Math.cos(187.5*Math.PI/180),posy+rayon*Math.sin(187.5*Math.PI/180)) //
	moveTo (posx+rayon*Math.cos(195*Math.PI/180),posy+rayon*Math.sin(195*Math.PI/180))
	lineTo (posx+rayon*Math.cos(202.5*Math.PI/180),posy+rayon*Math.sin(202.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(210*Math.PI/180),posy+rayon*Math.sin(210*Math.PI/180))
lineTo (posx+rayon*Math.cos(217.5*Math.PI/180),posy+rayon*Math.sin(217.5*Math.PI/180))
	moveTo (posx+rayon*Math.cos(225*Math.PI/180),posy+rayon*Math.sin(225*Math.PI/180))
	lineTo (posx+rayon*Math.cos(232.5*Math.PI/180),posy+rayon*Math.sin(232.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(240*Math.PI/180),posy+rayon*Math.sin(240*Math.PI/180))
lineTo (posx+rayon*Math.cos(247.5*Math.PI/180),posy+rayon*Math.sin(247.5*Math.PI/180))
	moveTo (posx+rayon*Math.cos(255*Math.PI/180),posy+rayon*Math.sin(255*Math.PI/180))
	lineTo (posx+rayon*Math.cos(262.5*Math.PI/180),posy+rayon*Math.sin(262.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(269*Math.PI/180),posy+rayon*Math.sin(269*Math.PI/180))
lineTo (posx+rayon*Math.cos(270*Math.PI/180),posy+rayon*Math.sin(270*Math.PI/180))
/////
//Traits interrompus sur courbe 9heures à 12heures   de 180° à 270°
moveTo (posx+rayon*Math.cos(270*Math.PI/180),posy+rayon*Math.sin(270*Math.PI/180))
lineTo (posx+rayon*Math.cos(277.5*Math.PI/180),posy+rayon*Math.sin(277.5*Math.PI/180)) //
	moveTo (posx+rayon*Math.cos(285*Math.PI/180),posy+rayon*Math.sin(285*Math.PI/180))
	lineTo (posx+rayon*Math.cos(292.5*Math.PI/180),posy+rayon*Math.sin(292.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(300*Math.PI/180),posy+rayon*Math.sin(300*Math.PI/180))
lineTo (posx+rayon*Math.cos(307.5*Math.PI/180),posy+rayon*Math.sin(307.5*Math.PI/180))
	moveTo (posx+rayon*Math.cos(315*Math.PI/180),posy+rayon*Math.sin(315*Math.PI/180))
	lineTo (posx+rayon*Math.cos(322.5*Math.PI/180),posy+rayon*Math.sin(322.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(330*Math.PI/180),posy+rayon*Math.sin(330*Math.PI/180))
lineTo (posx+rayon*Math.cos(337.5*Math.PI/180),posy+rayon*Math.sin(337.5*Math.PI/180))
	moveTo (posx+rayon*Math.cos(345*Math.PI/180),posy+rayon*Math.sin(345*Math.PI/180))
	lineTo (posx+rayon*Math.cos(352.5*Math.PI/180),posy+rayon*Math.sin(352.5*Math.PI/180))
moveTo (posx+rayon*Math.cos(359*Math.PI/180),posy+rayon*Math.sin(359*Math.PI/180))
lineTo (posx+rayon*Math.cos(360*Math.PI/180),posy+rayon*Math.sin(360*Math.PI/180))
}

Bon, ceci étant fait, je ne suis pas assez férré en AS pour peut être gérer celà d'une façon plus "light" avec boucle if ou autre???? :oops:

Ensuite je ne peux pas intervenir sur la longueur de chaque segment si bien qu'un cercle de rayon 100 aura autant de divisions qu'un grand cercle de rayon 250 par exemple... :?

Alors si parmi vous d'autres sont intéressés pour faire avancer le "schimilimiblick..." dans ce sens ce serait plutôt sympa... :P

Merci, et @+ Thaisno

Salut,

voilà une version plus "light" avec gestion du nbre de segment :wink:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var posx:Number      = 250;      //position x du point de centre du cercle 
var posy:Number      = 150;      //position y du point de centre du cercle 
var rayon:Number     = 150;      //valeur du rayon r = 100 
var nbSegment:Number = 20;       //nbre de segment
 
var pas:Number = 360/(nbSegment*2);
var increment:Number = 0;
tonClip.lineStyle (0, 0x00000, 100); 
tonClip.moveTo (posx+rayon*Math.cos(360*Math.PI/180),posy+rayon*Math.sin(360*Math.PI/180))       
while(increment<=360) {
	increment+=pas;
	tonClip.lineTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180));
	increment+=pas;
	tonClip.moveTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180)); 
}

Ps: Avec MX2004, il est conseillé d'utiliser la syntaxe pointée et de typer les variables :wink:

22/12/2004, 10h06
thaisno

[FLASH MX2004] Tracer cercle ou arc discontinue en AS

freegreg, merci pour ta réponse, :D
bon j'essaye de mettre celà en place mais rien ne se passe... :?

j'ai mis le tout sur un calque ...rien
j'ai mis le tout dans un bouton avec on (press).... et rien ,
j'ai essayé plusieurs manip; rien.... :roll:
Qu'est-ce que j'fais mal ou que j'oublie ???
La référence à "tonClip..." c'est quoi ??? c'est où???
Suis-je trop nul ??? 8O

Merci pour ta réponse... et ta patience !
@+ thaisno

tonClip est la référence au clip dans lequel tu crées ton dessin.

Deux solutions:
- Tu gardes ta syntaxe et il suffit d'enlever les 4 tonClip.
- Tu utilises la syntaxe pointée :
Pour cela, tu nommes ton bouton btn
Puis sur l'image dans la timeline (pas sur le bouton comme pour le on (press))

Tu fais :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
btn.onPress = function() {
	var posx:Number      = 200;      //position x du point de centre du cercle 
	var posy:Number      = 200;      //position y du point de centre du cercle 
	var rayon:Number     = 150;      //valeur du rayon r = 100 
	var nbSegment:Number = 100;       //nbre de segment 
 
	var pas:Number = 360/(nbSegment*2); 
	var increment:Number = 0; 
	this.lineStyle (0, 0x00000, 100); 
	this.moveTo (posx+rayon*Math.cos(360*Math.PI/180),posy+rayon*Math.sin(360*Math.PI/180))        
	while(increment<=360) { 
	   increment+=pas; 
	   this.lineTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180)); 
	   increment+=pas; 
	   this.moveTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180)); 
	}
}

Attention, dans ton exemple, tu crées le cercle dans ton bouton! J'ai reproduis ci-dessus le même phénomène (Si tu places ta souris sur un segment, tu t'apercois qu'il fait parti du bouton)

Je te conseille plutôt :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
btn.onPress = function() {
	var newCercle:MovieClip = this._parent.createEmptyMovieClip("cercle", this._parent.getNextHighestDepth());
 
	var posx:Number      = 200;      //position x du point de centre du cercle 
	var posy:Number      = 200;      //position y du point de centre du cercle 
	var rayon:Number     = 150;      //valeur du rayon r = 100 
	var nbSegment:Number = 100;       //nbre de segment 
 
	var pas:Number = 360/(nbSegment*2); 
	var increment:Number = 0; 
	newCercle.lineStyle (0, 0x00000, 100); 
	newCercle.moveTo (posx+rayon*Math.cos(360*Math.PI/180),posy+rayon*Math.sin(360*Math.PI/180))        
	while(increment<=360) { 
	   increment+=pas; 
	   newCercle.lineTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180)); 
	   increment+=pas; 
	   newCercle.moveTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180)); 
	}
}

Crée un clip vide au même niveau que ton bouton, puis dessine dedans.

Voilà :wink:

22/12/2004, 10h57
thaisno

re-salut...

Citation:

Je te conseille plutôt :

...j'ai donc testé cette méthode, celà marche super bien, c'est nickel pour le cercle, :D
Maintenant je pousse le bouchon plus loin :? et en modifiant le paramètre while

Code:

while(increment<=110) { ...

, j'obtiens un arc de 110° qui part "à 3 heures". soit 0°
Est-ce que je peux modifier le point de départ de l'arc par exemple pour le faire partir à "8 heures" soit 240°... :roll:

Il est vraiment Chi.......le mec ! Je sais, :oops: excuse moi !

@+ thaisno

Citation:

Envoyé par thaisno

re-salut...

Citation:

Je te conseille plutôt :

...j'ai donc testé cette méthode, celà marche super bien, c'est nickel pour le cercle, :D

Très bonne idée :D
:bravo:

Citation:

Envoyé par thaisno

[Maintenant je pousse le bouchon plus loin :? et en modifiant le paramètre while

Code:

while(increment<=110) { ...

, j'obtiens un arc de 110° qui part "à 3 heures". soit 0°
Est-ce que je peux modifier le point de départ de l'arc par exemple pour le faire partir à "8 heures" soit 240°... :roll:

8h, c'est pas plutôt : 150° ?!?

Citation:

Envoyé par thaisno

Il est vraiment Chi.......le mec ! Je sais, :oops: excuse moi !

@+ thaisno

:D
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 btn.onPress = function() { traceCercle(this._parent, "arcDeCercle",200, 200, 150, 100, 110, 150); traceCercle(this._parent, "cercle",200, 200, 140, 100, 360, 0); } function traceCercle(clipParent:MovieClip, nom:String, posx:Number, posy:Number, rayon:Number, nbSegment:Number, arc:Number, angleDepart:Number) { // clipParent -> référence au clip dans lequel on va dessiner // nom -> nom du clip // posx -> position x du point de centre du cercle // posy -> position y du point de centre du cercle // rayon -> valeur du rayon r = 100 // nbSegment -> nbre de segment // arc -> arc en degre // angleDepart -> angle de départ en degre var newCercle:MovieClip = clipParent.createEmptyMovieClip(nom, clipParent.getNextHighestDepth()); trace(nom); var pas:Number = 360/(nbSegment*2); var increment:Number = angleDepart; newCercle.lineStyle (0, 0x00000, 100); newCercle.moveTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180)) while(increment<=angleDepart+arc) { increment+=pas; newCercle.lineTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180)); increment+=pas; newCercle.moveTo (posx+rayon*Math.cos(increment*Math.PI/180),posy+rayon*Math.sin(increment*Math.PI/180)); } }

22/12/2004, 12h03
thaisno
Citation:

8h, c'est pas plutôt : 150° ?!?

:oops: ...c'est vrai... et celà démarre bien l'arc à l'angle désiré ! :P

Ceci dit c'est super GENIAL, :pc: à présent à l'aide de ton code on peut traiter des cercles ou des arcs en traits interrompus avec une trés grande facilité... ce que je recherchais

De plus, :wink: si on "chinte", les 2 lignes du code de la boucle while, et que l'on augmente la valeur "nbSegment -> nbre de segment" on obtient un arc (ou un cercle) en traits plein de trés bonne qualité par le même procédé...
Code:

1 2 3 4 5 while(increment<=angleDepart+arc) { ...... //increment+=pas; //newCercle.moveTo (posx+rayon*Math.cos..... }
Je me baisse bien bas et te dis chapeau "freegreg", pour ce résultat, la rapidité et l'efficacité de ton aide! :bravo:

allez @+ thaisno :coucou:

PS: je n'ai pas de site, mais y at'il une solution pour montrer le résultat du travail et le mettre à disposition en fla et en swf quand mon projet sera terminé ou tout du moins bien avancé ????
22/12/2004, 14h03
freegreg
Citation:
Envoyé par thaisno

Citation:

8h, c'est pas plutôt : 150° ?!?

:oops: ...c'est vrai... et celà démarre bien l'arc à l'angle désiré ! :P

Ceci dit c'est super GENIAL, :pc: à présent à l'aide de ton code on peut traiter des cercles ou des arcs en traits interrompus avec une trés grande facilité... ce que je recherchais

De plus, :wink: si on "chinte", les 2 lignes du code de la boucle while, et que l'on augmente la valeur "nbSegment -> nbre de segment" on obtient un arc (ou un cercle) en traits plein de trés bonne qualité par le même procédé...

Code:

1 2 3 4 5 while(increment<=angleDepart+arc) { ...... //increment+=pas; //newCercle.moveTo (posx+rayon*Math.cos..... }

Je me baisse bien bas et te dis chapeau "freegreg", pour ce résultat, la rapidité et l'efficacité de ton aide! :bravo:

allez @+ thaisno :coucou:
Content de t'avoir aidé
:D

Citation:

Envoyé par thaisno

PS: je n'ai pas de site, mais y at'il une solution pour montrer le résultat du travail et le mettre à disposition en fla et en swf quand mon projet sera terminé ou tout du moins bien avancé ????

Soit tu prends un hébergement gratuit quelque part, cela prend très peu de temps, soit si c'est pas trop gros, je le mets sur mon compte perso (Tu m'envoies un mp) :wink: