跳到主要内容

遮罩

遮罩裁切层级中的子元素，使其仅在遮罩内绘制。滚动视图用它隐藏视口之外的内容，也可用于圆形头像、舷窗和显露效果。

矩形遮罩裁切列表，圆形遮罩将方图裁切成头像，嵌套圆形和矩形仅显示重叠区；淡色部分表示被裁掉的内容

创建遮罩​

任意图像元素都可成为遮罩。启用 mask，将要裁切的元素放在其下：

const viewport = new pc.Entity('viewport');
viewport.addComponent('element', {
    type: pc.ELEMENTTYPE_IMAGE,
    anchor: [0.5, 0.5, 0.5, 0.5],
    pivot: [0.5, 0.5],
    width: 300,
    height: 200,
    mask: true
});
screen.addChild(viewport);

// A 400 × 400 image below the viewport is drawn only inside its 300 × 200 rectangle
const content = new pc.Entity('content');
content.addComponent('element', {
    type: pc.ELEMENTTYPE_IMAGE,
    anchor: [0.5, 0.5, 0.5, 0.5],
    pivot: [0.5, 0.5],
    width: 400,
    height: 400,
    color: new pc.Color(0.23, 0.55, 1)
});
viewport.addChild(content);

遮罩自身不显示，纹理和不透明度只决定子项在哪些位置显示，颜色不生效。需要背景时，可添加填满遮罩的图像作为第一个子项。

形状遮罩​

没有纹理或精灵时，遮罩就是元素矩形；有纹理时，则按纹理形状裁切，仅完全不透明像素处显示子项。半透明像素也会隐藏内容，因此遮罩边缘始终是硬边，使用柔边纹理会使实际遮罩略小。

同理，遮罩 opacity 必须保持为 1。小于 1 时，没有任何像素完全不透明，全部子项都会被隐藏。

嵌套遮罩​

遮罩可以位于另一遮罩下，子项仅显示在两者重叠范围内。因此嵌套滚动视图，或滚动列表中的圆形图标，都会同时受两层裁切。

遮罩与图层​

遮罩在绘制所属图层时通过模板缓冲区工作，因此遮罩与被裁切元素必须在同一图层。若子项移到另一图层，例如为获得深度而移到 World，则完全不会绘制。

画布默认具有模板缓冲区。如果自行创建图形设备时设置 stencil: false，遮罩将无法工作。

遮罩与输入​

遮罩同时裁切绘制和输入。元素仅在遮罩矩形内接收输入，因此滚出视口的列表部分不能点击。形状遮罩也只按矩形裁切输入，而非按纹理形状。

开销​

每个遮罩增加两次绘制调用：绘制子项前将形状写入模板缓冲区，绘制后清除。内部元素也会与外部元素分开批处理。应按需使用，例如滚动视口，而不是给每个面板都添加遮罩。

遮罩

另请参阅​