显示对象
1. 基本概念
在Egret中，视觉图形都是由显示对象和显示对象容器组成的。
显示对象，是可以在舞台上显示的对象。既包括可以直接看见的图形、文字、视频、图片等，也包括不可见但真是存在的显示对象容器。
DisplayObject类是所有显示对象的父类，该类包含显示对象共有的属性与方法。
2. 核心显示类
| 类 | 描述 |
|---|---|
| DisplayObject | 显示对象基类，所有显示对象均继承自此类。 |
| DisplayObjectContainer | 显示对象容器接口，所有显示对象容器均实现次接口 |
| Bitmap | 位图，用来显示图片 |
| Shape | 用来显示矢量图，可以用其中的方法绘制矢量图形 |
| TextField | 文本类 |
| BitmapText | 位图文本类 |
| Sprite | 带有矢量绘制功能的显示容器。 |
| Stage | 舞台类 |
3. 自定义显示对象类
自定义显示对象类需要继承DisplayObject的具体子类，例如Shape或TextFiled.
示例代码如下：
class MyRoundRect extends egret.Shape {
constructor(argument) {
super();
this.drawRoundRect();
}
private drawRoundRect(){
this.graphics.beginFill(0xff00ff);
this.graphics.drawRoundRect(200,200,100,100,20,20);
this.graphics.endFill();
}
}
let grid = new MyRoundRect(this);
this.addChild(grid);
编译运行后，在浏览器可以看到如下图形：
egret_shape.png
显示容器
1. 基本概念
所有的显示容器全部继承自DisplayObjectContainer类，该类继承自DisplayObject。也就是说，在Egret中，所有的容器都是继承自DisplayObject。
在Egret中，DisplayObjectContainer已经封装了一些显示列表常用的功能，常用操作主要可以分为四类：
- 添加、删除子对象
- 访问子对象
- 检测子对象
- 设置叠放次序
2. Sprite
在Egret中，Sprite是一个常用的容器。同时添加了Graphics功能。
3. 自定义容器
自定义容器，可编写一个类，继承DisplayObjectContainer。如果要同时实现Graphics绘图功能，可继承Sprite。
显示列表
在Egret内部维护着一个显示列表，用来管理和组织容器和非容器对象，当某个显示对象处在显示列表中，就可以在画面中看到该对象。移除后便消失。
实际操作中，可以把显示列表当中树结构。
在树状结构中，有一个stage对象，处于最上层，树结构的根节点。每个Egret有且只有一个stage.
在舞台stage中，我们还拥有一个主容器。这个容器就是文档类所创建的容器。每一个Egret都会拥有一个文档类，这个文档类必须是一个显示对象容器。
egret_tree.png
添加与显示对象
- 添加多个容器的方式与添加一个容器的方式一样。
- 同一个显示对象无论被代码加入显示列表多少次，在屏幕上只绘制一次。
如果一个显示对象A被添加到了容器B中，然后A又被添加到了容器C中。那个第二次执行 C.addChild(A) 的时候，A自动的从B容器中删除，然后添加到C容器中。 - 删除一个显示对象的时候，必须保证“显示对象”拥有父级。
当显示对象不在容器对象之中，JavaScript控制台会报错：
Uncaught Error: [Fatal]child未被addChild到该parent:
为避免这个问题，移除前做一个判断
if(spr.parent){
spr.parent.removeChild( spr );
}
深度管理
每个容器都有深度管理功能，深度值实际上就是一个显示对象的叠放次序。也可称为 “z-次序”。
-
Egret中容器的深度都是从0开始的，当第一个显示对象被添加到容器中时，它的深度值为0。这个显示对象处于容器的最底层。当添加第二个显示对象的时候，它的深度值为1，并且在第一个显示对象上方。如果两个显示对象发生了相交，那么可以从视觉上看到，第二个显示对象遮挡住第一个显示对象。
-
操作指定深度的对象
容器.addChildAt( 显示对象, 深度值 )
容器.removeChildAt( 深度值 )
容器.swapChildren( 显示对象, 显示对象 )
容器.swapChildrenAt( 深度值, 深度值 )
网友评论