Question

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

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

我尝试使用fromImage（）方法添加Sprite，并使用Loader，这两种方法似乎都不起作用。

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

在我看来，你正在呼唤＆＃34; this.setup（）＆＃34;立刻，没有实际等待它加载。

所以这里： 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在画布上渲染pixi.js精灵

编辑：解决了

2 个答案: