Peindre un composant dans une bitmap

Version imprimable

01/06/2008, 14h00
weebib

Peindre un composant dans une bitmap
Boujour à tous,

Je cherche à peindre un de mes composants dans une Bitmap. Pour ça, j'ai essayé d'utiliser la méthode BitmapData.draw(myComp,...) (ou ImageSnapshot.captureBitmapData(...), ce qui revient à peu près au même). Mon problème, c'est que code ne semble fonctionner qu'avec des composants "actifs", c'est à dire déjà intégrés dans l'arborescence de composants de mon application. En gros, je voudrais être capable de faire la chose suivante :
Code:

1 2 3 4 5 6 7 8 var label:Label = new Label(); label.text = "toto"; label.width = 40; label.height = 40; // ... var bitmapData:BitmapData = new BitmapData(); bitmapData.draw(label);
Pour avoir essayé ce type de code avec une de mes classes, j'ai pu voir que la méthode updateDisplayList de mon composant n'était même pas appelée, ce qui explique pourquoi la bitmap reste désespérement vide.

Je me demandais donc si ce que j'essaie de faire est impossible ou s'il est possible d'ajouter un quelconque code pour rendre le label "renderable".

Merci d'avance,

Pierre.
02/06/2008, 09h54
Jim_Nastiq

euh... quand tu dis peindre ton composant, c'est juste le colorer??
02/06/2008, 10h37
weebib

Citation:

Envoyé par Jim_Nastiq

euh... quand tu dis peindre ton composant, c'est juste le colorer??

Désolé, c'est toujours la terminologie java qui me vient à l'esprit ("paintComponent"). En gros, "peindre" mon composant signifie convertir l'information vectorielle qu'il représente en une image (BitmapData). Tous les exemples que j'ai vus fonctionnaient avec des DisplayObjects (qu'ils soient UIComponents ou simples Sprites) qui étaient affichés à l'écran au moment de la capture, ce qui n'est pas la fonctionnalité que je recherche.

Je travaille en ce moment sur la génération d'un rapport (une série de petits graphiques que j'ai développés moi-même sous la forme de sous-classes de UIComponent) au format pdf. Pour cela, j'ai besoin de générer des images de mes graphiques pour les insérer dans le fichier pdf, sachant que ces graphiques ne sont pas nécessairement affichés à l'écran au moment de l'écriture du pdf.

Pierre.

il faut lui passer la taille du composant non?
Code:

1 2 3 bmp = new BitmapData (tonLabel.width, tonLabel.height); bmp .draw(tonLabel);

[QUOTE=Jim_Nastiq;3331871]il faut lui passer la taille du composant non?
Désolé (encore ;) ), j'ai juste oublié de retranscrire ce détail dans mon post. Je l'avais fait dans mon code...

J'ai fait un petit programme pour bien illustrer ce qui se passe :

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
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			private function onResetImage(event:MouseEvent):void {
				image.source = null;
			}
 
			private function onTest1(event:MouseEvent):void {
				var bitmapData:BitmapData = new BitmapData(firstLabel.width, firstLabel.height);
				bitmapData.draw(firstLabel);
				var bitmap:Bitmap = new Bitmap(bitmapData);
				image.source = bitmap;
			}
 
			private function onTest2(event:MouseEvent):void {
				var label:Label = new Label();
				label.text = "toto";
				label.width = firstLabel.width;
				label.height = firstLabel.height;
				/*
				J'ai essayé ici toute sorte de code :
				- les différentes méthodes invalidate***,
				- la méthode prepareToPrint,
				- modifier les styles...,
				- les méthodes move, setActualSize,
				- toutes les méthodes agissant sur la taille.
				*/
				var bitmapData:BitmapData = new BitmapData(firstLabel.width, firstLabel.height);
				bitmapData.draw(label);
				var bitmap:Bitmap = new Bitmap(bitmapData);
				image.source = bitmap;
			}
 
			private function onTest3(event:MouseEvent):void {
				var shape:Shape = new Shape();
				shape.x = 0;
				shape.y = 0;
				shape.graphics.lineStyle(1, 0, 1);
				shape.graphics.drawCircle(10, 10, 10);
				var bitmapData:BitmapData = new BitmapData(60, 60);
				bitmapData.draw(shape);
				var bitmap:Bitmap = new Bitmap(bitmapData);
				image.source = bitmap;
			}
		]]>
	</mx:Script>
	<mx:Image x="40" y="36" width="185" height="135" id="image"/>
	<mx:Label x="301" y="38" text="toto" id="firstLabel" opaqueBackground="0xFFFFFF"/>
	<mx:Button x="233" y="36" label="Test 1" click="onTest1(event)"/>
	<mx:Button x="233" y="66" label="Test 2" click="onTest2(event)"/>
	<mx:Button x="233" y="96" label="Test 3" click="onTest3(event)"/>
	<mx:Button x="233" y="126" label="Reset" click="onResetImage(event)"/>
</mx:Application>

Ce test montre que :
- (test 1) : pour un label existant (firstLabel), ça marche
- (test 2) : pour un label (ou tout autre UIComponent, apparemment) créé à la volée, ça ne marche pas.
- (test 3) : pour un objet de type Shape créé à la volée, ça marche.

Il en ressort donc, qu'en l'absence d'un code "magique" que j'ignore, les instances de UIComponent ne peuvent pas être "rendues" immédiatement après leur création si elles ne sont pas ajoutées à l'application.

Pierre.

03/06/2008, 12h42
Jim_Nastiq

