HTML5游戏引擎（六）-添加与删除显示对象——添加显示对象到显示列表-addChild & 删除显示对象-removeChild

HTML5游戏引擎（六）-添加与删除显示对象——添加显示对象到显示列表-addChild & 删除显示对象-removeChild

添加与删除显示对象

在Egret中建立显示对象和渲染显示对象是两个过程。建立显示对象后，对象会处于内存中，但不会参与渲染过程，只有把显示对象放到显示列表后，显示对象才会参与渲染过程。如果想将某个显示对象从渲染过程中删除，只需要将其移除显示列表即可。

添加显示对象到显示列表

当创建一个显示对象后，就可以将其添加到显示列表中，首先绘制一个Sprite，这个Sprite是一个宽高为100的绿色正方形。

var spr:egret.Sprite = new egret.Sprite();
spr.graphics.beginFill( 0x00ff00 );
spr.graphics.drawRect(0, 0, 100, 100);
spr.graphics.endFill();

上面的代码就是建立显示对象的过程，测试程序，在舞台中看不到任何内容。将 spr 添加到显示列表中，代码如下：

this.addChild( spr );

添加这句代码之后，再次编译运行程序，浏览器中看到效果如图：

代码中 addChild() 方法将 spr 添加到显示列表中。前面介绍过，显示列表是一个树状结构，这里 spr 的上一级就是 this，也就是文档类。文档类是 stage 舞台的第一个子对象。

下面是关于当前示例的层级示意图:

删除显示对象

使用 removeChild() 方法可删除显示对象，代码如下：

this.removeChild( spr );

执行删除操作与添加显示对象操作类似，将被删除的显示对象作为参数传递给 removeChild 方法。示例中 spr 就是被删除的显示对象，而 this 则是 spr 的父级。

注意

显示对象独立于显示列表

虽然显示对象在运行时会被高频率的添加到显示列表或从中删除，但显示对象独立于显示列表。简单解释：当创建一个显示对象Sprite时，该对象拥有自己的坐标属性，旋转角度属性等。这些属性都是显示对象独立拥有的。一旦该显示对象被添加到显示列表之中，Egret就会按照显示对象的状态进行显示。

当用户将显示对象从显示列表中移除后，这些状态依然存在。将一个显示对象移除显示列表后，该对象并非在内存中被销毁。只是不让显示对象参与渲染而已。

通过一段代码观察显示对象在容器中的操作与状态改变：

//创建了一个类型为Sprite的显示对象
var spr:egret.Sprite = new egret.Sprite();
spr.graphics.beginFill( 0x00ff00 );
spr.graphics.drawRect(0, 0, 100, 100);
spr.graphics.endFill();
//该对象存在，被添加到显示列表中，在画面中显示
this.addChild( spr );
//该对象存在，但已被移除显示列表，画面上不显示
this.removeChild( spr );
//该对象存在，驻于内存中