Egret 2D(2)--Basic Concept

 

Display the properties of an object

alpha：透明度
width：宽度
height：高度
rotation：旋转角度
scaleX：横向缩放
scaleY：纵向缩放
skewX：横向斜切
skewY：纵向斜切
visible：是否可见
x：X轴坐标值
y：Y轴坐标值
anchorOffsetX：对象绝对锚点X
anchorOffsetY：对象绝对锚点Y
name:类似标识

core display class

kind	describe
DisplayObject	Display object base class, all display objects inherit from this class
Bitmap	Bitmap, used to display the picture
Shape	Used to display vector graphics, which can be used to draw vector graphics
TextField	text class
BitmapText	Bitmap text class
DisplayObjectContainer	Display object container interface, all display object containers implement this interface
Sprite	Display container with vector drawing capabilities
Stage	Stage class

custom display object class

The custom display object class needs to inherit from a concrete subclass of DisplayObject, such as Shape or TextField.

class MyGrid extends egret.Shape{
    public constructor(){
        super();
        this.drawGrid();
    }
    private 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();               
    }

show container

All display containers all inherit from the DisplayObjectContainer class, which inherits from DisplayObject. That is, in Egret, all containers inherit from DisplayObject.

In Egret, DisplayObjectContainer encapsulates some commonly used functions in display lists, which will be described in detail in later documents. These common operations are mainly divided into four categories:

添加、删除子对象

访问子对象

检测子对象

设置叠放次序

In Egret, display objects are divided into two categories: one is the display object container that can include other display objects, referred to as " container " for short. The other is a simple display object, which cannot include other display objects except itself, referred to as " non-container object ".

Sprite container

Sprite inherits from DisplayObjectContainer and adds Graphics function (drawing function);

custom container

To customize the container, you can write a class that inherits DisplayObjectContainer. If you want to implement Graphics drawing function at the same time, you can inherit Sprite

class GridSprite extends egret.Sprite{
   .....
}

show list

The display list is used to manage and organize container and non-container objects. When a display object is in the display list, the object can be seen on the screen. When a display object is removed from the display list, the object disappears from the screen. A display list is maintained inside Egret.

In this tree structure, at the top is the "stage". Corresponding to the program, it is the stage object. The stage is the most fundamental display container in the Egret display architecture. Each Egret should have one and only one stage object. The stage is the root node of this display tree structure.

In the stage we also have a main container. This container is the container created by the document class. Each Egret will have a document class , which must be a display object container.