As tu essayé de catché l'événement creationComplete de ton Label et dans ton handler ajouter ta mécanique. Je soupconne un soucis de composant pas réellement créé au moment de ton coup de pinceau :mrgreen:

Je confirme juste mon post précédent avec cette petite modification sur la méthode onTest3 :

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
 
private function onTest3(event:MouseEvent):void {
	var sprite:Sprite = new Sprite();
	var textField:TextField = new TextField();
	textField.text = "toto";
	textField.x = 0;
	textField.y = 15;
	sprite.addChild(textField);
	var label:Label = new Label();
	label.text = "toto 2";
	label.x = 0;
	label.y = 30;
	label.width = 20;
	label.height = 10;
	sprite.addChild(label);
	var shape:Shape = new Shape();
	shape.x = 0;
	shape.y = 0;
	shape.graphics.lineStyle(1, 0, 1);
	shape.graphics.drawCircle(10, 10, 10);
	sprite.addChild(shape);
	var bitmapData:BitmapData = new BitmapData(60, 60);
	bitmapData.draw(sprite);
	var bitmap:Bitmap = new Bitmap(bitmapData);
	image.source = bitmap;
}

Ca marche aussi pour les Sprites et les TextFields mais pas pour le Label ajouté au Sprite, ce qui confirme l'hypothèse que le problème ne concerne que les UIComponents.

Pierre.

03/06/2008, 12h46
weebib

Citation:

Envoyé par Jim_Nastiq

As tu essayé de catché l'événement creationComplete de ton Label et dans ton handler ajouter ta mécanique. Je soupconne un soucis de composant pas réellement créé au moment de ton coup de pinceau :mrgreen:

Désolé, j'étais en train de poster un autre message. Je vais tester...

Pierre.

j'ai donc testé ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 private function onTest2(event:MouseEvent):void { var label:Label = new Label(); label.text = "toto"; label.width = firstLabel.width; label.height = firstLabel.height; label.invalidateProperties(); label.invalidateSize(); label.invalidateDisplayList(); label.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:FlexEvent):void { var bitmapData:BitmapData = new BitmapData(firstLabel.width, firstLabel.height); bitmapData.draw(label); var bitmap:Bitmap = new Bitmap(bitmapData); image.source = bitmap; }); }
Visiblement, l'événement n'est jamais lancé (j'ai mis les méthodes invalidate au cas où. cf. la doc de creationComplete).

Il faut savoir aussi, qu'au départ, je voulais appeler ce code sur une de mes classes (en fait, une sous-classe de UIComponent) pour laquelle je loguais les appels à updateDisplayList. J'avais donc pu constater que cette méthode n'était jamais appelée consécutivement au BitmapData.draw.

Pierre.

salut

as tu essayé les méthodes :
validateDisplayList()
validateNow()
?

---- édition ----

je viens de voir ton code et si j'ai bien compris tu veux faire fonctionner le code de la méthode onTest2 ?
tu crées juste une référence sur le composant en mémoire mais il n'est jamais dessiné donc le draw ne peut pas fonctionner.
le composant doit etre placé sur la scene pour etre dessiné, a ce moment tu peux faire le draw() !
cette remarquable est valable pour tous les enfants de UIComponent.

ceci fonctionne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 private function onTest2(event:MouseEvent):void { var label:Label = new Label(); label.text = "toto"; label.width = firstLabel.width; label.height = firstLabel.height; label.name = "cible"; this.addChild(label); label.addEventListener(FlexEvent.CREATION_COMPLETE, evtCrea); } private function evtCrea(ev:FlexEvent):void { var bitmapData:BitmapData = new BitmapData(this.getChildByName('cible').width, this.getChildByName('cible').height); bitmapData.draw(this.getChildByName('cible')); var bitmap:Bitmap = new Bitmap(bitmapData); image.source = bitmap; this.removeChild(this.getChildByName('cible')); }

03/06/2008, 17h06
Jim_Nastiq

Bien vue Lorenzo, j'avais pas les yeux ouvert :lol:, j'suis passé un peu trop rapidement sur le code faut croire :aie:

Citation:
Envoyé par Lorenzo77
salut

as tu essayé les méthodes :
validateDisplayList()
validateNow()
?

---- édition ----

je viens de voir ton code et si j'ai bien compris tu veux faire fonctionner le code de la méthode onTest2 ?
tu crées juste une référence sur le composant en mémoire mais il n'est jamais dessiné donc le draw ne peut pas fonctionner.
le composant doit etre placé sur la scene pour etre dessiné, a ce moment tu peux faire le draw() !
cette remarquable est valable pour tous les enfants de UIComponent.

ceci fonctionne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 private function onTest2(event:MouseEvent):void { var label:Label = new Label(); label.text = "toto"; label.width = firstLabel.width; label.height = firstLabel.height; label.name = "cible"; this.addChild(label); label.addEventListener(FlexEvent.CREATION_COMPLETE, evtCrea); } private function evtCrea(ev:FlexEvent):void { var bitmapData:BitmapData = new BitmapData(this.getChildByName('cible').width, this.getChildByName('cible').height); bitmapData.draw(this.getChildByName('cible')); var bitmap:Bitmap = new Bitmap(bitmapData); image.source = bitmap; this.removeChild(this.getChildByName('cible')); }
Merci pour ta réponse. C'est donc bien ce que je craignais. Il va donc me falloir recoder mes graphiques en n'utilisant que des DisplayObjects simples (Sprite, Shape, TextField...). Un peu de boulot en perspective...

Pierre.

PS: pour info, j'ai essayé validateNow et validateDisplayList : apparemment, le textField du Label n'est pas créé (la méthode createChildren n'est pas appelée).