Flex：将未实现的UIComponent渲染为BitmapData？

Question

渲染到尚未添加到舞台的UIComponent的最佳方法是什么？ （我使用UIComponents作为对象的渲染器，并希望为图像导出，过滤等渲染新副本。）

到目前为止我见过/使用过的两种策略包括实现组件以确保它调用所有生命周期方法：

1. 将组件添加到Application.application，使用BitmapData.draw（）渲染，删除组件。这与我在打印未实现的组件时所做的类似。

2. 将组件添加到弹出窗口，使用BitmapData.draw（）渲染，在渲染完成后关闭弹出窗口。

我相信这两个都只是依赖于当前线程/事件正在执行时不刷新的UI，尽管（1）也可能依赖于在视图外实现的组件。

有更好的方法吗？

Answer 1

我过去使用的成功案例如下：

1. 创建组件的新实例
2. 为FlexEvent.CREATION_COMPLETE
添加事件侦听器
3. 在组件上设置visible = false
4. 将组件添加为主Application的子项
5. 创建组件时，将调用事件侦听器函数。其余的逻辑应该从事件监听器函数
中放入/调用
6. 删除您在步骤2中添加的事件侦听器。
7. 使用ImageSnapshot.captureImage（）或captureBitmapData（）捕获组件的可视化表示。
8. 从主应用程序中删除组件
9. 根据需要处理图像数据。

我用它来快照各种Flex图表组件，以便在服务器端生成的PDF中使用。获取BitmapData后，我使用PNGEncoder或JPEGEncoder类来压缩数据，然后在上传到服务器之前在Base64中对其进行编码。

Answer 2

我很确定你可以在BitmapData中使用draw（）方法而不需要在DisplayList上使用你的组件。

例如，当我需要修改使用Loader类加载的图像时使用它。在init处理程序中，我创建一个BitmapData实例并从loadInfo.content属性绘制Bitmap，然后copyPixels（）或我需要修改加载的图像

Answer 3

UIComponent的布局可以与它的上下文联系在一起。对于它的许多衍生产品（例如HBox）尤其如此，因为布局的流动性与其父母的大小以及共享其父母空间的兄弟姐妹的数量相关联。

此外，Flex可能是真正的痛苦，无法进行直观更新。通常关键的渲染函数不是同步完成的......有callLater，callLater2和其他hacky方法使得处理UIComponents的自动魔法布局属性成为一个主要问题。甚至不能调用validateNow或updateDisplayList可以保证当前帧的布局正确（而不是将来的几帧）。

我建议你能做的最好的事情是不要使用UIComponent 并尝试使用Sprite或其他。

您附加它但让它不可见的方法（alpha = 0，mouseEnabled = false，mouseChildren = false）是不错的。在确定正确布局之前，您应该先听取FlexEvent.CREATION_COMPLETE回调。然后你可以bitmapData.draw然后将它从舞台上移除。如果您必须使用UIComponents，那么我知道没有更好的方法。

Answer 4

您可以在使用BitmapData.draw（）之前手动调用生命周期函数。执行以下操作。

1. createChildren（）。
2. 的commitProperties（）。
3. 的updateDisplayList（）。
4. bmd.draw（）。

前两个步骤不是100％必需的，您可以将所有代码放入updateDisplayList（）。因为您手动调用该函数，所以您不必担心Flex框架会多次调用它。