egret_显示对象

显示对象等级结构: 舞台->容器->对象

核心显示类:

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

可视属性:

使用可视属性先创建一个可视对象如var shape:egret.Shape = new egret.Shape();

• alpha: 透明度
• width:宽度
• height:高度
• rotation: 旋转角度
• scaleX: 横向缩放
• scaleY: 纵向缩放
• skewX: 横向斜切
• skewY: 纵向斜切
• visible: 是否可见
• x: X轴坐标值
• y: Y轴坐标值
• anchorOffsetX: 对象绝对锚点X
• anchorOffsetY: 对象绝对锚点Y

自定义显示对象类:

创建显示对象类:

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

使用显示对象类:

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=newMyGrid();// 实例化自定义类
  this.addChild(_myGrid);//将一个DisplayObject(显示对象)子实例添加到DisplayObjectContainer(显示对象容器)实例中
 }
}

位置:

下面四个属性更改显示对象的坐标和锚点(相对于自身所在位置的偏移量), x和y坐标, 始终相对于舞台坐标轴的(0,0)的位置

• x: X轴坐标值
• y: Y轴坐标值
• anchorOffsetX: 对象绝对锚点X
• anchorOffsetY: 对象绝对锚点Y

若要确定显示对象的坐标相对于全局舞台坐标位置, 可以在任何显示对象的globalToLocal()方法将坐标从全局(舞台)转换为本地(显示对象容器)坐标, 同样也可以使用显示对象类的localToGlobal()方法将本地坐标转换为舞台坐标;

如, 将显示对象相对于舞台, 更改为想对于本地:

// 创建一个空的DisplayObjectContainer容器, 把它的x和y坐标都改为200
var container: egret.DisplayObjectContainer=new egret.DisplayObjectContainer();
container.x=200;// 设置x
container.y=200;// 设置y
this.addChild(container);// 添加到显示对象容器实例中(这里应该是添加到了全局舞台中)
// 画一个红色的圆, 添加到container中
var circle: egret.Shape=new egret.Shape();// 创建一个用来显示矢量图的显示对象
circle.graphics.beginFill(0xff0000);// 填充颜色
circle.graphics.drawCircle(25,25,25);// 画一个圆
circle.graphics.endFill();// 结束填充
container.addChild(circle);// 添加到container显示对象容器中
// 给圆增加点击事件
circle.touchEnabled=true;// 设置激活touch事件监听, 默认为不激活
circle.addEventListener(egret.TouchEvent.TOUCH_TAP, onClick,this);// 监听触摸抬起(与开始触摸时是同一个显示对象)
function onClick():void{
 var targetPoint: egret.Point= container.globalToLocal(0,0);// egret.Point对象表示二维坐标系统中的位置
 circle.x= targetPoint.x;// 让显示对象的x坐标等于
 circle.y= targetPoint.y;// 让显示对象的y坐标
}

// 设置两个偏移量
var offsetX:number;
var offsetY:number;
// 画一个红色的圆
var circle: egret.Shape=new egret.Shape();// 创建一个显示矢量图的对象(该对象的方法能够绘制矢量图)
circle.graphics.beginFill(0xff0000);// 填充颜色
circle.graphics.drawCircle(25,25,25);// 画圆
circle.graphics.endFill();// 结束填充
this.addChild(circle);// 添加到舞台对象实例(this如果是容器就是添加到容器)
//手指按到屏幕，触发 startMove 方法
circle.touchEnabled=true;// 激活touch
circle.addEventListener(egret.TouchEvent.TOUCH_BEGIN,startMove,this);// 添加手指触摸屏幕事件
//手指离开屏幕，触发 stopMove 方法
circle.addEventListener(egret.TouchEvent.TOUCH_END,stopMove,this);// 添加手指离开屏幕事件
function startMove(e:egret.TouchEvent):void{// 定义手指触摸屏幕的处理函数
 //计算手指和圆形的距离
 offsetX= e.stageX- circle.x;// 得到初始偏移量x(手指现在的位置减去容器现在的位置得到手指到容器的距离)
 offsetY= e.stageY- circle.y;// 得到初始偏移量y
 //手指在屏幕上移动，会触发 onMove 方法
 this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,onMove,this);// 添加手指移动事件
}
function stopMove(e:egret.TouchEvent){console.log(22);// 手指离开处理函数
 //手指离开屏幕，移除手指移动的监听
 this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,onMove,this);
}
function onMove(e:egret.TouchEvent):void{// 手指移动处理函数
 //通过计算手指在屏幕上的位置，计算当前对象的坐标，达到跟随手指移动的效果 
 circle.x= e.stageX- offsetX;
 circle.y= e.stageY- offsetY;
}

视图状态: 
给一个皮肤设置视图状态属性states="one,two", 皮肤中的元素属性includeIn="one" , 当皮肤的currentState属性变为one 时, 显示皮肤元素中标记为includeIn="one"的元素 
ts 中: 
this.invalidateState(): 标记当前状态无效, 并且调用this.getCurrentState() 方法来获取新的状态, 就是用来切换状态的方法;