Composing an ImageSnapshot source dynamically

Question

I want to create a snapshot that composes several components in a different way than they are displayed to the user.

Let's say the layout on screen looks like this:

<s:VGroup>
    <s:HGroup id="dynamicPopulatedGroup" />
    <mx:TabNavigator id="tabs">
        <s:NavigatorContent> <mx:LineChart id="chart1"/> </s:NavigatorContent>
        <s:NavigatorContent> <mx:LineChart id="chart2"/> </s:NavigatorContent>  
    </mx:TabNavigator>
    <mx:Legend id="legend" />
    <s:Button id="bSnapshot" />
</s:VGroup>

But the "screenshot" should be layed out like:

<s:VGroup>
    <s:Label>Some Title Text</s:Label>
    <mx:LineChart>The currently selected tab's chart</mx:LineChart>
    <s:HGroup>
        <s:HGroup id="dynamicPopulatedGroup" /> 
        <mx:Legend id="legend" />
    </s:HGroup>
</s:VGroup>

This is a simplified example but it illustrates the main issue I am trying to accomplish, how to manipulate visual elements within a sandbox without affecting the elements themselves on the screen.

I tried to do this by creating a new Group and adding the various components in code, then taking the screenshot. However this actually removes the components from their original places in the visual tree. Once this is finished running, the entire component is corrupted. Could it be that I need to create copies of these components first?

var g:VGroup = new VGroup();
// label
var l:Label = new Label(); l.text = "some title"; 
g.addElement(l);
// chart
g.addElement(NavigatorContent(tabs.selectedChild).getElementAt(0)); // chart
// legend, etc.
var hgrp:HGroup = new HGroup(); hgrp.addElement(dynamicPopulatedGroup); hgrp.addElement(legend);
g.addElement(hgrp);

ImageSnapshot.captureBitmapData(g);
// then do stuff with bitmap...

score 0 · Answer 1 · answered Jul 23 '12 at 17:19

A DisplayObject can only have one parent. So when you add your chart (and other UI elements) to the new VGroup, they are removed from whatever containers they were originally in.

Making copies of these objects would solve your problem, but it seems to be a bit much.

You could re-work your UI/UX so that when the user needs to make a screen shot, that you actually switch to a new view state and actually render the components w/the desired look and feel, then revert them back. The same way that many sites show a "printable" version of the page.

If that is not acceptable, maybe you can try a hybrid approach, where you take individual snapshots of each UI element and stitch them together. I would imagine the stitching working something like the untested code below:

var combinedImage:Sprite = new Sprite();
var g:Graphics = combinedImage.graphics;
var bitmaps = [bitmap1, bitmap2, bitmap3];
for (var i:int = 0; i < bitmaps.length; i++)
{
    g.beginBitmapFill(bitmaps[i]);
    g.drawRect(xCoordinate,yCoordinate,bitmapWidth,bitmapHeight);
    g.endFill();
    // increment x,y,width,height - leaving this exercise for you :)
}

Composing an ImageSnapshot source dynamically

1 Answers1