Discussion :

[eveilside]

salut a tous !

je suis toujours a la recherche de la methode pour faire un tracé de ligne en direct.


>>dessin qui se trace au fur et a mesure et avec un autre systeme que le cache qui defile.


@+

[CR_Gio]

Bonjour a tous,

Je pense qu'il faut dans un premier temps te faire une petite appli de ce genre :
http://devasco.perso.cegetel.net/app...ppliTrace.html

Afin de récuper les point pour qu'une class les traite.

Ce code est un exemple que j'avais fais pour tracer des segments

Code :

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

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
 
/*
 * Copyright the original author or authors.
 * 
 * Licensed under the MOZILLA PUBLIC LICENSE, Version 1.1 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.mozilla.org/MPL/MPL-1.1.html
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
 /**
 * @author CR_Gio
 * @date 07.12.2006
 * @since 0.1
 * @version 0.1
 *
 * Cette class permet de dessiner des lignes (droite) progressivement
 *
 */
 
dynamic class FlowLines
{
/**##########################################################################
#                             Propriétés
###########################################################################*/
 
	/**
	* Permet de donner un nom unique au clip contenant les lignes
	*/
	static var whatForm:Number=new Number(0);
 
	/**
	* Stoque l'occurence du clip contenant les lignes
	*/
	private var draw:MovieClip;
 
	/**
	* Determine la ligne en court de tracé
	*/
	private var i:Number;
 
	/**
	* Stoque les coordonnées suivant l'axe des abscice des lignes
	*/
	private var pointx:Array;
 
	/**
	* Stoque les coordonnées suivant l'axe des ordonnées des lignes
	*/
	private var pointy:Array;
 
	/**
	* Stoque l'identifiant du timer
	*/
	private var intervalID:Number;
 
	/**
	* Determine si le tracage est en court
	*/
	private var finish:Boolean;
 
	/**
	* Determine la vitesse de rafraichissent
	*/
	private var speed:Number;
 
	/**
	* Determine le pas d'incrementation : precission
	*/
	private var delta:Number;
 
	/**
	* Stoque le coeficient directeur de la ligne en court
	*/
	private var angle:Number;
 
	/**
	* Stoque la longeur de la ligne en court
	*/
	private var module:Number;
 
	/**
	* Stoque la progression du tracé de la ligne en court (longeur)
	*/
	private var raiseModule:Number;
 
	/**
	* Correction bug sous MTASC 1.12 : setInterval ne reconnait pas this
	*/
	private var objectClass:FlowLines;
 
 
 
/**##########################################################################
#                        Fonction constructeur
###########################################################################*/
 
	/**
	 * Cette class permet de construit un editeur de texte
	 * 
	 * @param mc MovieClip type : clip parent de l'editbox
	 * @return classType
	 */
	function FlowLines(mc:MovieClip/* point[] */)
	{
		objectClass=this;
		finish=true;
		i=0;
		speed=10;
		delta=4;
		raiseModule=0;
		pointx=new Array(0);
		pointy=new Array(0);
 
		draw=mc.createEmptyMovieClip("draw"+whatForm, mc.getNextHighestDepth());
		whatForm++;
	}
 
 
 
/**##########################################################################
#                                Méthodes
###########################################################################*/
 
	/**
	 * Cette methode permet d'initialiser la vitesse et la precision du "tracage"
	 * 
	 * @param delta type Number : progression du "tracage" (px)
	 * @param refresh type Number : intervale de temps (ms) entre chaque progression du "tracage"
	 * etc ...
	 * @return void
	 */
	public function configTrace(delta:Number, refresh:Number, thickness:Number, rgb:Number, alpha:Number):Void
	{
		speed=refresh;
		delta=delta;
		draw.lineStyle(thickness, rgb, alpha);
	}
/*      
	public set refresh(vitesse:Number)
	{
 
	}
	public get refresh():Number
	{
	}
 
	public set precision(pas:Number)
	{
	}
	public get precision():Number
	{
	}
 
	public set epaisseur(strong:Number)
	{
	}
	public get epaisseur():Number
	{
	}
 
	public set couleur(color:Number)
	{
	}
	public get couleur():Number
	{
	}
*/
	/**
	 * Cette methode permet d'initialiser les ligne a tracer
	 * 
	 * @param x type Array : coordonnées des points à tracer sur l'axe x
	 * @param y type Array : coordonnées des points à tracer sur l'axe y
	 * @return boolean : retourne false si les tableaux n'ont pas la meme taille
	 */
	public function initTrace(x:Array, y:Array):Boolean
	{
		if(x.length!=y.length)
			return false;
		pointx=x;
		pointy=y;
		findEquation();
		draw.lineStyle(1, 0x000000, 100);
		draw.moveTo(pointx[0], pointy[0]);
 
		return true;
	}
 
	/**
	 * Cette methode permet de demarer le "tracage"
	 * 
	 * @return void
	 */
	public function startTrace():Void
	{
		if(!finish)
			intervalID=setInterval(objectClass, "raiseLine", speed);
	}
 
	/**
	 * Cette methode permet d'arreter le "tracage"
	 * 
	 * @return void
	 */
	public function stopTrace():Void
	{
		if(!finish)
			clearInterval(intervalID);
	}
 
	/**
	 * Cette methode permet d'effacer les lignes
	 * 
	 * @return void
	 */
	public function clearTrace():Void
	{
		draw.clear();
	}
 
	/**
	 * Cette methode permet de calculer les caracteristique de la ligne
	 * 
	 * @return Boolean : retourne false si l'équation n'est pas résolue
	 */
/*correctife a effectuer */
/* ajouter une methode qui determine si l'equation est determinable et envoie a findEquation (x1,y1) (x2,y2) */
	private function findEquation():Boolean
	{
		var px:Number;
		var py:Number;
 
		if( ! ( ( (pointx.length-1)>i ) && ( pointx.length==pointy.length ) ) )
		{
			finish=true;
			return false;
		}
 
		px=new Number(pointx[i+1]-pointx[i]);
		py=new Number(pointy[i+1]-pointy[i]);
 
		module=Math.sqrt(px*px+py*py);
 
		if(py==0)
			angle=Math.acos(px/module);
		else
			angle=Math.acos(px/module)*py/Math.abs(py);
 
		finish=false;
		return true;
	}
 
	/**
	 * 
	 * Cette methode permet de tracer le segment suivant de la ligne en court
	 *
	 * @return void
	 */
	/*
	 * correctife
	 * Peut etre en public ...
	 * Permetrait de commander la progression du dessin manuellement a (voir)
	 * ajouter une methode pour commander le renouvellement de la progression (commander manuellement ?)
	 */
	private function raiseLine():Void
	{
		raiseModule=raiseModule+delta;
		if(raiseModule>module)
		{
			draw.lineTo(pointx[i+1],pointy[i+1]);
			clearInterval(intervalID);
			i++;
			if(findEquation())
			{
				raiseModule=0;
				startTrace();
			}
			else
				onComplete();
 
		}
		else
		{
			onProgress();
			draw.lineTo(raiseModule*Math.cos(angle)+pointx[i],raiseModule*Math.sin(angle)+pointy[i]);
		}
	}
 
	public function onProgress()
	{
	}
	public function onComplete()
	{
	}
}

