显示对象 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，编译并测试，你会在浏览器中看到如下图效果。


如果您觉得本文的内容对您的学习有所帮助，您可以微信：