Discussion :

[ouaqa]

Bonjour à tous,

Depuis 3 jours, je bloque sur un problème de transparence entre différentes images empilées dans un Canvas.

L'image du dessous est un jpg "embeddé" ne présentant aucun soucis à l'affichage.
Seulement, lorsque j'ajoute une image (un png contenant des zones de transparence) , seul le png est affiché et les zone transparentes sont dessinées en blanc.

voici quelques morceaux de codes choisis pour illustrer la façon dont j'ajoute le png dans le canvas :

Méthodes concernées dans l'objet conteneur, héritant de canvas :

chargement de l'image :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
public function setImageFrame (AnImageSource : String) : void
{
 
	var request:URLRequest = new URLRequest(AnImageSource);
	var imageLoader:Loader = new Loader();
	imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onFrameReceptionComplete);
 
 
	imageLoader.load(request)
}

reception de l'image :

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
 
private function onFrameReceptionComplete (event : Event) : void
{
	this.setColoredFrame(0,0);
	if (this.frameImage != null)
	{
		this.removeChild(this.frameImage) ;
	}
 
	var bounds : Rectangle = new Rectangle(0,0,this.width,this.height);			
 
 
	this.frameImage = new Image() ;
 
 
	var rawFrame : Bitmap = event.currentTarget.content
	var rawBitmapDataFrame : BitmapData = new BitmapData (rawFrame.width , rawFrame.height , true,0xFF000000) ;
	rawBitmapDataFrame.draw(rawFrame) ;
 
	rawFrame = new Bitmap(rawBitmapDataFrame) ;
//	trace (rawFrame.bitmapData.transparent); affiche true
 
	frameImage.source = LCUtilTools.cropAndResizeImage(rawFrame , bounds);
 
	trace (Bitmap(frameImage.source).bitmapData.transparent); //affiche true
 
	frameImage.smoothBitmapContent = true;
 
	this.addChild(frameImage);
}

la fonction cropAndResize (...) utilisée pour adapter une image à la taille de son conteneur :

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
 
public static function cropAndResizeImage (AnImage : Bitmap , ABounds : Rectangle) : Bitmap
{
 
	var celluleRawBitmap : BitmapData = AnImage.bitmapData	
 
	var originalWidth:Number = celluleRawBitmap.width;
	var originalHeight:Number = celluleRawBitmap.height;
	var newWidth:Number = originalWidth;
	var newHeight:Number = originalHeight;
 
 
	var scale : Number ;
 
	var m:Matrix = new Matrix();
 
	var scaleX:Number = 1;
	var scaleY:Number = 1;
 
 	if (originalWidth > ABounds.width || originalHeight > ABounds.height)
 	{
  		scaleX =  ABounds.width / celluleRawBitmap.width;
  		scaleY = ABounds.height / celluleRawBitmap.height;
  		scale = Math.max(scaleX, scaleY);
  		newWidth = originalWidth * scale;
  		newHeight = originalHeight * scale;	
  	}
 
  	m.scale(scale,scale);
 
  	var zoomArea : Rectangle ;
  	zoomArea = celluleRawBitmap.rect ;
  	zoomArea.inflate(ABounds.width , ABounds.height);
	var editedBitmapData : BitmapData = new BitmapData (ABounds.width , ABounds.height , true ,0xFF000000);
	editedBitmapData.draw(AnImage.bitmapData,m);
 
	return ( new Bitmap(editedBitmapData));
}

la création du bitmapdata avec pour dernier argument (0xFF000000) n'était pas faite à l'origine mais cela permettrais de definir l'alpha du bitmap. Vous lisez la version avec pour valeur 0xFF000000 mais j'ai aussi essayé avec 0x00000000 sans aucun résultat.

Je n'ai plus aucune idée pour avancer. Toute suggestion est la bienvenue, merci d'avance.

[ouaqa]

edit :

J'ai oublié de mentionner d'où je pense que le problème viens :
en mode debug, lorsque j'analyse le contenu de mon fichier png original à la réception (le contenu de event.content), sa propriété bitmapdata.transparency = false.

Ces png sont fournis par le client , ils ont une définition de 32 bits et lorsqu'ils sont ouverts dans photoshop, on vois clairement les zones de transparence.

Si le problème viens réellement de là (et c'est sûrement le cas) , comment puis-je charger le png de façon à avoir une transparence valide.
Ou bien, comment puis-je le rendre transparent de façon élégante ?
J'ai essayé d'utiliser les BlendModes du canvas et de ces images mais je patauge sérieusement.

[ouaqa]

J'essaie de trouver une solution avec la méthode setPixel32 ou copyChannel de la classe BitmapData.
Seulement, je patauge, notamment pour trouver les pixels sensés être transparent, ce que je vois comme étant blanc est en fait une soupe de valeurs hexa diverses et variées.

Comme précédemment, tout conseil est le bienvenu. Je peux apporter autant d'informations complémentaires que vous m'en demandez.

[ouaqa]

Bon, j'ai modifié ma methode onFrameReceptionComplete pour y ajouter les lignes suivantes :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
Bitmap(frameImage.source).bitmapData.lock();
for (cptX = 0 ; cptX < maxX ; cptX ++)
{
 
	for (cptY = 0 ; cptY < maxY ; cptY ++)
	{
		if (Bitmap(frameImage.source).bitmapData.getPixel(cptX , cptY) == 0xF5FBFB)
		{ Bitmap(frameImage.source).bitmapData.setPixel32(cptX,cptY, 0x00000000) }
	}
}
Bitmap(frameImage.source).bitmapData.unlock();

De cette façon, les pixels transparents (affichés avec la couleur F5FBFB) sont modifiés un à un pour les rendre transparents.

Ce n'est pas du tout élégant mais je peux passer à autre chose.
Si quelqu'un à une autre solution à proposer, je suis preneur. Ne serais-ce que pour savoir la prochaine fois.

Merci d'avance