Question

我正在尝试使用React挂载/取消使用Pixi舞台（我不想使用react-pixi）

重新安装组件时出错：

Uncaught Error: Resource with name "cupCake.png" already exists
i.add.i.enqueueapp.js
componentDidMountmodules.js
_assign.notifyAllmodules.js
ON_DOM_READY_QUEUEING.closemodules.js
Mixin.closeAllmodules.js
Mixin.performmodules.js
Mixin.performmodules.js
_assign.performmodules.js
flushBatchedUpdatesmodules.js
Mixin.closeAllmodules.js
Mixin.performmodules.js
ReactDefaultBatchingStrategy.batchedUpdatesmodules.js
batchedUpdatesmodules.js
ReactEventListener.dispatchEvent

我尝试使用：PIXI.TextureCache['cupCake.png'].destroy(true);，但错误仍然存在。

这是我的组件：

class MapOverlay extends React.Component{

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.renderer = PIXI.autoDetectRenderer(256, 256, {transparent: true});
    this.refs.gameCanvas.appendChild(this.renderer.view);

    // create the root of the scene graph
    this.stage = new PIXI.Container();
    this.stage.width = 1366;
    this.stage.height = 768;

    PIXI.loader
      .add("cupCake.png")
      .load(()=> {

        //Create the `cat` sprite from the texture
        var cat = new PIXI.Sprite(
          PIXI.loader.resources["cupCake.png"].texture
        );

        //Add the cat to the stage
        this.stage.addChild(cat);

        //Render the stage
        this.renderer.render(this.stage);
      });
  }

  componentWillUnmount() {
    this.refs.gameCanvas.removeChild(this.renderer.view);
    PIXI.TextureCache['cupCake.png'].destroy(true);
  }

  render() {
    return (
      <div className="game-canvas-container" ref="gameCanvas"></div>
    );
  }
}

那我怎么能完全重置/删除状态和资产呢？

Answer 1

答案是使用最新的PIXI v4版本

删除纹理的最佳方法是调用

this.stage.destroy(true);
this.stage = null;

这将破坏舞台及其所有儿童，以及任何儿童正在使用的任何纹理。

完成后

this.refs.gameCanvas.removeChild(this.renderer.view);

添加行

this.renderer.destroy( true );
this.renderer = null;

如何彻底删除Pixi渲染器，舞台和资产？

1 个答案: