Flex/Actionscript - capture bitmap en toile avec des éléments dynamiquement placés

Question

je tente de trouver un chevauchement entre les éléments sur une toile souple, une adaptation de http://www.gskinner.com/blog/archives/2005/08/flash_8_shape_b.html

La tentative ici est de placer du texte et le chevauchement figure avec précédemment texte placé. L'exemple simple ci-dessous illustre le problème.

Les deux ImageSnapshot.captureBitmapData (canvas); ou BitmapData.draw (canvas);

ne semblent pas capturer dynamiquement les éléments placés sur le canevas.

Des indices sur comment je peux accomplir cela?

Merci d'avance pour toute aide. -vivek

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
       creationComplete="init()"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.controls.Image; 
      import mx.controls.Text; 
      import mx.graphics.ImageSnapshot; 

      public function init():void { 
       var l:Label = new Label(); 
       l.text = 'Dynamic Label!'; 
       l.x = text.x+50; 
       l.y = text.y; 
       canvas1.addElement(l); 

       var bounds:Rectangle = text.getBounds(this); 
       trace(bounds.top + ',' + bounds.left + ',' + bounds.width + ',' + bounds.height); 
       var bmd:BitmapData = new BitmapData(text.width, text.height); 
       bmd.draw(text); 
       var bm:Bitmap = new Bitmap(bmd); 
       var img:Image = new Image(); 
       img.source = bm; 
       img.x = 0; 
       img.y = 20; 
       canvas2.addChild(img); 

       var c2:BitmapData = ImageSnapshot.captureBitmapData(canvas1); 
       var bmd2:BitmapData = new BitmapData(text.width,text.height); 
       bmd2.copyPixels(c2,bounds,new Point(0,0)); 
       var bm2:Bitmap = new Bitmap(bmd2); 
       var img2:Image = new Image(); 
       img2.source = bm2; 
       img2.x = 0; 
       img2.y = 50; 
       canvas2.addChild(img2); 

       var c3:BitmapData = new BitmapData(canvas1.width, canvas1.height); 
       c3.draw(canvas1); 
       var bmd3:BitmapData = new BitmapData(text.width,text.height); 
       bmd3.copyPixels(c3,bounds,new Point(0,0)); 
       var bm3:Bitmap = new Bitmap(bmd2); 
       var img3:Image = new Image(); 
       img3.source = bm3; 
       img3.x = 0; 
       img3.y = 50; 
       canvas3.addChild(img3); 

      } 
     ]]> 
    </fx:Script> 
    <mx:Canvas id="canvas1" width="400" height="100" backgroundColor="#FF0000"> 
     <s:Label id="text" x="200" y="50" text="This is a test"/> 
    </mx:Canvas> 
    <mx:Canvas id="canvas2" y="100" width="400" height="100" backgroundColor="#00FF00"/>  
    <mx:Canvas id="canvas3" y="200" width="400" height="100" backgroundColor="#0000FF"/> 
</s:Application> 

Answer 1

Appel addChild ne fait pas immédiatement le composant visible/disponible dans son parent. Vous devez terminer le processus de création avant de récupérer le bitmap, qui implique plusieurs phases/événements. Placez votre code attractif dans une méthode distincte et appelez-le APRES la fin du processus de création pour votre composant créé dynamiquement. Pour ce faire, utilisez la méthode callLater, qui placera votre appel de méthode à la fin de la file d'attente des événements. Voici votre code avec callLater ajouté (pas si joli, mais avec un peu de chance, il obtient le point à travers):

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
       creationComplete="init()"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.controls.Image; 
      import mx.controls.Text; 
      import mx.graphics.ImageSnapshot; 

      public function init():void { 
       var l:Label = new Label(); 
       l.text = 'Dynamic Label!'; 
       l.x = text.x+50; 
       l.y = text.y; 
       canvas1.addElement(l); 

       this.callLater(addRect); 
      } 

      private function addRect():void { 

       var bounds:Rectangle = text.getBounds(this); 
       trace(bounds.top + ',' + bounds.left + ',' + bounds.width + ',' + bounds.height); 
       var bmd:BitmapData = new BitmapData(text.width, text.height); 
       bmd.draw(text); 
       var bm:Bitmap = new Bitmap(bmd); 
       var img:Image = new Image(); 
       img.source = bm; 
       img.x = 0; 
       img.y = 20; 
       canvas2.addChild(img); 

       var c2:BitmapData = ImageSnapshot.captureBitmapData(canvas1); 
       var bmd2:BitmapData = new BitmapData(text.width,text.height); 
       bmd2.copyPixels(c2,bounds,new Point(0,0)); 
       var bm2:Bitmap = new Bitmap(bmd2); 
       var img2:Image = new Image(); 
       img2.source = bm2; 
       img2.x = 0; 
       img2.y = 50; 
       canvas2.addChild(img2); 

       var c3:BitmapData = new BitmapData(canvas1.width, canvas1.height); 
       c3.draw(canvas1); 
       var bmd3:BitmapData = new BitmapData(text.width,text.height); 
       bmd3.copyPixels(c3,bounds,new Point(0,0)); 
       var bm3:Bitmap = new Bitmap(bmd2); 
       var img3:Image = new Image(); 
       img3.source = bm3; 
       img3.x = 0; 
       img3.y = 50; 
       canvas3.addChild(img3); 

      } 
     ]]> 
    </fx:Script> 
    <mx:Canvas id="canvas1" width="400" height="100" backgroundColor="#FF0000"> 
     <s:Label id="text" x="200" y="50" text="This is a test"/> 
    </mx:Canvas> 
    <mx:Canvas id="canvas2" y="100" width="400" height="100" backgroundColor="#00FF00"/>  
    <mx:Canvas id="canvas3" y="200" width="400" height="100" backgroundColor="#0000FF"/> 
</s:Application>