Erget 显示对象

Posted 2020-08-12 青墨淡潋

核心显示类：

类	描述
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()

　　按官方说法，推荐用显示层级来获取对象效率更高。

　　值得注意的是，如果对象是一个容器，容器内又包含多个对象时的层次处理。