I would like to use PIXI.Graphics to create circle and put it on a PIXI.Container.
I created a sprite which contains my background and thanks to background.mask, I would like to add circle to my container. I got no errors but when I display my canvas using app.view I got square instead of circle shape.
Dependencies :
"bootstrap": "^4.5.3",
"browserify": "^17.0.0",
"interactjs": "^1.10.0",
"jquery": "^3.5.1",
"jquery-ui": "^1.12.1",
"pixi-filters": "^3.1.1",
"pixi.js": "^5.3.3",
"watchify": "^3.11.1"
Node version : v10.19.0
Npm version : v6.14.4
I found this link : How to convert a graphic to a sprite in pixijs, that not worked for me.
The code bellow is inspired by pixijs doc : https://pixijs.io/examples/#/masks/filter.js
In this tuto, he used sprite and not container to make mask.
I show you my code
var PIXI = require('pixi.js')
$(function() {
const app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x000000,
resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);
// Inner radius of the circle
const radius = 100;
// The blur amount
const blurSize = 32;
const pathImg = "xxx";
app.loader.add('grass', pathImg);
app.loader.load(setup);
function setup(loader, resources) {
const background = new PIXI.Sprite(resources.grass.texture);
background.width = app.screen.width;
background.height = app.screen.height;
var cricle1 = createCircle(100, 100);
var cricle2 = createCircle(400, 400);
let containerBlur = new PIXI.Container();
containerBlur.addChild(cricle1);
containerBlur.addChild(cricle2);
app.stage.addChild(background);
app.stage.addChild(containerBlur);
background.mask = containerBlur;
}
function createCircle(x, y) {
var brushBlur = new PIXI.Graphics()
.beginFill(0xff0000, 1)
.drawCircle(radius + blurSize, radius + blurSize, radius)
.endFill();
brushBlur.filters = [new PIXI.filters.BlurFilter(blurSize)];
const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
var texture = app.renderer.generateTexture(brushBlur, PIXI.SCALE_MODES.NEAREST, 1, bounds);
var sprite = new PIXI.Sprite(texture);
sprite.position.x = x;
sprite.position.y = y;
return sprite;
}
})
canvas result :
Thank's in advance
