无法使用 Angular2 在画布上渲染 pixi.js 精灵答案

【问题标题】：Unable to render pixi.js sprite on canvas using Angular2无法使用 Angular2 在画布上渲染 pixi.js 精灵
【发布时间】：2018-02-24 19:19:30
【问题描述】：

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

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

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

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

为我做的。

【问题讨论】：

而是将您的解决方案作为答案发布。
如果你有一个图像数组要加载，这种调用loader的方法会导致多次渲染。

标签： angular typescript pixi.js

【解决方案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)

【讨论】：

您对无法加载的原因是正确的。我现在设法让它工作。感谢您的帮助！

【解决方案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();
});

【讨论】：