Egret显示对象与显示容器

显示对象

1. 基本概念

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

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

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

2. 核心显示类

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

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

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


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

添加与显示对象

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

深度管理

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • 1.纹理集实际上就是将一些零碎的小图放到一张大图当中。游戏中也经常使用到纹理集。使用纹理集的好处很多,我们通过将大...
    别人家的程序员阅读 8,030评论 1 21
  • 我想,人人都会遇到过这样的事吧,当自己那样用心的对待一个人后来却换来因为一件鸡毛蒜皮的小事就轻易绝交,冷战到底的结...
    eve的秘密阅读 791评论 0 2
  • 我终于见到你了我在脑海里无数次想过我们相见时会是怎样我们遥遥相望我注视着你的眼睛微笑着却不说话还是我扔掉手上的行李...
    诗人阿秀阅读 534评论 0 0
  • 永远不要做自己都看不起自己的事。自己都看不起自己,更不用说别人。
    一抹涓流阅读 101评论 0 0