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控制div及网页相关属性的代码
Dec 19 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
PHP return语句的另一个作用
2014/07/30 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python删除特定文件的方法
2015/07/30 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python如何求解两数的最大公约数
2018/09/27 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python动态规划算法实例详解
2020/11/22 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
linux面试题参考答案(9)
2015/01/07 面试题
2015毕业生实习期工作总结
2015/04/09 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书