PixiJS学习（7）遮罩

简介

遮罩的作用是指定一个显示对象的可见区域。

说单通俗易懂点就是：如果一个东西有遮罩的话，那么只有这个东西和遮罩相互重叠的部分是可见的，其余地方都不可见。

一定要注意：遮罩和遮挡是不一样的，前者是重叠部分可见，后者是重叠部分不可见。

遮罩一般分为两种：

①：几何体，可以是任意形状的几何体；

②：精灵，可以是一些有边缘纹理的 png 图片。

 

几何体遮罩：

说的简单一点，其实就是创建一个几何体。将这个几何体当作显示对像的遮罩，那么几何体画出的部分即为显示对象的可见区域。也可以这样说，构建一个自定义的几何体（无论它的轮廓是什么样的），显示对象就可以显示出这样的形状。

// 添加一张图片通过纹理,显示对象
this.imgBg = new PIXI.Sprite(this.bgTexture);

// 创建一个几何体图形,几何体遮罩，这是一个圆
this.graphics = new PIXI.Graphics();
this.graphics.beginFill(0x66CCFF);
this.graphics.drawCircle(300, 300, 150); //三个参数是x, y 和 radius。
this.graphics.endFill();

// 给背景图片添加遮罩
this.imgBg.mask = this.graphics;

this.frameStage.stage.addChild(this.imgBg);

精灵遮罩：

在表现形式上，其实他和几何体遮罩是一样的，都是遮罩的部分可以看见。但是由于有些精灵纹理本身的问题，可能在当作遮罩时会有一些影响，例如透明方面，颜色本身。。。而且精灵遮罩一般用的比较少，就算要用，遮罩纹理也会单独处理

// 添加一张图片通过纹理
this.imgBg = new PIXI.Sprite(this.bgTexture);
// 设置大小，将张图片设置为全屏大小
this.imgBg.scale.set(600 / 720);

// 创建一个精灵遮罩
this.maskImg = new PIXI.Sprite(this.maskTexture);

// 给背景图片添加遮罩
this.imgBg.mask = this.maskImg;

this.frameStage.stage.addChild(this.imgBg);


// 将这个遮罩也展示一下
this.maskImg2 = new PIXI.Sprite(this.maskTexture);
this.maskImg2.y = 600;

this.frameStage.stage.addChild(this.maskImg2);

注意事项：

• 遮罩本身的概念比较简单，但是大多数初学者都会将它理解的有问题。把遮罩当作遮挡，和原本的作用刚好相反
• 遮罩虽然比较简单，但是可以利用的点比较多，需要在学习过程中积累经验