如何完全删除Pixi渲染器，舞台和资产

How to completely remove Pixi renderer, stage and assets?

本文关键字：舞台 何完全 删除 Pixi      更新时间：2023-09-26

我正在尝试用React安装/卸载Pixi stage(我不想使用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>
    );
  }
}

那么我如何才能完全重置/删除状态和资产呢?

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

删除纹理的最好方法是调用 
this.stage.destroy(true);
this.stage = null;

这将破坏舞台，它的所有子节点，以及它的任何子节点正在使用的任何纹理。

在做

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

添加

this.renderer.destroy( true );
this.renderer = null;
相关文章：