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 即可看到運行結果：