PIXIJS中设置为mask的Sprite无法移动与调整大小问题咨询

问题原因 #

作为遮罩的sprite未被添加到PIXI的显示渲染树中，PIXI不会对未加入显示树的对象做矩阵变换计算，你设置的坐标、缩放等属性不会生效，遮罩会默认使用原始(0,0)坐标和原始尺寸裁剪内容。

解决方法 #

方案1：遮罩坐标相对舞台计算

将遮罩精灵添加到舞台，同时可设置visible = false避免遮罩本身被渲染出来，调整大小直接修改宽高或缩放属性即可，修改后代码如下：

const app = new PIXI.Application({
    width: $(window).innerWidth(),
    height: $(window).innerHeight(),
    backgroundColor: 0x000000,
    antialias: true,
});

app.stage.hitArea = app.screen;
app.stage.interactive = true;
const rect = new PIXI.Graphics().beginFill(0xff0000,1).drawRect(0,0, 500, 500).endFill();
const sprite = PIXI.Sprite.from('Assets/UI/play.png');
sprite.x = 250;
sprite.y = 250;
// 调整遮罩大小示例
sprite.width = 200;
sprite.height = 200;
rect.mask = sprite;

app.stage.addChild(rect);
// 新增：将遮罩加入显示树
app.stage.addChild(sprite);
// 隐藏遮罩本身，不影响遮罩效果
sprite.visible = false;

方案2：遮罩坐标相对被遮罩对象计算

如果希望遮罩的坐标是相对于被遮罩的红色矩形计算，可以将遮罩精灵添加为rect的子元素，此时设置的sprite.x、sprite.y会以rect的左上角为原点计算：

// 前面代码保持不变
rect.mask = sprite;
// 将遮罩加入被遮罩对象的子级
rect.addChild(sprite);
sprite.visible = false;
app.stage.addChild(rect);

尺寸调整说明 #

遮罩的尺寸调整逻辑和普通显示对象完全一致，直接修改width/height属性，或者修改scale.x/scale.y缩放值都可生效。

内容的提问来源于stack exchange，提问作者kumomomo