Question

I wanted to e to replace the standard flex bar chart bars with my own image. This worked by embedding the image and setting as a bitmapfill. however these images dont scale well even tho i have applied 9 slice scaling when embedding.

[Embed source="bar.png", scaleGridRight="721", scaleGridLeft="15", scaleGridTop="1",
scaleGridBottom="90")]

[Bindable]

public var bar:Class;

and when applying

var x:BitmapFill = new BitmapFill();

x.source = bar;

series1.setStyle("fill", x);

The 9 slice scaling options are ignored. I dont know how to resolve this.

One thing to note when applying the same embedded image to a standard image container, it respects the scaling options.

Answer 1

scale9Grid does not work when bitmap is used in Graphics.beginBitmapFill() method.

One of solutions is to create a BitmapFill subclass that will work with that. Here is the FXP with solution and here is how it works:

<s:Application ...>

    <fx:Script>
    <![CDATA[

        [Bindable]
        [Embed(source="sample.png", scaleGridTop="30", scaleGridLeft="7", 
            scaleGridRight="384", scaleGridBottom="206")]
        private var sample:Class;

    ]]>
    </fx:Script>

    <s:Group left="0" right="0" top="0" bottom="0">
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:fill>
                <local:BitmapFillScale9Grid source="{sample}"/>
            </s:fill>
        </s:Rect>
    </s:Group>

</s:Application>

Solution is based on bent.googlecode.com.