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

Posted 2023-02-16

【中文标题】Flex：将未实现的 UIComponent 渲染到 BitmapData？

【英文标题】：Flex: Render an unrealized UIComponent to BitmapData?

【发布时间】：2010-11-21 18:44:39

【问题描述】：

渲染到尚未添加到舞台的UIComponent 的最佳方式是什么？ （我使用 UIComponents 作为对象的渲染器，并且想要渲染新副本以进行图像导出、过滤等）

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

将组件添加到Application.application，使用 BitmapData.draw() 渲染，移除组件。这与我看到的打印未实现组件的做法类似。

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

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

有没有更好的办法？

【问题讨论】：

为什么需要 UIComponent？您需要 UI 交互吗？如果你只需要它在上面画一些东西，就用 Sprite，它更轻。

【参考方案1】：

我很确定您可以在 BitmapData 中使用 draw() 方法，而无需将组件放在 DisplayList 上。

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

【讨论】：

你可以，但是由于 UIComponent 是未实现的，它还没有把自己布置好。所以，作为一个例子，它的高度和宽度都是 0。

哦，是的！我记得一些关于与父母一起测量的组件，绘制孩子，无效等。有一段时间没有使用 flex。你不能创建组件，将它添加到显示列表中，但将可见设置为 false 并继续绘制吗？

【参考方案2】：

UIComponent 的很多布局都可以与它的上下文相关联。对于它的许多衍生产品（例如 HBox）来说尤其如此，因为布局的流动性与其父级的大小和共享其父级空间的兄弟姐妹的数量有关。

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

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

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

【参考方案3】：

我过去成功使用的方法如下：

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

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

【讨论】：

请注意，您可能希望研究 PurePDF 来生成客户端而不是服务器，但这取决于您在做什么。很棒的图书馆！

【参考方案4】：

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

createChildren()。 提交属性（）。 updateDisplayList(). bmd.draw().

前 2 步不是 100% 必要的，你可以将所有代码放入 updateDisplayList() 中。因为是手动调用的，所以不用担心会被Flex框架多次调用。