带有背景图像的 PixiJs 遮罩过滤器
PixiJs mask filter with background image
我怎样才能在这个网站上创建效果(工作链接)
我正在尝试实现此示例,但无法使用其他图像更改黑色背景。
https://pixijs.io/examples/#/masks/filter.js
拜托,帮帮我!
const app = new PIXI.Application();
document.body.appendChild(app.view);
// Inner radius of the circle
const radius = 100;
// The blur amount
const blurSize = 12;
app.loader.add('grass', 'https://images.prismic.io/monopolondon/abb53b73-caae-41d2-9031-f889aa27780d_onefinestay_thumb.jpeg?auto=compress,format&rect=0,0,1200,1436&w=600&h=718');
app.loader.load(setup);
function setup(loader, resources) {
const background = new PIXI.Sprite(resources.grass.texture);
app.stage.addChild(background);
background.width = app.screen.width;
background.height = app.screen.height;
const circle = new PIXI.Graphics()
.beginFill(0xFF0000)
.drawCircle(radius + blurSize, radius + blurSize, radius)
.endFill();
circle.filters = [new PIXI.filters.BlurFilter(blurSize)];
const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds);
const focus = new PIXI.Sprite(texture);
console.log(texture);
app.stage.addChild(focus);
background.mask = focus;
app.stage.interactive = true;
app.stage.on('mousemove', pointerMove);
function pointerMove(event) {
focus.position.x = event.data.global.x - focus.width / 2;
focus.position.y = event.data.global.y - focus.height / 2;
}
}
尝试简单地在舞台上添加一些其他 Sprite - 在添加草之前 - 像这样:
- 查看
some_bg
的用法
const app = new PIXI.Application();
document.body.appendChild(app.view);
// Inner radius of the circle
const radius = 100;
// The blur amount
const blurSize = 32;
app.loader.add('grass', 'examples/assets/bg_grass.jpg');
app.loader.add('some_bg', 'examples/assets/bg_plane.jpg');
app.loader.load(setup);
function setup(loader, resources) {
const some_bg = new PIXI.Sprite(resources.some_bg.texture);
some_bg.width = app.screen.width;
some_bg.height = app.screen.height;
app.stage.addChild(some_bg);
console.log(some_bg);
const background = new PIXI.Sprite(resources.grass.texture);
app.stage.addChild(background);
background.width = app.screen.width;
background.height = app.screen.height;
const circle = new PIXI.Graphics()
.beginFill(0xFFFFFF)
.drawCircle(radius + blurSize, radius + blurSize, radius)
.endFill();
circle.filters = [new PIXI.filters.BlurFilter(blurSize)];
const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds);
const focus = new PIXI.Sprite(texture);
app.stage.addChild(focus);
background.mask = focus;
app.stage.interactive = true;
app.stage.on('mousemove', pointerMove);
function pointerMove(event) {
focus.position.x = event.data.global.x - focus.width / 2;
focus.position.y = event.data.global.y - focus.height / 2;
}
}
我怎样才能在这个网站上创建效果(工作链接)
我正在尝试实现此示例,但无法使用其他图像更改黑色背景。
https://pixijs.io/examples/#/masks/filter.js
拜托,帮帮我!
const app = new PIXI.Application();
document.body.appendChild(app.view);
// Inner radius of the circle
const radius = 100;
// The blur amount
const blurSize = 12;
app.loader.add('grass', 'https://images.prismic.io/monopolondon/abb53b73-caae-41d2-9031-f889aa27780d_onefinestay_thumb.jpeg?auto=compress,format&rect=0,0,1200,1436&w=600&h=718');
app.loader.load(setup);
function setup(loader, resources) {
const background = new PIXI.Sprite(resources.grass.texture);
app.stage.addChild(background);
background.width = app.screen.width;
background.height = app.screen.height;
const circle = new PIXI.Graphics()
.beginFill(0xFF0000)
.drawCircle(radius + blurSize, radius + blurSize, radius)
.endFill();
circle.filters = [new PIXI.filters.BlurFilter(blurSize)];
const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds);
const focus = new PIXI.Sprite(texture);
console.log(texture);
app.stage.addChild(focus);
background.mask = focus;
app.stage.interactive = true;
app.stage.on('mousemove', pointerMove);
function pointerMove(event) {
focus.position.x = event.data.global.x - focus.width / 2;
focus.position.y = event.data.global.y - focus.height / 2;
}
}
尝试简单地在舞台上添加一些其他 Sprite - 在添加草之前 - 像这样:
- 查看
some_bg
的用法
const app = new PIXI.Application();
document.body.appendChild(app.view);
// Inner radius of the circle
const radius = 100;
// The blur amount
const blurSize = 32;
app.loader.add('grass', 'examples/assets/bg_grass.jpg');
app.loader.add('some_bg', 'examples/assets/bg_plane.jpg');
app.loader.load(setup);
function setup(loader, resources) {
const some_bg = new PIXI.Sprite(resources.some_bg.texture);
some_bg.width = app.screen.width;
some_bg.height = app.screen.height;
app.stage.addChild(some_bg);
console.log(some_bg);
const background = new PIXI.Sprite(resources.grass.texture);
app.stage.addChild(background);
background.width = app.screen.width;
background.height = app.screen.height;
const circle = new PIXI.Graphics()
.beginFill(0xFFFFFF)
.drawCircle(radius + blurSize, radius + blurSize, radius)
.endFill();
circle.filters = [new PIXI.filters.BlurFilter(blurSize)];
const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds);
const focus = new PIXI.Sprite(texture);
app.stage.addChild(focus);
background.mask = focus;
app.stage.interactive = true;
app.stage.on('mousemove', pointerMove);
function pointerMove(event) {
focus.position.x = event.data.global.x - focus.width / 2;
focus.position.y = event.data.global.y - focus.height / 2;
}
}