javascript - 如何应用 PIXI.js v5 BulgePinchFilter

Question

我是 PIXI.js 新手，我想使用 @pixi/filter-filters 提供的过滤器 (BulgePinchFilter) 之一。 如果我是正确的，我可以将这些过滤器应用于任何 DisplayObject，但在我的示例中它不起作用。

index.html

<main>
    <div id="myCanvas"></div>
</main>

这是我编写的 app.js 文件

import * as PIXI from "pixi.js";
import { BulgePinchFilter } from 'pixi-filters';
import {Container} from 'pixi.js';


    let app = new PIXI.Application({width: 200, height: 200, transparent:true }),
          container = document.getElementById('myCanvas');

    container.appendChild(app.view);

    const texture = new PIXI.Texture.from(image);
    const bg = PIXI.Sprite.from(texture);
    let appContainer = new Container();

    bg.width = app.screen.width ;
    bg.height = app.screen.height ;

    let x = 40,
        y = 40;

    const myFilter = new BulgePinchFilter([x,y], 20, 0.5);

    appContainer.filters = [ new BulgePinchFilter([app.screen.width/2 ,app.screen.height/2 ], 500, 0.5) ];

    appContainer.addChild(bg);

    app.stage.addChild(appContainer);

现在我只能看到渲染的图像，但看不到任何凸起效果。

Answer 1

我的错。在我的示例中，X 和 Y 坐标很糟糕。 这些坐标的最小值为 0，1 为最大值。

所以如果我想要过滤器位于中心:

let x = 0.5,
    y = 0.5;

const myFilter = new BulgePinchFilter([x,y], 20, 0.5);