Monthly Archive for June, 2009

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.