javascript - How to apply mask in pixijs container that will not show it's color at page refresh? - Stack Overflow

admin管理员组

文章数量:1387454

I'm using the code below to apply a mask in a container, but after I click the refresh button on page (chrome) the pixi stage bees pletely white until the refresh pletes. Do you know how to fix that?

            let mask = new PIXI.Sprite(PIXI.Texture.WHITE);
            mask.x = maskX;
            mask.y = maskY;
            mask.width = maskWidth;
            mask.height = maskHeight;
            container.addChild(mask);
            container.mask = mask;

I'm using the code below to apply a mask in a container, but after I click the refresh button on page (chrome) the pixi stage bees pletely white until the refresh pletes. Do you know how to fix that?

            let mask = new PIXI.Sprite(PIXI.Texture.WHITE);
            mask.x = maskX;
            mask.y = maskY;
            mask.width = maskWidth;
            mask.height = maskHeight;
            container.addChild(mask);
            container.mask = mask;

• javascript
• html
• google-chrome
• pixi.js

Share Improve this question Follow asked Sep 17, 2020 at 22:13 MrNobodyMrNobody 6922 silver badges1010 bronze badges 2

• By "click the refresh button" you mean "reload page in browser" (aka: F5)? What is the expected effect which you want to achieve? – domis86 Commented Sep 20, 2020 at 20:49
• yes F5, I don't expect an effect at all, I just don't want to appear the white color of the mask on front of canvas – MrNobody Commented Sep 21, 2020 at 16:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The mask shouldn't be a child of the container. You're creating a sprite, adding it as a visible child, and then using the sprite's boundary rectangle as a mask.

Remove the addChild() call, and it will mask properly, but in addition, you should set the container mast to a PIXI.Rectangle instead of a sprite, if all you're doing is masking a rectangular area.

I know it is late, but this can do the trick

const app = new PIXI.Application({ antialias: true, backgroundColor : 0x1099bb });
document.body.appendChild(app.view);

let square = new PIXI.Graphics();
square.beginFill(0x660000);
square.drawRect(0, 0, 200, 150);
square.endFill();
app.stage.addChild(square);


let circle = new PIXI.Graphics();
circle.lineStyle(0); 
circle.beginFill(0x66ffcc, 1);
circle.drawCircle(90, 75, 70);
circle.endFill();
app.stage.addChild(circle);

square.mask = transparentmask(circle);

function transparentmask(circle){
//fresh white sprite
let sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
sprite.tint = 0xffffff;
sprite.x = 0;
sprite.y = 0;
sprite.width = 200;
sprite.height = 150;
//this will do the trick
sprite.blendMode = PIXI.BLEND_MODES.SRC_IN;
  
let originalContainer = new PIXI.Container();
originalContainer.addChild(circle);
originalContainer.addChild(sprite);
let genTexture = app.renderer.generateTexture(originalContainer);
return new PIXI.Sprite(genTexture);
}

<script src="https://cdnjs.cloudflare./ajax/libs/pixi.js/6.2.2/browser/pixi.js"></script>

本文标签：