Using ColorMatrixFilter with HDividedBox in Flex

Question

I want to use a ColorMatrixFilter with a HDividedBox element so that the left and right boxes make the chart black & white, but leave the center section in color.

It seems like the filter would have to be on the AreaChart instead of the HDividedBox, but I was wondering if there is a way to setup the canvases to mask the content behind them.

My current code looks as follows; the grey filter has no effect.

<mx:HDividedBox id="dividedBox" horizontalScrollPolicy="off"
        width="100%" height="100%" 
        liveDragging="true" >
    <mx:Canvas id="leftBox" backgroundColor="#FFFFFF" 
            backgroundAlpha="0.5" width="50%" 
            height="100%" />
    <mx:Canvas backgroundColor="#FFFFFF" backgroundAlpha="0" 
            width="50%" height="100%" buttonMode="true"   
            mouseDown="setMouseDown(rangeChart);" 
            minWidth="{rangeDataRatio * 4}"
 mouseUp="showAnnotations = true; refreshAnnotations()"/>
<mx:Canvas id="rightBox" backgroundColor="#FFFFFF" 
 backgroundAlpha="0.5" width="0%" height="100%"
 filters="{[greyFilter]}" />
</mx:HDividedBox>

The filter code is as follows:

var greyMatrix:Array = [ 
    1,1,1,0,0,
    1,1,1,0,0,
    1,1,1,0,0,
    0,0,0,1,0 ];

var greyFilter:ColorMatrixFilter = 
    new ColorMatrixFilter(greyMatrix);

Answer 1

Filters are applied only to the contents of the object they are applied to. So, if you have something inside rightBox canvas, then it should be seen with the filter applied. But if the object is not a child of this canvas, it won't have the filter applied.

You can try using BitmapData object and its draw method to capture the image below the canvas and apply the filter to the resulting Bitmap.