首页 > 代码库 > Erget 显示对象
Erget 显示对象
核心显示类：
| 类 | 描述 |
|---|---|
| DisplayObject | 显示对象基类，所有显示对象均继承自此类 |
| Bitmap | 位图，用来显示图片 |
| Shape | 用来显示矢量图，可以使用其中的方法绘制矢量图形 |
| TextField | 文本类 |
| BitmapText | 位图文本类 |
| DisplayObjectContainer | 显示对象容器接口，所有显示对象容器均实现此接口 |
| Sprite：DisplayObjectContainer | 带有矢量绘制功能的显示容器 |
| Stage：DisplayObjectContainer | 舞台类 |
根节点：
Egret 的教程说 “每个Egret应用有且只有一个stage对象”，直接看 Egret 的 Player 播放器代码：
p.init = function (container, options) { var option = this.readOption(container, options); var stage = new egret.Stage(); stage.$screen = this; stage.$scaleMode = option.scaleMode; stage.$orientation = option.orientation; stage.$maxTouches = option.maxTouches; stage.frameRate = option.frameRate; stage.textureScaleFactor = option.textureScaleFactor; var buffer = new egret.sys.RenderBuffer(undefined, undefined, true); var canvas = buffer.surface; this.attachCanvas(container, canvas); var webTouch = new web.WebTouchHandler(stage, canvas); var player = new egret.sys.Player(buffer, stage, option.entryClassName); var webHide = new egret.web.WebHideHandler(stage); var webInput = new web.HTMLInput(); player.showPaintRect(option.showPaintRect); if (option.showFPS || option.showLog) { player.displayFPS(option.showFPS, option.showLog, option.logFilter, option.fpsStyles); } this.playerOption = option; this.container = container; this.canvas = canvas; this.stage = stage; this.player = player; this.webTouchHandler = webTouch; this.webInput = webInput; this.webHide = webHide; egret.web.$cacheTextAdapter(webInput, stage, container, canvas); this.updateScreenSize(); this.updateMaxTouches(); player.start();
p.initialize = function () { var rootClass; if (this.entryClassName) { rootClass = egret.getDefinitionByName(this.entryClassName); } if (rootClass) { var rootContainer = new rootClass(); this.root = rootContainer; if (rootContainer instanceof egret.DisplayObject) { this.stage.addChild(rootContainer); } else { DEBUG && egret.$error(1002, this.entryClassName); } } else { DEBUG && egret.$error(1001, this.entryClassName); }
可以清楚地看到，egret 将 Main 这个 DisplayObjectContainer 作为了播放器的 rootContainer，并在初始化时就为 Main.stage 创建了舞台对象。
显示对象的基本概念：
- 坐标：x, y
- 缩放比例：scaleX, scaleY
- 透明通道：alpha
- 旋转操作：rotation
- 设置锚点：anchorOffsetX, anchorOffsetY
- 斜切：skewX, skewY
显示容器：
可以包含多个 DisplayObject。
private createGameScene():void { console.log(this.stage.stageWidth); console.log(this.stage.stageHeight); console.log("Runtime start."); var testCGrid = new MyGrid(); testCGrid.drawGrid(); this.addChild(testCGrid); var testContainer = new MyContainer(); testContainer.drawGrid(); this.addChild(testContainer); console.log("Runtime end."); }}class MyGrid extends egret.Shape{ public constructor() { super(); this.drawGrid(); } public drawGrid() { this.graphics.beginFill(0x0000ff); this.graphics.drawRect(0,0,50,50); this.graphics.endFill(); this.graphics.beginFill(0x0000ff); this.graphics.drawRect(50,50,50,50); this.graphics.endFill(); this.graphics.beginFill(0xff0000); this.graphics.drawRect(50,0,50,50); this.graphics.endFill(); this.graphics.beginFill(0xff0000); this.graphics.drawRect(0,50,50,50); this.graphics.endFill(); }}class MyContainer extends egret.DisplayObjectContainer { public constructor() { super(); this.drawGrid(); } public drawGrid() { var myGrid = new egret.Shape(); myGrid.graphics.beginFill(0x00ff00); myGrid.graphics.drawRect(200,200,50,50); myGrid.graphics.endFill(); myGrid.graphics.beginFill(0x00ff00); myGrid.graphics.drawRect(250,250,50,50); myGrid.graphics.endFill(); myGrid.graphics.beginFill(0xff0000); myGrid.graphics.drawRect(250,200,50,50); myGrid.graphics.endFill(); myGrid.graphics.beginFill(0xff0000); myGrid.graphics.drawRect(200,250,50,50); myGrid.graphics.endFill(); this.addChild(myGrid); var myRect = new egret.Shape(); myRect.graphics.beginFill(0xc000c0); myRect.graphics.drawRect(200,0, 100, 50); myRect.graphics.endFill(); this.addChild(myRect); }
class MySprite extends egret.Sprite { public constructor() { super(); this.drawGrid(); } private drawGrid() { this.graphics.beginFill(0x00ff00); this.graphics.drawRect(200,200,50,50); this.graphics.endFill(); this.graphics.beginFill(0x00ff00); this.graphics.drawRect(250,250,50,50); this.graphics.endFill(); this.graphics.beginFill(0xff0000); this.graphics.drawRect(250,200,50,50); this.graphics.endFill(); this.graphics.beginFill(0xff0000); this.graphics.drawRect(200,250,50,50); this.graphics.endFill(); var myRect = new egret.Shape(); myRect.graphics.beginFill(0xc000c0); myRect.graphics.drawRect(200,0,100,50); myRect.graphics.endFill(); this.addChild(myRect); }}
- 第一个是一个自定义对象类；
- 第二个是一个自定义容器类，包含两个自定义对象类。
- DisplayContainer 是 Sprite 的话，由于其实现了 graphics 也是可以直接被根容器添加并显示的，它的child也会被显示。
访问容器子对象与深度：
- getChildByName()
- getChildAt()
按官方说法，推荐用显示层级来获取对象效率更高。
值得注意的是，如果对象是一个容器，容器内又包含多个对象时的层次处理。
Erget 显示对象
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。