Question

我想创建一个快照，它以不同于向用户显示的方式组合多个组件。

假设屏幕上的布局如下：

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

但是“截图”应该像：

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

这是一个简化的示例，但它说明了我要完成的主要问题，如何操纵沙箱中的可视元素而不影响屏幕上的元素本身。

我尝试通过创建新的Group并在代码中添加各种组件，然后截取屏幕截图来实现此目的。但是，这实际上会从可视树中的原始位置删除组件。一旦完成运行，整个组件就会损坏。 可能是我需要先创建这些组件的副本吗？

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

Answer 1

DisplayObject只能拥有一个父级。因此，当您将图表（和其他UI元素）添加到新VGroup时，它们将从最初所在的容器中删除。

复制这些对象可以解决您的问题，但似乎有点多了。

您可以重新使用UI / UX，以便在用户需要进行屏幕截图时，您实际切换到新的视图状态并实际渲染具有所需外观的组件，然后将其还原。与许多网站显示页面的“可打印”版本的方式相同。

如果这是不可接受的，也许您可以尝试混合方法，在这种方法中，您可以获取每个UI元素的单独快照并将它们拼接在一起。我认为拼接工作类似于下面未经测试的代码：

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 :)
}

动态编写ImageSnapshot源

1 个答案: