Pixi.js将置换效果应用于蒙版内部的图片,而不是蒙版自身

时间:2018-10-15 12:29:40

标签: javascript mask pixi.js

我正在使用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();

https://jsfiddle.net/philtone/cmbheosr/

0 个答案:

没有答案