2020欧洲杯冠军竞猜官方网站Egret显示对象与呈现

时间:2019-07-25 17:45来源:2020欧洲杯冠军竞猜官方网站
显示对象和显示列表 Egret引擎开发指南之视觉编程,egret引擎指南视觉 显示对象和显示列表 “显示对象”,准确的含义是可以在舞台上显示的对象。可以显示的对象,既包括可以直接看

显示对象和显示列表

Egret引擎开发指南之视觉编程,egret引擎指南视觉

显示对象和显示列表

“显示对象”,准确的含义是可以在舞台上显示的对象。可以显示的对象,既包括可以直接看见的图形、文字、视频、图片等,也包括不能看见但真实存在的显示对象容器。

在Egret中,视觉图形都是由显示对象和显示对象容器组成的。

2020欧洲杯冠军竞猜官方网站 1

如果我们要表达上图中的场景,我们应该如何通过树的方式来描述呢?

显示对象等级结构

在Egret中,显示对象被分为两大类:一种是可以包括其他显示对象的显示对象容器,简称为“容器”。另外一种是单纯的显示对象,除自身以外不能包括其他显示对象,简称“非容器对象”。

在实际的操作中,我们可以把这样一种结构看成一个树状结构,容器可理解为树枝,非容器对象则可以理解为树叶。

2020欧洲杯冠军竞猜官方网站 2

在这个树状结构中,处于最上层的,就是“舞台”。对应到程序中,我们可以看到一个 stage 对象。舞台是Egret显示架构中最根本的显示容器。每个Egret应用有且只有一个stage对象。舞台是这个显示树结构的根节点。

在舞台中,我们还拥有一个主容器。这个容器就是文档类所创建的容器。每一个Egret都会拥有一个文档类,这个文档类必须是一个显示对象容器。

在这个场景中,我们包含了一个场景背景,而背景是由背景图和一颗大树组成的。另外两个元素是由人物和一个草地组成的。

显示列表

上面我们所看到的树状显示对象结构图实际上就是Egret的“显示列表”。

使用显示列表管理容器和非容器对象是非常方便的,当某一个显示对象处在在显示列表中,我们就可以在画面中看到该对象。当我们将显示对象从显示列表中移除后,该对象则从画面中消失。

在Egret内部维护着一个显示列表,开发者无需关心该列表是如何运行的,你只需要对自己的显示对象进行相应的操作即可。

显示对象种类

Egret在架构设计过程中围绕显示列表的概念,对所有对象进行了严格的封装。在Egret中,所有的显示对象均继承自 DisplayObject 这个类。DisplayObject 类也就是我们前面描述的“显示对象”。在Egret中,所有的“容器”均继承自 DisplayObjectContainer

为了统一管理显示列表,所有显示对象都统一于DisplayObject类。所有的显示对象都继承自DisplayObject,而DisplayObject则继承自EventDispatcher。也就是说所有的显示对象均可以发送事件。

DisplayObjectContainer显示对象容器的父类也是DisplayObject。

2020欧洲杯冠军竞猜官方网站 3

我们在实际操作中把概念再次简化,可以归纳为两条规则:

直接继承自DisplayObject的类都属于非容器。继承自DisplayObjectContainer的类都属于容器。

显示对象

“显示对象”,准确的含义是可以在舞台上显示的对象。可以显示的对象,既包括可以直接看见的图形、文字、视频、图片等,也包括不能看见但真实存在的显示对象容器。

1. 基本概念

在Egret中,视觉图形都是由显示对象和显示对象容器组成的。

显示对象,是可以在舞台上显示的对象。既包括可以直接看见的图形、文字、视频、图片等,也包括不可见但真是存在的显示对象容器。

DisplayObject类是所有显示对象的父类,该类包含显示对象共有的属性与方法。

在Egret中,视觉图形都是由显示对象和显示对象容器组成的。

显示对象和显示列表 “显示对象”,准确的含义是可以在舞台上显示的对象。可以显示的...

2. 核心显示类

描述
DisplayObject 显示对象基类,所有显示对象均继承自此类。
DisplayObjectContainer 显示对象容器接口,所有显示对象容器均实现次接口
Bitmap 位图,用来显示图片
Shape 用来显示矢量图,可以用其中的方法绘制矢量图形
TextField 文本类
BitmapText 位图文本类
Sprite 带有矢量绘制功能的显示容器。
Stage 舞台类

2020欧洲杯冠军竞猜官方网站 4

3. 自定义显示对象类

自定义显示对象类需要继承DisplayObject的具体子类,例如ShapeTextFiled.
示例代码如下:

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);

编译运行后,在浏览器可以看到如下图形:

2020欧洲杯冠军竞猜官方网站 5

egret_shape.png

如果我们要表达上图中的场景,我们应该如何通过树的方式来描述呢?

显示容器

显示对象等级结构

1. 基本概念

所有的显示容器全部继承自DisplayObjectContainer类,该类继承自DisplayObject。也就是说,在Egret中,所有的容器都是继承自DisplayObject

在Egret中,DisplayObjectContainer已经封装了一些显示列表常用的功能,常用操作主要可以分为四类:

  • 添加、删除子对象
  • 访问子对象
  • 检测子对象
  • 设置叠放次序

