显示对象 DisplayObject

作者：zccst

显示对象 DisplayObject

DisplayObject类是所有显示对象的父类，该类归纳总结了一些显示对象共有的特性，这些共有的特性被整理成为一些列的属性与方法。

1，显示对象的基本概念
（1）属性
上面四幅图中中展示了显示对象中比较基础也是很常用的可视属性，下面列表是显示对象的全部可视属性。

alpha：透明度
width：宽度 height：高度
x：X轴坐标值 y：Y轴坐标值

rotation：旋转角度
scaleX：横向缩放
scaleY：纵向缩放
skewX：横向斜切
skewY：纵向斜切
visible：是否可见

此外，还有锚点的位置属性
anchorX 对象沿x方向的对齐
anchorY 对象沿y方向的对齐
取值范围是0.0-1.0.其中0.0表示从对象的最左对齐，0.5表示从对象的中间对齐，1.0表示从对象的最右对齐
例如：
var textContainer:egret.Sprite = new egret.Sprite();
textContainer.anchorX = textContainer.anchorY = 0.5;
一篇文章：http://coronalabs.com/blog/2013/10/15/tutorial-anchor-points-in-graphics-2-0/

（2）方法


2，Egret中的显示对象类DisplayObject拥有四个派生类，分别为：Bitmap、Shape、TextField、TextInput 这四个派生类实现了不同的功能

Bitmap进行位图显示和操作，可以在位图纹理部分查阅相关技术细节。
Shape是可以进行矢量图绘制的显示对象，可以在适量绘图部分查阅相关技术细节。
TextField 和 TextInput都属于文本操作，可以在文本部分查阅相关技术细节。


3，遮罩是游戏中非常常用的一种视觉处理手段。例如，游戏中滚动的玩家列表就使用了遮罩这一技术。所谓遮罩就是指定一个显示对象哪些部分可以显示，哪些部分不可以显示。

Egret启用遮罩功能非常的简单，在DisplayObject中，我们暴露了一个名称为 mask 的属性，该属性就是用来指定遮罩部分的。

下面一个示例中绘制了两个Shape对象，我们对其中一个Shape使用遮罩，另外一个Shape当做参考。

//绘制了一个矢量图，矩形，( 0,0,100,100)
11 var shp:egret.Shape = new egret.Shape();
12 shp.graphics.beginFill( 0xff0000 );
13 shp.graphics.drawRect( 0,0,100,100);
14 shp.graphics.endFill();
15 this.addChild( shp );

//给改矩形添加了一个遮罩，遮罩也是一个对象
1 var rect:egret.Rectangle = new egret.Rectangle(20,20,30,50);//api中的矩形类，直接初始化
2 shp.mask = rect;


4，碰撞检测在游戏中是非常重要的功能，例如我们制作一款打飞机游戏，当子弹与飞机发生碰撞的时候我们可以认为游戏结束。此时碰撞的过程需要进行碰撞检测操作。

在Egret中，我们提供了碰撞检测的功能，同时该功能提供两种不同的碰撞检测方式。

第一种检测方法：检测图与点是否碰撞
shp.hitTestPoint( 10, 10 );

{
this.drawText();
12
13 var shp:egret.Shape = new egret.Shape();
14 shp.graphics.beginFill( 0xff0000 );
15 shp.graphics.drawRect( 0,0,100,100);
16 shp.graphics.endFill();
17 shp.width = 100;
18 shp.height = 100;
19 this.addChild( shp );

20 //检测shp这个矢量图，与点(10,10)是否有交集
21 var isHit:boolean = shp.hitTestPoint( 10, 10 );
//更新infoText的值
22 this.infoText.text = "碰撞结果" + isHit;
23
24 }

25 //定义一个变量infoText，用来显示文本信息
26 private infoText:egret.TextField;
27 private drawText()
28 {
29 this.infoText = new egret.TextField();
30 this.infoText.y = 200;
31 this.infoText.text = "碰撞结果";
32 this.addChild( this.infoText );
33 }

第二种检测方法：但如果我们想更加精确的检测图像是否与一个点发生了碰撞，我们需要将第三个参数设置为 true。
shp.hitTestPoint( 10, 10 );

1 var shp:egret.Shape = new egret.Shape();
2 shp.graphics.beginFill( 0xff0000 );
3 shp.graphics.drawRect( 0,0,100,100);
4 shp.graphics.endFill();
5 shp.width = 100;
6 shp.height = 100;
7 this.addChild( shp );
8
9 var isHit:boolean = shp.hitTestPoint( 10, 10, true );
10 this.infoText.text = "碰撞结果" + isHit;


我们稍微修改一下代码，将原来宽高为100的正方形修改为一个半径为20的圆形。代码如下：

1 var shp:egret.Shape = new egret.Shape();
2 shp.graphics.beginFill( 0xff0000 );
3 shp.graphics.drawCircle( 0, 0, 20);//注意坐标，可见区域只有四分之一圆
4 shp.graphics.endFill();
5 shp.width = 100; //有什么用呢
6 shp.height = 100;//有什么用呢
7 this.addChild( shp );
8
9 var isHit:boolean = shp.hitTestPoint( 25, 25, true );
10 this.infoText.text = "碰撞结果" + isHit;


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

下面我们来创建一个自己的显示对象。我们把这个显示对象称之为 MyGrid 。

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

1 class MyGrid extends egret.Shape
2 {
3 public constructor()
4 {
5 super();
6 this.drawGrid();
7 }
8
9 private drawGrid()
10 {
11 this.graphics.beginFill( 0x0000ff );
12 this.graphics.drawRect( 0, 0, 50,50 ); //矩形1
13 this.graphics.drawRect( 50, 50, 50, 50);//矩形4
14 this.graphics.beginFill( 0xff0000 );
15 this.graphics.drawRect( 50, 0, 50,50 );//矩形2
16 this.graphics.drawRect( 0, 50, 50,50 );//矩形3
17 this.graphics.endFill();
18 }
19 }
在 MyGrid 我们绘制了一个红蓝相间的2*2格子，然后我们创建一个新的文档类，名称为 GridMain ，在文档类中创建并显示我们的 MyGrid，具体代码如下：

1 class GridMain extends egret.DisplayObjectContainer
2 {
3 public constructor()
4 {
5 super();
6 this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
7 }
8
9 private onAddToStage(event:egret.Event)
10 {
11 var _myGrid:MyGrid = new MyGrid();
12 this.addChild( _myGrid );
13 }
14 }
编写保存后，在 egretProperties.json 文件中将文档类改为 GridMain，编译并测试，你会在浏览器中看到如下图效果。


如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]