Skip to content

Creating an Image with Rounded Corners

Published on June 21, 2009 in ActionScript. 1 Comment

I recently wanted to round the corners on my images for my website, and the component I found on Flex Examples wasn’t doing the trick when I used it as an ItemRenderer for a TileList, where I was setting the maxWidth and maxHeight. After some toiling I tracked down the issue and produced this:

package com.bdement.components.images
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	import mx.controls.Image;
	import mx.events.ResizeEvent;
 
	public class RoundedCornerImage extends Image
	{		
		[Bindable] public var cornerRadius:uint = 10;
 
		private var roundedMask:Sprite;
 
		public function RoundedCornerImage()
		{
			super();
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
	    {   
	    	super.updateDisplayList(unscaledWidth, unscaledHeight);
 
	    	if(!roundedMask)
	    	{
	    		roundedMask = new Sprite();
	    		addChild(roundedMask);    
	    	}
 
	       	roundedMask.graphics.clear();
	        roundedMask.graphics.beginFill(0xFF0000);
	        roundedMask.graphics.drawRoundRect(0, 0,
	                    contentWidth, contentHeight,
	                    cornerRadius, cornerRadius);
	        roundedMask.graphics.endFill();
 
	        this.mask = roundedMask;
	    }
	}    
}

Works like a charm!

Side note: Did you know that rounded corners are easier for the eyes to perceive? This interesting article about the history of rounded corners makes mention of it.

Spread the love!

1 Responses to “Creating an Image with Rounded Corners”

Feed for this Entry Trackback Address

Will
November 5, 2009 at 9:32 am

One additional note would be to ensure that the “maintainAspectRatio” is set to false so that the rounded corners will show up if the height/width properties are set to something other than the original dimensions of the image (non-proportionate).

Leave a Reply