无法使用 Angular2 在 canvas 上渲染 pixi.js 精灵

Question

我无法使用 Angular2 和 pixi.js 在 canvas 上渲染 Sprite。

下面的代码展示了我如何将两个矩形和两个精灵添加到 Pixi 容器中。当我渲染这个容器（根据日志，它包含 4 个子容器）时，只渲染矩形。

我尝试使用 fromImage() 方法和加载程序添加 Sprites，这两种方法似乎都不起作用。

ngAfterViewInit() {
    this.renderer = PIXI.autoDetectRenderer(333, 333, {
      antialias: false,
      resolution: 1,
      preserveDrawingBuffer: true,
      backgroundColor: 0xFFFFFF
    }, false);

    this.cc.nativeElement.appendChild(this.renderer.view);    
    this.renderer.view.style.border = "1px dashed blue";

    this.container = new PIXI.Container();

    let graphics = new PIXI.Graphics();
    graphics.beginFill(0xFFFF00);
    graphics.lineStyle(5, 0xFF0000);
    graphics.drawRect(0, 0, 300, 200);

    let graphics2 = new PIXI.Graphics();
    graphics.beginFill(0xFF0000);
    graphics.lineStyle(5, 0xFF0000);
    graphics.drawRect(0, 0, 100, 100);

    let texture = new PIXI.Texture.fromImage('../../../assets/artwork/art.png');
    let sprite = new PIXI.Sprite(texture);
    sprite.x = 50;
    sprite.y = 50;
    sprite.width = 100;
    sprite.height = 100;
    sprite.visible = true;

    this.container.addChild(graphics);
    this.container.addChild(graphics2);
    this.container.addChild(sprite);
    PIXI.loader.reset();
    PIXI.loader.add('art','../../../assets/artwork/art.png').load(this.setup());
  }

  setup(): void {
    var art = new PIXI.Sprite(PIXI.loader.resources.art.texture);
    this.container.addChild(art);
    this.renderer.render(this.container);
    console.log(this.container);
  }

编辑：已解决

在用户 Hachi 的帮助下，我设法解决了我的问题：替换

PIXI.loader.add('art','../../../assets/artwork/art.png').load(this.setup());

和

PIXI.loader.add('art', '../../../assets/artwork/art.png').load();
PIXI.loader.onLoad.add(() => {
      this.setup();
});

为我做的。

Answer 1

据我所知，您正在立即调用 "this.setup()"，实际上并未等待它加载。

所以在这里： PIXI.loader.add('art','../../../assets/artwork/art8.png').load(this.setup()); .load 期望回调函数，但实际上您是在该特定行上立即执行该函数，因为那里有括号。所以将其更改为： PIXI.loader.add('art','../../../assets/artwork/art8.png').load(this.setup.bind(this)); （我认为它需要绑定）

您还可以使用回调函数获取的引用，如文档中所述：http://pixijs.download/dev/docs/PIXI.loaders.Loader.html。所以加载器和资源：setup(loader, resources)

Answer 2

您可以使用回调来轻松加载，因为在加载发生之前调用 this.setup() 将运行。所以我们会得到类似引用未找到或未定义的错误。

PIXI.loader.add('art','../../../assets/artwork/art8.png').load(()=>this.setup());

虽然如果您要加载一组图像，此方法可能会导致双重渲染。

PIXI.loader.add('art', '../../../assets/artwork/art.png').load();
PIXI.loader.onLoad.add(() => {
      this.setup();
});

无法使用 Angular2 在 canvas 上渲染 pixi.js 精灵

Unable to render pixi.js sprite on canvas using Angular2

typescript

pixi.js

angular

编辑：已解决