Egret03-显示对象的简单介绍

一、显示对象概念

1、游戏中的“对象”统指舞台上可见和不可见的物件（图片、图形、文字、视频等可见，对象容器不可见）。DisplayObject类是显示对象的基类，包含了显示对象公共的方法和属性，常用可视属性如下：

alpha：透明度(0~1)
width：宽度
height：高度
rotation：旋转角度
scaleX：横向缩放
scaleY：纵向缩放
skewX：横向斜切
skewY：纵向斜切
visible：是否可见
x：X轴坐标值
y：Y轴坐标值
anchorOffsetX：对象绝对锚点X，可以粗略理解是对象本身的坐标中心点
anchorOffsetY：对象绝对锚点Y

2、Egret提供了8类显示对象：

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

二、代码实现显示对象

1、创建一个简单的GridDemo01类，继承Shape，画一个简单的图形：

class GridDemo01 extends egret.Shape{
	
	public constructor() {
		super();
		this.myGrid();
	}

	private myGrid(){
		
        /**1、绘制一个简单的显示对象：
		 * beginFill颜色填充(注意：填充动作是在后面的drawRect调用时才生效的)；
		 * drawRect绘制一个矩形；
		 * endFill结束填充；
		 **/
		this.graphics.beginFill( 0xffff00 );
        this.graphics.drawRect( 100, 0, 100,100 );
        this.graphics.endFill();
	}
}

2、在main.ts类的runGame( )函数中调用以上代码并加入到舞台中：

    private async runGame() {
       this.startGeme();
    }

    private  startGeme(): void {
        //**显示对象：画一个简单的图形 */
        var  gridDemo01:GridDemo01 = new GridDemo01();
        this.addChild(gridDemo01);
    }

3、点击“编译”按钮，在浏览器打开 http://127.0.0.1:5257 即可看到运行结果：