R – set text on a flex Graphics object

apache-flexdatagridgraphics

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

Best Answer

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.

Related Solutions

Styling both foreground and background selection color in a Flex list/datagrid

Flex 3 used textRollOverColor and textSelectedColor but Flex 4 components does not support them anymore.

The following example demonstrates all this + adding support for this colors for spark List:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        global
        {
            textRollOverColor: yellow;
            textSelectedColor: green;
        }

    </fx:Style>

    <fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        private function getListDataProvider():ArrayCollection
        {
            return new ArrayCollection([ "Item 1", "Item 2", "Item 3"]);
        }

        private function getGridDataProvider():ArrayCollection
        {
            return new ArrayCollection([ { name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" } ]);
        }

    ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>

    <s:List dataProvider="{getListDataProvider()}"/>

    <s:List dataProvider="{getListDataProvider()}" itemRenderer="ColoredItemRenderer"/>

    <mx:List dataProvider="{getListDataProvider()}"/>

    <mx:DataGrid dataProvider="{getGridDataProvider()}"/>

</s:Application>

ColoredItemRenderer:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    autoDrawBackground="true">

    <fx:Script>
    <![CDATA[

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

            var color:uint;
            if (selected)
                color = getStyle("textSelectedColor");
            else if (hovered)
                color = getStyle("textRollOverColor");
            else
                color = getStyle("color");
            sparkLabel.setStyle("color", color);
        }

    ]]>
    </fx:Script>

    <s:Label id="sparkLabel" text="{data}"/>

</s:ItemRenderer>

Best Answer

Related Solutions

Styling both foreground and background selection color in a Flex list/datagrid

Related Topic