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

Posted 2023-02-24

【中文标题】如何使 pixi js 掩码过滤器响应移动视图上的触摸，就像它在桌面视图中移动指针一样？

【英文标题】：how to make pixi js mask filter respond to touch on mobile view as it does to pointer move in desktop view?

【发布时间】：2021-05-01 13:53:59

【问题描述】：

I want the flash light effect to follow mobile touch events in 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>

【参考方案1】：

移动事件系统与计算机事件系统有一些区别。鼠标事件的名称以“mouse”开头，但移动事件的名称以“touch”开头。因此，您应该将移动设备的“mousemove”更改为“touchmove”。如果你想同时在手机和电脑上工作，你应该同时写“touchmove”和“mousemove”：

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