当前位置: > > > Flex4 - 对父对象设置滤镜而只允许部分子对象生效

Flex4 - 对父对象设置滤镜而只允许部分子对象生效

开发自定义组件的时候,通过在内部对滤镜的存储和重新设置,可以实现将组件外部设置的滤镜只对部分内部子对象起作用。

比如下图,一个组件内部有三个子容器,给这个组件设置阴影后只对后面两个子容器起作用。

--- 测试类 ---
<local:MyComponent  x="50" y="50" id="myComponent" filters="{[new DropShadowFilter()]}"/>

--- 组件类 MyComponent.as ---
package
{
	import mx.core.UIComponent;
	import spark.components.BorderContainer;

	public class MyComponent extends UIComponent
	{
		protected var _filters:Array; //滤镜
		
		public function MyComponent()
		{
			super();
		}
		
		override protected function createChildren():void{
			super.createChildren();
			createBox(0);
			createBox(150);
			createBox(300);
		}
		
		override protected function commitProperties():void{
			super.commitProperties();
			//存储父对象的滤镜,并将父对象的滤镜移除
			if (filters.length > 0){
				_filters = filters.slice();
			};
			this.filters = [];
			invalidateDisplayList();
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			//只对后两个子对象设置滤镜
			this.getChildAt(1).filters = this._filters;
			this.getChildAt(2).filters = this._filters;
		}
		
		private function createBox(x:int):void{
			var c:BorderContainer = new BorderContainer();
			c.x = x;
			c.width = c.height = 100;
			this.addChild(c);
		}

	}
}
评论0