如何使pixi-js掩码过滤器在移动视图中响应触摸，就像在桌面视图中响应指针移动一样

Question

我希望闪光灯效果跟随pixi-js 中的移动触摸事件

我正试图让pixijs掩膜过滤器响应闪光灯效果跟随鼠标指针，所以我需要让它跟随触摸事件。这是效果的链接https://pixijs.io/examples/#/masks/filter.js

const app = new PIXI.Application();
document.querySelector('#landing').appendChild(app.view);
// Inner radius of the circle
const radius = 90;
// The blur amount
const blurSize = 52;
app.loader.add('landing', './imgs/bg.png');
app.loader.load(setup);
function setup(loader, resources) {
const background = new PIXI.Sprite(resources.landing.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);
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;
}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>

Answer 1

移动事件系统与计算机事件系统有一些不同。鼠标事件的名称以"；鼠标"；但移动活动的名字以"；触摸"；。因此，您应该更改"；鼠标移动"；至"；触摸移动"；适用于移动设备。如果你想同时使用手机和电脑，你应该同时写"；触摸移动"；以及"；鼠标移动"：

app.stage.on('mousemove', pointerMove);
app.stage.on('touchmove', pointerMove);