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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
Javascript设计模式之原型模式详细
Oct 05 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
php.ini中文版
2006/10/09 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
js分页代码分享
2014/04/28 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
环保专项行动方案
2014/05/12 职场文书
医学专业大学生求职信
2014/07/12 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
详解mysql三值逻辑与NULL
2021/05/19 MySQL
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python