Erget 显示对象

2022-10-28 10:23:39

核心显示类：

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

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

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

码农公寓

相关文章