Egret Engine 2D基础教学

基本概念

显示对象

1.基本概念

“显示对象”，是可以在舞台上显示的对象。可以显示的对象，既包括可以直接看见的图形、文字、视频、图片等，也包括不能看见但真实存在的显示对象容器。在Egret中，视觉图形都是由显示对象和显示对象容器组成的。
DisplayObject类是所有显示对象的父类，该类包含显示对象共有的属性与方法。

2.可视属性

可视属性用来定量描述显示对象在舞台中的显示状态，结合下图说明可视属性的含义。

如上图1所示，在Egret中定义舞台的坐标系

原点在屏幕左上角。

横轴使用X表示，向右为正。

纵轴使用Y表示，向下为正。

上图1中包含一个灰色的矩形，该矩形拥有一个“锚点”，Egret使用该点的坐标表示矩形的坐标。通过 x 和 y 属性访问修改显示对象的坐标位置。示例代码如下：

var shape:egret.Shape = new egret.Shape();
shape.x = 100;
shape.y = 20;

图2中展示了显示对象的缩放功能。缩放是指将显示对象的宽或高进行比例缩放。缩放功能通过 scaleX 和 scaleY 属性来实现。图中，对灰色的矩形宽高进行0.5倍缩放。示例代码如下：

var shape:egret.Shape = new egret.Shape();
shape.alpha = 0.4;

图4中展示了显示对象的旋转操作，旋转角度可通过 rotation 属性访问修改。将图中的矩形旋转30°，示例代码如下：

var shape:egret.Shape = new egret.Shape();
shape.rotation = 30;

上图展示了显示对象中常用的可视属性，下面列表是显示对象的全部可视属性。

alpha：透明度
width：宽度
height：高度
rotation：旋转角度
scaleX：横向缩放
scaleY：纵向缩放
skewX：横向斜切
skewY：纵向斜切
visible：是否可见
x：X轴坐标值
y：Y轴坐标值
anchorOffsetX：对象绝对锚点X
anchorOffsetY：对象绝对锚点Y
3.核心显示类
不同的内容对应不同的显示对象，Egret 中一共封装了8个显示相关的核心类，如下表。

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

4.自定义显示对象类

自定义显示对象类需要继承自 DisplayObject的具体子类，例如Shape或者TextField。

示例代码如下：

• 创建
  创建一个名称为 MyGrid 的类，并且继承自 Shape 。具体代码如下：

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();               
    }
}

在 MyGrid 中绘制了一个红蓝相间的2*2格子，然后修改文档类Main，在文档类中创建并显示 MyGrid类的实例，具体代码如下：

class Main extends egret.DisplayObjectContainer{
    public constructor(){
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    private onAddToStage(event:egret.Event){
        var _myGrid:MyGrid = new MyGrid();
        this.addChild( _myGrid );
    }
}

• 效果
  编译并测试，在浏览器中看到如下图的效果。