DisplayObject snapshot in flex 3

问题

i'm creating a visual editor in flex and need to let users export thier projects into Image format. But i have one problem: size of the canvas is fixed and when user add element which is out of these sizes some scroll bars added. And user continue working on the project. but when he want to take snapshot of the canvas he just get the visible part ot the canvas with scrollbars. how to get image of the fullsize canvas?

The only solution i found is to check the positions and sizes of canvas child objects and rezise it to fit them. then take snap and resize back. But it hmmmm... too complicated i think. Is there some "easy methods"?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
    <![CDATA[
        import mx.graphics.ImageSnapshot;

        private function SnapshotButtonHandler():void
        {
            var snapshot:ImageSnapshot = ImageSnapshot.captureImage(AppCanvas);
            var file:FileReference = new FileReference();
            file.save(snapshot.data, "canvas.png");
        }
    ]]>
</mx:Script>
<mx:Canvas id="AppCanvas" width="800" height="300" backgroundColor="0xFFFFFF">
    <mx:Box x="750" y="100" width="100" height="100" backgroundColor="0xCCCCCC" />
</mx:Canvas>
<mx:Button id="SnapshotButton" label="take snapshot" click="SnapshotButtonHandler()" /> 
</mx:Application>

回答1:

i would put one container into the scrollable canvas, that adapts it's size according to objects in it ... maybe even UIComponent would do the trick ... then do a snapshot of that container ... the canvas only adds the scrollbars, so to speak ...

greetz

back2dos

回答2:

Solution i found

BaseCanvas - canvas with fixed height and width EditCanvas - dynamic canvas which params depends on it's children position.

Snapshot takes from EditCanvas. Here part of code

private function SnapshotButtonHandler():void
{
    var snapshot:ImageSnapshot = ImageSnapshot.captureImage(EditCanvas);
    var file:FileReference = new FileReference();
    file.save(snapshot.data, "canvas.png");
}
private function ResizeCanvas():void
{
    for each (var child:* in AppCanvas.getChildren())
    {
        if ((child.x + child.width) > AppCanvas.width)
            AppCanvas.width = child.x+child.width;
        if ((child.y + child.height) > AppCanvas.height)
            AppCanvas.height = child.y+child.height;
    }
}

<mx:Canvas id="BaseCanvas" width="300" height="200">
    <mx:Canvas id="EditCanvas" width="300" height="200" backgroundColor="0xFFFFF0" horizontalScrollPolicy="off" verticalScrollPolicy="off"/>
</mx:Canvas>

回答3:

krishna: make sure you're targeting flash player 10 in your build path.

来源：https://stackoverflow.com/questions/1103374/displayobject-snapshot-in-flex-3

标签

apache-flex

flash

actionscript-3