BitmapData.draw with spark.components.Label

Question

I'm having trouble drawing a Label component to a BitmapData object. No matter what I try, the label never shows up. Everything works fine if I simply add the Label to the display list, but for performance reasons, that is not an option. I'm not having any trouble drawing other kinds of things ( vector art ) to BitmapData, but this Label is really throwing me for a loop.

I've had this problem with both the spark.components.Label and mx.controls.Label. I feel like this should work, since both of these classes extend UIComponent, which implements IBitmapDrawable, but I'm not super familiar with the Flex framework, so maybe I'm missing out on something. Anyone have any ideas?

I'll share the relevant Actionscript and CSS I'm using.

AS:

    _label = new Label();
    _label.styleName = "categoryButton";
    _label.width = 500;
    _label.height = 40;
    _label.text = "LABEL TEXT";

    var bd:BitmapData = new BitmapData( 500, 500, true, 0 );
    bd.draw( _label );
    _labelBitmap = new Bitmap( bd );    

    addChild( _labelBitmap );

CSS:

    @font-face {
        src: url("assets/HelveticaNeueLTStd-Roman.otf");
        fontFamily: "HelveticaNeueLT-Roman";
        fontStyle: normal;
        fontWeight: normal;
        unicode-range: U+0020-U+0040, /* Punctuation, Numbers */
            U+0041-U+005A, /* Upper-Case A-Z */
            U+005B-U+0060, /* Punctuation and Symbols */
            U+0061-U+007A, /* Lower-Case a-z */
            U+007B-U+007E; /* Punctuation and Symbols */
        advancedAntiAliasing: true;
        embedAsCFF: true;
    }

    s|Label.categoryButton {
        fontFamily: "HelveticaNeueLT-Roman";
        font-size:30;
        fontStyle:normal;
        textAlign:center;
        color:#cc0000;
    }

score 2 · Answer 1 · answered Aug 12 '11 at 15:29

2

What's now showing up when you draw it, the label entirely, or just the text? If you set a background on the label, will that show up?

I'm not 100% sure, but I think Flex works on the principle of invalidation. When you change something (which might change multiple times during initialisation for example) it just sets a flag that the component needs to be redraw in the next frame. Try waiting a frame or two before drawing it.

If that fails, seeing as you just want an image of the text, use a TextField instead, which should be more immediate (set autoSize to TextFieldAutoSize.LEFT and you should have the same behaviour as your label)

answered Aug 12 '11 at 15:29

divillysausages

7,883
3
25
39

1

Invalidation won't happen unless you add the object to the display list or at least set its width and height and call validateNow() – Amy Blankenship Aug 12 '11 at 15:41
I've set the backgroundColor property in the style to #000000, and still nothing is showing up. I've also tried adding it to the display list, waiting ten frames, then drawing it and removing it from the stage and it is still not working. I'll try the validateNow() – ModernCarpentry Aug 12 '11 at 15:41
1

I don't agree with your suggestion to skip some frames: that's just arbitrary waiting and hoping the component will be fully drawn in the meantime. If you have a slow CPU and/or a lot of other stuff going on at the same time, this will fail. You should listen for FlexEvent.CREATION_COMPLETE instead; that's the only way to be 100% sure. – RIAstar Aug 12 '11 at 16:55

RIAstar · Accepted Answer · 2011-08-12T17:03:30.613

As you suspected, this has everything to do with the Flex component lifecycle. Have a look at the source code of UIComponent:

mx_internal function childAdded(child:DisplayObject):void {
    ...
    UIComponent(child).initialize();
    ...
}

This method is called after a child component was added to the parent component and thus to the displaylist. As you can see, only then will the child component be initialized. This means nothing will be drawn until the component is added to the displaylist.

Now you might think: "OK, lets just call initialize() explicitly then." That won't work either. Have a look at the function that initiates the rendering:

public function validateDisplayList():void
{        
    if (invalidateDisplayListFlag)
    {
        var sm:ISystemManager = parent as ISystemManager;

It refers to the parent DisplayObject, which is null since the component wasn't added to the displaylist. And there are other things after that that will fail because the component wasn't properly created. The Flex framework will never call this method as long as the component isn't on the displaylist and if you call it explicitly, you will get runtime errors.

Conclusion: if you want to draw Flex components as a bitmap, you'll have to add them to the displaylist. Or do as @divillysausages suggested and use the pure ActionScript alternative.

To be certain that the component was added to the displaylist and fully rendered, you should listen for the FlexEvent.CREATION_COMPLETE event (I reckon the suggestion to skip some frames is bad practice; see comments below).

var label:Label = new Label();
label.text = "hello";
label.addEventListener(FlexEvent.CREATION_COMPLETE, nowDrawTheBitmap);
addElement(label);

I finally got this working. I was trying this before - adding the label to the display list, drawing it, then removing it. The problem was that the parent had not been added to the stage yet either. Skipping a frame, then drawing seems to have solved it. — ModernCarpentry, Aug 12 '11 at 16:25
You'd better just listen for FlexEvent.CREATION_COMPLETE. By skipping a frame you can't be 100% sure the component is ready. — RIAstar, Aug 12 '11 at 16:48
That's a good suggestion, RIAstar, I wasn't thinking the frame skip thing was a very clean way to deal with this. Good to know about the CREATION_COMPLETE event. I just tested it out and it looks like it is working — thanks! — ModernCarpentry, Aug 14 '11 at 13:59

BitmapData.draw with spark.components.Label

2 Answers2