在Egret中,显示对象被分为两大类:一种是可以包括其他显示对象的显示对象容器,简称为“容器”。另外一种是单纯的显示对象,除自身以外不能包括其他显示对象,简称“非容器对象”。

2. Sprite

在Egret中,Sprite是一个常用的容器。同时添加了Graphics功能。

在实际的操作中,我们可以把这样一种结构看成一个树状结构,容器可理解为树枝,非容器对象则可以理解为树叶。

3. 自定义容器

自定义容器,可编写一个类,继承DisplayObjectContainer。如果要同时实现Graphics绘图功能,可继承Sprite

2020欧洲杯冠军竞猜官方网站 6

显示列表

在Egret内部维护着一个显示列表,用来管理和组织容器和非容器对象,当某个显示对象处在显示列表中,就可以在画面中看到该对象。移除后便消失。

实际操作中,可以把显示列表当中树结构。

在树状结构中,有一个stage对象,处于最上层,树结构的根节点。每个Egret有且只有一个stage.

在舞台stage中,我们还拥有一个主容器。这个容器就是文档类所创建的容器。每一个Egret都会拥有一个文档类,这个文档类必须是一个显示对象容器。

2020欧洲杯冠军竞猜官方网站 7

egret_tree.png

在这个树状结构中,处于最上层的,就是“舞台”。对应到程序中,我们可以看到一个 stage 对象。舞台是Egret显示架构中最根本的显示容器。每个Egret应用有且只有一个stage对象。舞台是这个显示树结构的根节点。

添加与显示对象

  1. 添加多个容器的方式与添加一个容器的方式一样。
  2. 同一个显示对象无论被代码加入显示列表多少次,在屏幕上只绘制一次。
    如果一个显示对象A被添加到了容器B中,然后A又被添加到了容器C中。那个第二次执行 C.addChild(A) 的时候,A自动的从B容器中删除,然后添加到C容器中。
  3. 删除一个显示对象的时候,必须保证“显示对象”拥有父级。
    当显示对象不在容器对象之中,JavaScript控制台会报错:
    Uncaught Error: [Fatal]child未被addChild到该parent:
    为避免这个问题,移除前做一个判断
if(spr.parent){
  spr.parent.removeChild( spr );
}

在舞台中,我们还拥有一个主容器。这个容器就是文档类所创建的容器。每一个Egret都会拥有一个文档类,这个文档类必须是一个显示对象容器。

深度管理

每个容器都有深度管理功能,深度值实际上就是一个显示对象的叠放次序。也可称为 “z-次序”。

  1. Egret中容器的深度都是从0开始的,当第一个显示对象被添加到容器中时,它的深度值为0。这个显示对象处于容器的最底层。当添加第二个显示对象的时候,它的深度值为1,并且在第一个显示对象上方。如果两个显示对象发生了相交,那么可以从视觉上看到,第二个显示对象遮挡住第一个显示对象。

  2. 操作指定深度的对象
    容器.addChildAt( 显示对象, 深度值 )
    容器.removeChildAt( 深度值 )
    容器.swapChildren( 显示对象, 显示对象 )
    容器.swapChildrenAt( 深度值, 深度值 )

在这个场景中,我们包含了一个场景背景,而背景是由背景图和一颗大树组成的。另外两个元素是由人物和一个草地组成的。

显示列表

上面我们所看到的树状显示对象结构图实际上就是Egret的“显示列表”。

使用显示列表管理容器和非容器对象是非常方便的,当某一个显示对象处在在显示列表中,我们就可以在画面中看到该对象。当我们将显示对象从显示列表中移除后,该对象则从画面中消失。

在Egret内部维护着一个显示列表,开发者无需关心该列表是如何运行的,你只需要对自己的显示对象进行相应的操作即可。

显示对象种类

Egret在架构设计过程中围绕显示列表的概念,对所有对象进行了严格的封装。在Egret中,所有的显示对象均继承自 DisplayObject 这个类。DisplayObject 类也就是我们前面描述的“显示对象”。在Egret中,所有的“容器”均继承自 DisplayObjectContainer

为了统一管理显示列表,所有显示对象都统一于DisplayObject类。所有的显示对象都继承自DisplayObject,而DisplayObject则继承自EventDispatcher。也就是说所有的显示对象均可以发送事件。

DisplayObjectContainer显示对象容器的父类也是DisplayObject。

2020欧洲杯冠军竞猜官方网站 8

我们在实际操作中把概念再次简化,可以归纳为两条规则:

直接继承自DisplayObject的类都属于非容器。继承自DisplayObjectContainer的类都属于容器。

您可能感兴趣的文章:

  • Windows 系统下安装和部署Egret的开发环境
  • Mac OS X 系统下安装和部署Egret引擎开发环境
  • Egret引擎开发指南之创建项目
  • Egret引擎开发指南之编译项目
  • Egret引擎开发指南之运行项目
  • Egret引擎开发指南之发布项目

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:2020欧洲杯冠军竞猜官方网站Egret显示对象与呈现

关键词: 欧洲杯竞猜