我正在使用Pixi.js创建具有置换效果的画布,在此之上我确实放置了一个蒙版,问题是效果应用于整个对象,这使得蒙版也具有置换效果。
是否还有其他方法可以应用蒙版,但仅在蒙版内部具有置换效果?
这是一个小提琴:
var width = window.innerWidth;
var height = window.innerHeight;
console.log(width)
console.log(height)
var playground = document.getElementById('px-render');
var canvas;
var ratio = 150 / 830;
var count = 0;
var raf;
var renderer = PIXI.autoDetectRenderer(width, height, { transparent: true });
renderer.autoResize = true;
var tp, preview;
var displacementSprite,
displacementFilter,
urlPicture,
container,
tp,
stage;
function setScene(){
playground.appendChild(renderer.view);
var myMask = new PIXI.Graphics();
myMask.beginFill();
myMask.drawCircle(0, 0, 300);
myMask.endFill();
stage = new PIXI.Container();
urlPicture = 'https://i.imgur.com/nLZui4s.jpg'
tp = PIXI.Texture.fromImage(urlPicture);
preview = new PIXI.Sprite(tp);
preview.anchor.x = 0;
// move the sprite to the center of the screen
myMask.x = renderer.screen.width / 2;
myMask.y = renderer.screen.height / 2;
var container = new PIXI.Container();
stage.addChild(container)
container.addChild(myMask)
container.mask = myMask
container.addChild(preview);
animate();
}
function removeScene(){
cancelAnimationFrame(raf);
stage.removeChildren();
stage.destroy(true);
playground.removeChild(canvas);
}
function animate() {
raf = requestAnimationFrame(animate);
displacementSprite = PIXI.Sprite.fromImage('https://res.cloudinary.com/dvxikybyi/image/upload/v1486634113/2yYayZk_vqsyzx.png');
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementSprite.scale.y = 1;
displacementSprite.scale.x = 5.6;
stage.addChild(displacementSprite);
displacementSprite.x = count*25;
displacementSprite.y = count*15;
count += 0.1;
stage.filters = [displacementFilter];
renderer.render(stage);
canvas = playground.querySelector('canvas');
}
setScene();