Question

在组件中，我在PIXI.js中设置了didInsertElement画布元素。后来当我转换到另一条路线时，Ember抛出了这个错误：

Uncaught TypeError: view.renderer.willDestroyElement is not a function(…)

新路由似乎已加载，因为model和setupController挂钩被调用，并且网址将更改为新路由。但是仍然加载了前一个组件，而新的路由DOM元素则没有。另外值得注意的是，willDestroyElement不会从旧组件调用。

我正在使用“ember-cli”：“2.9.1”，

更新了代码段：

{{game-puzzle gameType='puzzle'}}

在组件中：

didInsertElement() { 
    const $gameCanvas =  $('#game-canvas').get(0);

    this.set('$gameCanvas', $gameCanvas);

    this.setupCanvas();
    this.setupHud();
    this.setupPiecesArray();
    this.loadImages();
},

setupCanvas() {
    console.log('@setupCanvas');

    const width = this.get('screenPixelWidth');
    const height = this.get('screenPixelHeight');
    const $gameCanvas = this.get('$gameCanvas');

    // Use autoDetectRenderer to choose the best available renderer
    // either: WebGL or canvas
    let renderer = PIXI.autoDetectRenderer(width, height, {
      view: $gameCanvas,
      backgroundColor: 0x000000
    });

    let stage = new PIXI.Container();
    let container = new PIXI.Container();

    this.set('renderer', renderer);
    this.set('stage', stage);
    this.set('container', container);
  },

还有gameLoop方法使用requestAnimationFrame进行更新和渲染......但我不认为它们会对此有所帮助。

问题似乎只有在画布初始化时才会发生，在画布设置中，转换到路径很好。但显然这没有好处！这让我想到它与PIXI画布设置有关。

Answer 1

好的，在羞耻时间抱头......

经过一番激烈的调试后，我意识到将Pixi.canvasRenderer命名为renderer时发生了冲突。

这与Ember Container渲染器（renderer._dom）冲突。

通过Pixi或Phaser中的纯粹惯例（看作Phaser使用Pixi作为其渲染引擎），您将canvasRenderer存储在renderer变量中。

通过将renderer更改为canvasRenderer，错误当然会消失。

const canvasRenderer = PIXI.autoDetectRenderer(width, height, {
   view: $gameCanvas,
   backgroundColor: 0xffffff
});

从组件转换到另一个路径时，Ember view.renderer.willDestroyElement不是函数

1 个答案: