Generate a flex image from a hidden component

Question

Hi all, I'm trying to put an image, generated from some text, in a RichEditableText. Since it's a styled text, I thought about putting it another RichEditableText, style it, then print it to a Bitmap to use as source for InlineGraphicsElement.

I use the following code to do that

var txt:RichEditableText = new RichEditableText();
txt.text = name;
// Appliy given styles to the text flow of input rich editable text
createApplyNamedStyle(name, styles).call(null, txt.textFlow);
var bitmapData:BitmapData = new BitmapData(txt.width, txt.height);
bitmapData.draw(txt);
var bitmap:Bitmap = new Bitmap(bitmapData);

Unfortunatly, when called, it displays an error stack

ArgumentError: Error #2015: BitmapData non valide.
at flash.display::BitmapData()
at RichTextEditor/getTagImage()[E:\FlexWorkspace\Test\src\RichTextEditor.mxml:74]
at RichTextEditor/insertTag()[E:\FlexWorkspace\Test\src\RichTextEditor.mxml:154]

I suspect it is due to the fact that my RichEditableText, not being in visible component, is not laid out. How can I ensure it is properly laid out ?

And am i doing the right thing to transform my text into an image ?

Answer 1

You should trace txt.width and txt.height. They must be at least greater or equal to one. It does not matter if a DisplayObject is visible or not.

Answer 2

You're right; since the text is not on the display list, it is never validated and hence has 0 height and width.

A typical workaround is to add the item to the display list and then remove it immediatley. A little more discussion in this SO question.