设置遮罩(AS3)

LayaAir的遮罩，可以设置一个对象(支持位图和矢量图)，然后根据对象形状进行遮罩显示。

一、遮罩API介绍

　　遮罩属性位于laya.display.Sprite API内，该属性的说明如图1所示：

（图1）

二、简单的遮罩示例

2.1 我们先用LayaAir引擎显示一张位图，代码如下：

1. package
2. {
3. import laya.display.Sprite;
4. import laya.resource.Texture;
5. import laya.utils.Handler;
7. public class MaskDemo
8. {
9. private var Res:String;
10. private var img:Sprite;
12. public function MaskDemo()
13. {
14. Laya.init(1136,640);
15. //设置舞台背景色
16. Laya.stage.bgColor = "#ffffff"
17. //资源路径
18. Res = "./res/img/monkey1.png";
20. //先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
21. Laya.loader.load(Res,Handler.create(this,graphicsImg));
22. }
24. private function graphicsImg():void
25. {
26. img = new Sprite();
27. //获取图片资源，绘制到画布
28. img.graphics.drawTexture(Laya.loader.getRes(Res),150,50);
30. //添加到舞台
31. Laya.stage.addChild(img);
32. }
33. }
34. }

运行效果如图2所示：

（图2）

2.2 创建一个圆形的遮罩区域，通过mask属性，即可实现遮罩效果。继续看代码和注释，我们将2.1示例代码修改为如下代码：

1. package
2. {
3. import laya.display.Sprite;
4. import laya.resource.Texture;
5. import laya.utils.Handler;
7. public class MaskDemo
8. {
9. private var Res:String;
10. private var img:Sprite;
12. public function MaskDemo()
13. {
14. Laya.init(1136,640);
15. //设置舞台背景色
16. Laya.stage.bgColor = "#ffffff"
17. //资源路径
18. Res = "./res/img/monkey1.png";
20. //先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
21. Laya.loader.load(Res,Handler.create(this,graphicsImg));
22. }
24. private function graphicsImg():void
25. {
26. img = new Sprite();
27. //获取图片资源，绘制到画布
28. img.graphics.drawTexture(Laya.loader.getRes(Res),150,50);
30. //添加到舞台
31. Laya.stage.addChild(img);
34. //创建遮罩对象
35. var cMask:Sprite = new Sprite();
36. //画一个圆形的遮罩区域
37. cMask.graphics.drawCircle(80,80,50,"#ff0000");
38. //圆形所在的位置坐标
39. cMask.pos(120,50);
41. //实现img显示对象的遮罩效果
42. img.mask = cMask;
44. }
45. }
46. }

运行效果如图3所示：

 
（图3）

通过对比代码我们发现，实现遮罩很简单，把创建的显示对象cMask作为遮罩对象赋值给img对象的mask属性，即实现了img显示对象的遮罩效果。

三、在LayaAirIDE中设置遮罩

除了直接在代码中设置遮罩，也可以通过LayaAirIDE方便的给对象设置遮罩。下面我们跟着引导按步骤操作。

步骤一：创建一个UI页面maskDemo.ui，导入资源。(本步骤不了解的请去IDE章节查看UI创建及资源导入相关文档)

步骤二：在资源面板拖入一个Image组件到场景编辑区，如图4所示

 
（图4）

步骤三：双击进入Image组件内部，然后再到组件面板拖入一个Sprite组件，如图5所示。

 
（图5）

步骤四：选中Sprite组件，在右侧属性面板中，将公用属性renderType设置为mask，如图6所示。

 
（图6）

步骤五：双击进入Sprite组件内部，然后再到组件面板拖入一个Graphics圆形组件，调整好位置和大小。层级关系如图7所示。

 
（图7）

步骤六：连续双击编辑区的空白区域退出Image组件内部，即可看到遮罩的效果，如图8所示。

 
(图8)

四、在项目中应用LayaAirIDE设置的遮罩

4.1 发布UI

　　在IDE界面按F12发布制作遮罩效果的UI页面，会在src/ui目录下生成UI类，以及bin/h5/res/atlas目录下的图集文件，如图9所示。

 
（图9）

4.2 使用IDE生成的类与图集，实现遮罩效果

　　创建一个入口类Main.as，编码如下：

1. package
2. {
3. import laya.net.Loader;
4. import laya.utils.Handler;
5. import ui.maskDemoUI;
7. public class Main
8. {
9. public function Main()
10. {
11. //初始化舞台
12. Laya.init(1136,640);
13. //设置舞台背景色
14. Laya.stage.bgColor = "#ffffff"
16. //加载图集资源，加载成功后添加到舞台
17. Laya.loader.load([{url:"./res/atlas/ui.json",type:Loader.ATLAS}],Handler.create(this,onLoaded));
19. }
21. private function onLoaded():void
22. {
23. var cMask:maskDemoUI = new maskDemoUI();
24. Laya.stage.addChild(cMask);
25. }
26. }
27. }

运行效果如图10所示，我们很快捷的实现了遮罩的效果。

 
(图10)