Pour essayer :

Code :

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

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
 
	_root.createTextField("tf",_root.getNextHighestDepth(),200,200,50,30);
	var x:Array=new Array(200,300,350,300,200,100,50,100,200);
	var y:Array=new Array(350,300,200,100,50,100,200,300,350);
 
	var my_form:FlowLines=new FlowLines(_root);
	my_form.configTrace(1, 100, 1, 0x000000, 100);//valeur par default
	my_form.initTrace(x, y);
	my_form.startTrace();
 
	mc.tf.text="Play ...";
/*
juste pour le fun
	var tickness:Number=1;
	my_form.onProgress=function()
	{
		my_form.configTrace(4, 10, tickness, 0x00FF00, 100-(5*tickness));
		tickness+=0.05;
	}
*/
	my_form.onComplete=function()
	{
		mc.tf.text="Finish !!! and clear";
//			my_form.clearTrace();
	}

Bon ce code est crade a mort!! je le post pour te donner une idée.
Mais il n'y a que la motier du chemin qui est fait! il faut faire la meme class mais pour les courbe de bezier.
Afin de regroupé ces deux class pour n'en faire qu'une....

Pour les courbe de bezier, acroche toi bien
les courbe de bezier cubic ( celle que flash utilise ) on pour fonction :
avec 0<=t<=1
B(t)=P0*(1-t)² + P1*(1-t)*2t + P2*t²
Plus d'info : http://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier

Cool on sais deteminer la position de la courbe a un point t

Maintenant ce qu'il nous interrese, c'est de calculer l'abscisse curviligne.
voici ca formule :
ds/du = ((dx/du)^2+(dy/du)^2)^0,5

Il ne te reste plus qu'a calculer, et resoudre l'équation ds/du pour connaitre la prochaine courbe a tracer ( car on decompose la courbe ... tu me suis )