无法使用Angular2在画布上渲染Pixi.js Sprite

Question

我无法使用angular2和pixi.js。

下面的代码显示了我如何在Pixi容器中添加了两个矩形和两个精灵。当我渲染此容器（根据日志中包含4个孩子）时，只呈现矩形。

我尝试使用fromImage（）方法添加精灵并使用加载程序，这两种方法似乎都不起作用。

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.loaders.loader.loader.html"中的文档中的回调功能获取的引用。因此，加载程序和资源：设置（加载程序，资源）

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();
});