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


Posted in Javascript onSeptember 03, 2014

显示对象和显示列表

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

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

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

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

显示对象等级结构

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

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

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

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

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

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

显示列表

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

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

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

显示对象种类

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

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

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

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

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

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

Javascript 相关文章推荐
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
Egret引擎开发指南之发布项目
Sep 03 #Javascript
Egret引擎开发指南之运行项目
Sep 03 #Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 #Javascript
Egret引擎开发指南之编译项目
Sep 03 #Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 #Javascript
Egret引擎开发指南之创建项目
Sep 03 #Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
如何使用Strace调试工具
2013/06/03 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
event.srcElement+表格应用
2006/08/29 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
深入了解js原型模式
2019/05/30 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
对Python 语音识别框架详解
2018/12/24 Python
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
文明寄语大全
2014/04/11 职场文书
亚运会口号
2014/06/20 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS