的Flex /的Actionscript - 捕捉帆布位圖動態放置元素

Question

我試圖找到一個柔性畫布元素之間重疊的 http://www.gskinner.com/blog/archives/2005/08/flash_8_shape_b.html

這裏的嘗試是把一些文字和圖形重疊與以前的適應放置文本。 下面的簡單例子說明了這個問題。

Both ImageSnapshot.captureBitmapData（canvas）; 或 BitmapData.draw（canvas）;

似乎無法動態捕獲放置在畫布上的元素。

有關我如何完成此任務的任何線索？

在此先感謝您的幫助。 -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

調用addChild不會使組件立即可見/可用其父項內。在獲取包含多個階段/事件的位圖之前，您需要完成創建過程。將抓取的代碼放入一個單獨的方法中，並在完成動態創建的組件的創建過程之後調用它。通過使用callLater方法來實現這一點，該方法將您的方法調用放在事件隊列的末尾。這裏是你的代碼添加callLater（不是很漂亮，但希望它可以得到點）：

<?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>