PIXI V5 PIXI.Loader() 无法添加到图像容器

Question

我使用的是 PIXI V5，但无法添加到图像容器中...

const app = new PIXI.Application({
  view: document.getElementById('main'),
});

const container = new PIXI.Container();
app.stage.addChild(container);


const loader = new PIXI.Loader();
loader
  .add('imgtest','https://fakeimg.pl/100/')
  .load((loader, resources) => {
    const sprite = new PIXI.Sprite(loader.resources.imgtest.texture);
    container.addChild(sprite);
  });

我试试 console.log(loader.resources.imgtest.texture) 未定义...

Answer 1

加载的纹理在最初渲染舞台时不可用，因此添加： const renderer = PIXI.autoDetectRenderer(); 并在图像加载后调用 renderer.render(container);。

顺便说一句，您可以使用 new PIXI.Sprite(resources.imgtest.texture)，省略 loader.

此外，我不确定生成的没有 .png 或 jpg 扩展名的图像是否可以通过 pixi 工作。

Answer 2

Pixi v5 不使用与以前版本相同的 api，它们在应用程序 class 中已经有一个加载器，您可以使用 PIXI.Loader.shared 访问它。您可以将它分配给一个变量，但我只是在我的应用程序中使用以下内容：

PIXI.Loader.shared
    .add('myImage', 'assets/myImage.png')
    .load((loader, resources) => {
        const sprite = new PIXI.Sprite(resources.myImage.texture);
        container.addChild(sprite);
 });

使用此语法，您可以将图像映射到作为第一个参数提供的 ID。

PIXI V5 PIXI.Loader() 无法添加到图像容器

PIXI V5 PIXI.Loader() Can't not add to image container

pixi.js