Javascript 是否可以对带有遮罩的精灵应用模糊过滤器,但将模糊保留在遮罩形状中?
我正在使用Pixi绘制图像,然后对其应用视频alpha遮罩,如下所示:Javascript 是否可以对带有遮罩的精灵应用模糊过滤器,但将模糊保留在遮罩形状中?,javascript,pixi.js,Javascript,Pixi.js,我正在使用Pixi绘制图像,然后对其应用视频alpha遮罩,如下所示: var bg = PIXI.Sprite.fromImage(data.imageUrl); var texture = PIXI.Texture.fromVideo(data.maskUrl); bg.mask = mask; app.stage.addChild(mask, bg); 这很有效。然后我决定在某一点模糊图像,因此我研究了如何应用模糊,并得出以下代码: var blurFilter = new PIXI.
var bg = PIXI.Sprite.fromImage(data.imageUrl);
var texture = PIXI.Texture.fromVideo(data.maskUrl);
bg.mask = mask;
app.stage.addChild(mask, bg);
这很有效。然后我决定在某一点模糊图像,因此我研究了如何应用模糊,并得出以下代码:
var blurFilter = new PIXI.filters.BlurFilter();
bg.filters = [blurFilter];
blurFilter.blur = 10;
但是,这会产生一个意外的副作用,即使用遮罩模糊合成图像(换句话说,遮罩包括在模糊计算中,模糊会延伸到遮罩的边缘之外)
有没有办法模糊精灵图像,但保持遮罩清晰,掩盖模糊图像的结果?我最终发现我可以创建一个容器
PIXI.container
并将精灵添加到其中,但将遮罩应用到容器上。。然后应用于精灵的模糊是。。。包含
var container = new PIXI.Container;
container.addChild(bg);
container.mask = mask;