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框架会多次调用它。