Rounded Image _图像处理中the rounded image-CSDN博客

本文介绍了一种在Flex中创建带有圆角效果的图片组件的方法。通过继承Image组件并使用mask来实现圆角效果，作者提供了详细的源代码及参数设置说明。

Usage:

<RoundedImage source="someImage.jpg" width="250" height="250" cornerRadius="15"/>

Source:

package com.brian
{
	import mx.controls.Image;
	import mx.core.UIComponent;
	
	/**
	 * Rounded Image
	 * 
	 * Extended Image component to allow rounded corners by using a mask
	 * 
	 * @author Brian Raymes
	 */
	public class RoundedImage extends Image
	{
		protected var roundedMask:UIComponent;
		protected var cornerRad:int;
		
		public function RoundedImage()
		{
			super();
		}
		
		public function get cornerRadius():int
		{
			return cornerRad;
		}
		
		public function set cornerRadius(radius:int):void
		{
			cornerRad = radius;
		}
		
		override protected function createChildren():void
		{
			super.createChildren();
			
			this.roundedMask = new UIComponent();
			this.addChild(roundedMask);
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			roundedMask.graphics.clear();
			roundedMask.graphics.beginFill(0x000000);
			roundedMask.graphics.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight, cornerRad, cornerRad, cornerRad, cornerRad);
			roundedMask.graphics.endFill();
			
			this.mask = roundedMask;
		}
	}
}