Can I set text on a flex Graphics object ?

Question

Is there anyway I can effectively call the equiv. of setText on a Flex Graphics object ?

Specifically I'm using a custom cell renderer to display data in a datagrid. The renderer uses the Graphics object to set the background colour of only a portion of the cell (say the left half) based upon the underlying data. I would like to be able to have text over only that portion of the cell which has the background colour (eg centred within the left half).

I know all the widths (of both the cell itself and the graphics object) but I don't know how I can set text (centred) over the graphics object.

Anyone got any ideas pls? Tks vm

Answer 1

The short answer is that you can't draw text programmatically with a Graphics object. What you'll need to do is create one of the Text-like classes (e.g. Label, Text, etc.) and position that appropriately within your cell renderer.

Assuming that you're doing your custom painting in updateDisplayList, you'd want to do something like the following:

override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
    super.updateDisplayList( unscaledWidth, unscaledHeight );

    // perform all your custom painting

    var label:Label = new Label();
    label.text = "Some text";

    label.width = widthOfCustomPainting;
    // can also set x- and y-coordinates of label too

    label.setStyle( "textAlign", "center" );

    this.addChild( label );
}

This will need some tweaking based on how your item renderer is set up, but it should pretty much be what you need.

Note that my code above does not use best practices for custom item renderers. It would be worthwhile to take a look at this excellent blog post which describes how to properly create item renderers.

Answer 2

Polygonal labs comes up with a solution that convert the font to vector curves so that you can draw the text as graphics. See it here. The code has not been published, but you can see some similar projects in the comments.

But you will need to do it in AS instead of MXML or you write you own class for that.

Answer 3

Here's a solution that avoids adding UI components:

    private function WriteText(text:String, rect:Rectangle):void
    {
        var uit:UITextField = new UITextField();
        uit.text = text;
        uit.width = rect.width;
        var textBitmapData:BitmapData = ImageSnapshot.captureBitmapData(uit);
        var matrix:Matrix = new Matrix();
        var x:int = rect.x;
        var y:int = rect.y;
        matrix.tx = x;
        matrix.ty = y;
        graphics.beginBitmapFill(textBitmapData,matrix,false);
        graphics.drawRect(x,y,uit.measuredWidth,uit.measuredHeight);
        graphics.endFill();
    }

The idea is to use the UITextField to create a bitmap, that can be used with the graphics object to fill a rectangle.

This is based on a blog post by Olga Korokhina at Adobe Developer Connection.

Answer 4

Well, i m using this too but i want to change the color, fontfamilt and size of text file before setting bitmapdata and i want to see the exact same fontfamily size and color on bitmap data. IHow can i do that ? Thank you.