遮罩的效果以及在组件设计中的应用

试验目的：

1. 确定遮罩对显示对象的尺寸没有影响

2.  调查遮罩对层叠的多个对象的影响

实验一：

观察两个大小相同，位置有重叠的显示对象。黑色把红色对象遮住一半。

package {
	import flash.display.Sprite;
	
	public class test1 extends Sprite {
		
		public function test1() {
			//上层黑色对象
			var s:Sprite = new Sprite();
			s.graphics.beginFill(0x112233);
			s.graphics.drawRect( 0, 0, 100, 100);
			s.graphics.endFill();	
			
			//下层红色的对象
			var s1:Sprite = new Sprite();			
			s1.graphics.beginFill(0xff0000);
			s1.graphics.drawRect( 50, 0, 100, 100);
			s1.graphics.endFill();
			
			//先添加下层对象，然后添加上层对象，保证显示的层次关系
			addChild(s1);
			addChild(s);

			//显示上层对象的尺寸
			trace(s.width, s.height);
		}
	}
}

结果：

宽度=100

高度=100

试验二：

为上层黑色对象添加遮罩，黑色对象尺寸不变。但是只有遮罩定义的区域被显示出来。

且红色对象原来被遮住的一半也露出来了。

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;	
	public class test1 extends Sprite {
		
		public function test1() {
			//设置舞台与浏览器的相对位置
			stage.align = StageAlign.TOP_LEFT;
			//设置舞台是否随浏览器尺寸缩放：不缩放
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			//上层黑色对象
			var s:Sprite = new Sprite();
			s.graphics.beginFill(0x112233);
			s.graphics.drawRect( 0, 0, 100, 100);
			s.graphics.endFill();	
			
			//下层红色对象
			var s1:Sprite = new Sprite();			
			s1.graphics.beginFill(0xff0000);
			s1.graphics.drawRect( 50, 0, 100, 100);
			s1.graphics.endFill();
			
			//先添加下层对象，然后添加上层对象，保证显示的层次关系
			addChild(s1);
			addChild(s);

			//遮罩对象
			var s2:Sprite = new Sprite();
			s2.graphics.beginFill(0x112233);
			s2.graphics.drawRect( 0, 0, 30, 100);
			s2.graphics.endFill();	

			//为黑色对象添加遮罩
			s.mask = s2;
			
			//显示上层对象的尺寸
			trace(s.width, s.height);
		}
	}
}

结果：

宽度=100

高度=100

>>引申：

组件设计中，遮罩在哪里被被应用了呢？

比如List组件和Grid组件。

由于各个Item的尺寸都大于最外层组件，所以会出现滚动条。为屏蔽多出的部分，使用了遮罩。

由于遮罩的特性，使得多出的部分不会被显示，也不会影响周围的其他组件（不会覆盖其他组件）。