Mask 遮罩组件

Mask 用于规定子节点可渲染的范围，默认带有 Mask 组件的节点会使用该节点的约束框 （也就是 属性检查器 中 Node 组件的 ContentSize 规定的范围）创建一个矩形渲染遮罩 该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染。

创建

(1)先创建 Mask 组件

(2)再创建一个 Sprite 组件或者 Label 组件作为子节点

注意

1. 注意该组件不能添加到有其他渲染组件（如 Sprite、Label 等）的节点上。
2. 只能作为父节点

Mask 属性

属性	说明
Type	遮罩类型。包括 RECT、ELLIPSE、GRAPHICS_STENCIL、SPRITE_STENCIL 四种类型。
Segments	椭圆遮罩的曲线细分数，只在遮罩类型设为 ELLIPSE 时生效
Inverted	反向遮罩

Type

(1)RECT

矩形遮罩，默认类型。

(2)ELLIPSE

椭圆遮罩，Segments 属性控制椭圆的细分数。

可以在运行时通过代码设置：

const mask = this.getComponent(Mask);
mask.type = Mask.Type.ELLIPSE;
mask.segments = 32;

(3)GRAPHICS_STENCIL

图形遮罩，需要先创建一个 Sprite 组件，将 Sprite 组件的纹理设置为需要遮罩的图形，然后将 Sprite 组件添加到 Mask 组件下，Sprite 组件的纹理就会作为遮罩。

可以在运行时通过代码设置：

const g = this.mask.node.getComponent(Graphics);
//const g = this.mask.graphics;
g.lineWidth = 10;
g.fillColor.fromHEX("#ff0000");
g.moveTo(-40, 0);
g.lineTo(0, -80);
g.lineTo(40, 0);
g.lineTo(0, 80);
g.close();
g.stroke();
g.fill();

(4)SPRITE_STENCIL(省事)

自定义图片遮罩

可以在运行时通过代码设置：

const mask = this.getComponent(Mask);
mask.type = Mask.Type.SPRITE_STENCIL;
const sprite = this.getComponent(Sprite);
sprite.spriteFrame = this.stencilSprite;
mask.alphaThreshold = 0.1;

注意

注意

1. 节点添加了 Mask 组件之后，所有在该节点下的子节点，在渲染的时候都会受 Mask 影响。

2. GRAPHICS_STENCIL 类型在这里没有做任何引擎需要的事，只是放开了对 graphics 操控，用户可以使用 mask 组件里的 graphics 属性来绘制自定义图形，但是节点的点击事件还是根据节点的尺寸来计算。

3. SPRITE_STENCIL 类型默认需要一个图片资源，如果没有设置的话，相当于没有遮罩。