Layabox 遮罩(Mask)

Layabox 教程

Layabox 基础

Layabox 2D进阶

Layabox IDE教程

Layabox 3D基础

Layabox 小游戏适配

Layabox Native原生

Layabox 常见问题

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

------------

####1.Layabox 遮罩API

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

![Layabox遮罩(Mask)](/static/img/1585497208008874200.png "Layabox遮罩(Mask)")

------------

####2.Layabox 遮罩实例

#####2.1 显示一张位图
创建一个MaskDemo.ts入口类，编写代码如下：

```javascript
// 程序入口
class MaskDemo{
    private Res:string;
    private img:Laya.Sprite;
    constructor()
    {
        Laya.init(1336,640);
        //设置舞台背景色
        Laya.stage.bgColor = "#ffffff";
        //资源路径
        this.Res = "res/img/monkey1.png";
        //先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
        Laya.loader.load(this.Res,Laya.Handler.create(this,this.graphicsImg));
    }
    private graphicsImg():void{
        this.img = new Laya.Sprite();
        //获取图片资源，绘制到画布
        this.img.graphics.drawTexture(Laya.loader.getRes(this.Res),150,50);
        //添加到舞台
        Laya.stage.addChild(this.img);
    }
}
new MaskDemo();
```

运行效果:

![Layabox遮罩(Mask)](/static/img/1585497296779951600.png "Layabox遮罩(Mask)")

#####2.2 创建一个圆形的遮罩区域

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

```javascript
// 程序入口
class MaskDemo{
    private Res:string;
    private img:Laya.Sprite;
    private cMask:Laya.Sprite;
    constructor()
    {
        Laya.init(1336,640);
        //设置舞台背景色
        Laya.stage.bgColor = "#ffffff";
        //资源路径
        this.Res = "res/img/monkey1.png";
        //先加载图片资源，在图片资源加载成功后，通过回调方法绘制图片并添加到舞台
        Laya.loader.load(this.Res,Laya.Handler.create(this,this.graphicsImg));
    }
    private graphicsImg():void{
        this.img = new Laya.Sprite();
        //获取图片资源，绘制到画布
        this.img.graphics.drawTexture(Laya.loader.getRes(this.Res),150,50);
        //添加到舞台
        Laya.stage.addChild(this.img);
        //创建遮罩对象
        this.cMask = new Laya.Sprite();
        //画一个圆形的遮罩区域
        this.cMask.graphics.drawCircle(80,80,50,"#ff0000");
        //圆形所在的位置坐标
        this.cMask.pos(120,50);
        //实现img显示对象的遮罩效果
        this.img.mask = this.cMask;
    }
}
new MaskDemo();
```

运行效果:

![Layabox遮罩(Mask)](/static/img/1585497349768982400.png "Layabox遮罩(Mask)")

####3.在编辑器中设置遮罩

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

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

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

![Layabox遮罩(Mask)](/static/img/1585497417884878400.png "Layabox遮罩(Mask)")

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

![Layabox遮罩(Mask)](/static/img/1585497433204754600.png "Layabox遮罩(Mask)")

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

![Layabox遮罩(Mask)](/static/img/1585497446946540600.png "Layabox遮罩(Mask)")

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

![Layabox遮罩(Mask)](/static/img/1585497459130237500.png "Layabox遮罩(Mask)")

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

![Layabox遮罩(Mask)](/static/img/1585497472395996200.png "Layabox遮罩(Mask)")

####4.应用编辑器设置的遮罩

在IDE界面按F12发布制作遮罩效果的UI页面，会在src/ui目录下生成UI类，如图9所示。

![Layabox遮罩(Mask)](/static/img/1585497511539235100.png "Layabox遮罩(Mask)")

编辑模式下按F9 设置引擎预览 ，启动场景为maskDemoUI。

![Layabox遮罩(Mask)](/static/img/1585497557517864900.png "Layabox遮罩(Mask)")

主类代码如下：

```javascript
import GameConfig from "./GameConfig";
import { ui } from "./ui/maskDemoUI";
class Main {
    constructor() {
        //根据IDE设置初始化引擎        
        if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
        else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
        Laya["Physics"] && Laya["Physics"].enable();
        Laya["DebugPanel"] && Laya["Physics"].enable();
        Laya.stage.scaleMode = GameConfig.scaleMode;
        Laya.stage.screenMode = GameConfig.screenMode;
        //打开调试面板（通过IDE设置调试模式，或者url地址增加debug=true参数，均可打开调试面板）
        if (GameConfig.debug || Laya.Utils.getQueryString("debug") == "true") Laya.enableDebugPanel();
        if (GameConfig.stat) Laya.Stat.show();
        Laya.alertGlobalError = true;
        //激活资源版本控制，version.json由IDE发布功能自动生成，如果没有也不影响后续流程
        Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this, this.onVersionLoaded), Laya.ResourceVersion.FILENAME_VERSION);
    }
    onVersionLoaded(): void {
        //激活大小图映射，加载小图的时候，如果发现小图在大图合集里面，则优先加载大图合集，而不是小图
        Laya.AtlasInfoManager.enable("fileconfig.json", Laya.Handler.create(this, this.onConfigLoaded));
    }
    onConfigLoaded(): void {
        //加载IDE指定的场景
        GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
    }
}
//激活启动类
new Main();
```

运行效果如图：

![Layabox遮罩(Mask)](/static/img/1585497588485636200.png "Layabox遮罩(Mask)")