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