Discussion :

[cedric.c]

Bonjour,

je présente ici une version simplifiée de mon problème. J'ai développé une petite application qui dessine 3000 points sur un canvas. Mon gros souci est la rapidité d'exécution de cette application.

J'ai essayé 2 méthodes:

- l'une où je boucle 3000 fois en créant un UIComponent puis en l'ajoutant sur le canvas -> environ 6 secondes. Ce délais d'attente est déjà trop long selon les exigences de rapidité de mon cahier des charges. Si j'ai bien compris le mécanisme, flex attends d'avoir effectuer tous les calculs avant d'afficher le rendu, ce qui est donc une fonctionnalité bloquante : tant que le rendu n'a pas été fait, aucune autre action ne peut etre effectuée (par exemple le lancement d'un timer qui compterait le temps que met flex entre l'appel à la fonction d'affichage et le rendu final).

- une deuxième méthode que j'ai expérimenté est de "forcer" le rendu toutes les 20ms (avec un framerate de 50, je ne peux pas faire plus rapide). C'est-à-dire que toutes les 20ms, un point est dessiné et affiché sur le canvas -> je n'ai pas eu le courage d'attendre la fin de l'affichage, ça se compte en dizaines de secondes. Apparament le player regénère l'affichage complet à chaque nouveaux points, il s'avère qu'il s'agit de la pire des solutions en fait, vu qu'à chaque points il regénère l'affichage de tous les points antérieurs...

Vu qu'une petite appli vaut mieux que tous les discours, voici le code (désolé, je n'ai pa eu le tps de le commenter, mais il n'y a rien de particulier dedans).

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
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	width="500"
	height="500"
	frameRate="50"
	>
 
	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;
 
			[Bindable] public var timeSpent : Number = 0;
 
			public function drawCircleDirect() : void
			{
				var time:Timer = new Timer(1000, 0);
				time.addEventListener(TimerEvent.TIMER, countTimeSpent);
				time.start();
 
				var i:int;
 
				for(i=0; i<3000; i++)
				{
					var uic:UIComponent = new UIComponent();
					uic.graphics.beginFill(0x00FFFF);
					uic.graphics.drawCircle(Math.random()*400, Math.random()*400, 4);
					uic.graphics.endFill();
 
					canvas.addChild(uic);
				}
 
				if(i>=3000) time.stop();
			}
 
			private function resetAll() : void
			{
				this.timeSpent = 0;
				canvas.removeAllChildren();
			}
 
			private function countTimeSpent(event:TimerEvent) : void
			{
				this.timeSpent += 1;
			}
			private function endCountTimeSpent(event:TimerEvent) : void
			{
				(event.target as Timer).stop();
			}
 
			public function drawCircleProgressif() : void
			{
				var timer:Timer = new Timer(20, 3000);
				timer.addEventListener(TimerEvent.TIMER, drawOneCircle);
				timer.addEventListener(TimerEvent.TIMER_COMPLETE, endCountTimeSpent);
 
 
				var time:Timer = new Timer(1000, 0);
				time.addEventListener(TimerEvent.TIMER, countTimeSpent);
 
 
				time.start();
				timer.start();
			}
 
			private function drawOneCircle(event:TimerEvent) : void
			{
				var uic:UIComponent = new UIComponent();
				uic.graphics.beginFill(0x00FFFF);
				uic.graphics.drawCircle(Math.random()*400, Math.random()*400, 4);
				uic.graphics.endFill();
 
				canvas.addChild(uic);
			}
		]]>
	</mx:Script>
 
 
	<mx:HBox>
		<mx:Button
			label="Lancer l'affichage direct"
			click="resetAll(); drawCircleDirect()"
		/>
		<mx:Button
			label="Lancer l'affichage progressif"
			click="resetAll(); drawCircleProgressif()"
		/>
		<mx:Button
			label="Effacer tout"
			click="resetAll()"
		/>
		<mx:Label
			text="{timeSpent.toString()}s"
		/>
	</mx:HBox>
 
	<mx:Canvas
		id="canvas"
		x="50"
		y="50"
		backgroundColor="yellow"
		width="400"
		height="400"
	/>
 
</mx:Application>

Je cherche donc une solution, qui me permettrait d'avoir un rendu beaucoup plus rapide et fluide (un autre composant plus léger que UIComponent?). Je précise que c'est bien l'action du "addChild" qui est longue à s'exécuter, et non le fait de créer les objets UIComponent). N'hésitez pas, à me donner votre avis, Je suis prenneur de toutes solutions car je bloque la-dessus depuis plusieurs jours sans avoir avancé d'un poil...

Merci à ceux qui ont eu le courage de lire ce post en entier

[Jim_Nastiq]

Salut,

as tu essayé avec la classe Sprite?

[cedric.c]

Salut,

oui, j'ai essayé les Sprite et les Shape, et même si cela améliore un peu le temps d'attente avant rendu, ce n'est quand même toujours pas ça... Le gros problème est qu'il faut que je puisses identifier les points que je dessine, pour pouvoir ensuite cliquer dessus ou afficher une tooltip au survol...

Une autre piste m'a été présentée sur un autre forum, qui consiste à faire quelque chose de ce style :

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
 
public function drawPoints() : void
{
    var uic:UIComponent = new UIComponent();
    uic.width = canvas.width;
    uic.height = canvas.height;
    for(var i:int=0; i<10000; i++) 
    {
        uic.graphics.beginFill(Math.random() * 0xffffff);
        uic.graphics.drawCircle(Math.random()*400, Math.random()*400, 4);
	uic.graphics.endFill();	
    }
 
    canvas.addChild(uic);
}

Puis ensuite utiliser un objet ImageMap qui permet d'agir sur des zones d'une image. Cette méthode permet d'afficher 10.000 points en moins d'une seconde, quasiment instantannément!

Je vais donc m'orienté vers cette piste, mais si tu as d'autres idées, je suis toujours prenneur !