Soliant Consulting | Custom Software Consulting, Development, and Programming

Masking an Image in Flex

Recently I needed to apply rounded corners to all Images in my application.
What I needed to do was add a rounded mask to the image – I did this, but
then found I needed to ensure that the mask was applied to the actual image
content, not just the Image component itself. Here’s how I did it:

1) Extend the Image component.

	import mx.controls.Image;
	import mx.core.UIComponent;

	public class SuperImage extends Image
	{

		protected var _roundedMask:UIComponent;
		protected var _cornerRad:int;

Note the addition of a UIComponent Object above – this is the mask that we will apply to the image.

2) Add a setter function for the corner radius.

public function set cornerRadius(radius:int):void
{
	_cornerRad = radius;
}

3) Override “createChildren”

override protected function createChildren():void
{
	super.createChildren();
	_roundedMask = new UIComponent();
	addChild(_roundedMask);

}

Of course, simply adding this mask won’t work – we need to actually draw it and style it.
We also need to position it correctly. This is done below.

4) Override updateDisplayList

override protected function updateDisplayList (unscaledWidth : Number, unscaledHeight : Number) : void
        {
            super.updateDisplayList (unscaledWidth, unscaledHeight);
            //if the image is present, add the mask
            if ( content != null ) {
            	//work out x and y co-ords for the mask
            	var maskX:Number = 0;
            	var maskY:Number = 0;

            	var vertAlign:String = this.getStyle("verticalAlign");
            	var horiAlign:String = this.getStyle("horizontalAlign");

            	if ( vertAlign == "top")
            		maskY = 0;
            	else if ( vertAlign == "middle")
            		maskY = (this.height - this.contentHeight)/2;
            	else if ( vertAlign == "bottom")
            		maskY = (this.height - this.contentHeight);

            	if ( horiAlign == "left")
            		maskX = 0;
            	else if ( horiAlign == "center")
            		maskX = (this.width - this.contentWidth)/2;
            	else if ( horiAlign == "right")
            		maskX = (this.width - this.contentWidth);

            	//add the mask
				_roundedMask.graphics.clear();
				_roundedMask.graphics.beginFill(0x000000);
				_roundedMask.graphics.drawRoundRectComplex(maskX, maskY, this.contentWidth, this.contentHeight, _cornerRad, _cornerRad, _cornerRad, _cornerRad);
				_roundedMask.graphics.endFill();

				this.mask = _roundedMask;
            }

        }

To use the SuperImage component, just include it like this:

	<mx:HBox  borderStyle="solid" height="202" width="202" >
		<local:SuperImage source="@Embed('180px-Damavand_in_winter.jpg')" verticalAlign="bottom" height="200" width="200" cornerRadius="10" scaleContent="false"/>
	</mx:HBox>

Here’s the finished product:
Images showing different alignments