Flex/Actionscript - 使用动态放置的元素捕获画布位图

Question

我试图在柔性画布上找到元素之间的重叠，这是对 http://www.gskinner.com/blog/archives/2005/ 08/flash_8_shape_b.html

这里的尝试是将一些文本和图形与先前放置的文本重叠。 下面的简单例子说明了这个问题。

两个都 ImageSnapshot.captureBitmapData(canvas); 或者 BitmapData.draw(画布);

似乎没有动态捕获放置在画布上的元素。

关于我如何实现这一目标有任何线索吗？

预先感谢您的任何帮助。 -维维克

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