Pixi.js применяет эффект смещения к изображению внутри маски, а не для маскировки - PullRequest
Новая
       22

Pixi.js применяет эффект смещения к изображению внутри маски, а не для маскировки

0 голосов
/ 15 октября 2018

Я использую 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/

...