Egret快速入门
来源：互联网 发布：python 不定积分 编辑：程序博客网 时间：2024/05/29 02:41
根据Egret的官方文档整理的最简单教程。
最基本的显示
private onAddToStage(event: egret.Event) { egret.lifecycle.addLifecycleListener((context) => { // custom lifecycle plugin context.onUpdate = () => { console.log('hello,world') } }) egret.lifecycle.onPause = () => { egret.ticker.pause(); } egret.lifecycle.onResume = () => { egret.ticker.resume(); } /// 加载bird数据 var imgLoader:egret.ImageLoader = new egret.ImageLoader; // 调用imgLoadHandler方法 添加点击事件 imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this ); imgLoader.load( "resource/assets/plane.png" ); } private _txInfo:egret.TextField; private _bgInfo:egret.Shape; private imgLoadHandler(evt:egret.Event):void{ var bmd:egret.BitmapData = evt.currentTarget.data; /*** 本示例关键代码段开始 ***/ /// 将已加载完成的图像显示出来 var bird:egret.Bitmap = new egret.Bitmap( bmd ); bird.x = 100; bird.y = 100; this.addChild( bird ); /*** 本示例关键代码段结束 ***/ /// 为定位设置基准点(即锚点) bird.anchorOffsetX = bmd.width / 2; bird.anchorOffsetY = bmd.height / 2; bird.x = this.stage.stageWidth * .5; bird.y = this.stage.stageHeight * .5; /// 设置提示信息 this._txInfo = new egret.TextField; this.addChild( this._txInfo ); this._txInfo.size = 28; this._txInfo.x = 50; this._txInfo.y = 50; this._txInfo.textAlign = egret.HorizontalAlign.LEFT; this._txInfo.textColor = 0x000000; this._txInfo.type = egret.TextFieldType.DYNAMIC; this._txInfo.lineSpacing = 6; this._txInfo.multiline = true; this._txInfo.text ="轻触屏幕调整显示对象位置"; this._bgInfo = new egret.Shape; this.addChildAt( this._bgInfo, this.numChildren - 1 ); this._bgInfo.x = this._txInfo.x; this._bgInfo.y = this._txInfo.y; this._bgInfo.graphics.clear(); this._bgInfo.graphics.beginFill( 0xffffff, .5 ); this._bgInfo.graphics.drawRect( 0, 0, this._txInfo.width, this._txInfo.height ); this._bgInfo.graphics.endFill(); /// 添加点击事件 点击屏幕 移动图像位置 this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, ( evt:egret.TouchEvent )=>{ bird.x = evt.localX ; bird.y = evt.localY ; }, this ); }锚点及旋转缩放
class Main extends egret.DisplayObjectContainer { /// 旋转及缩放步长设定 private static STEP_ROT:number = 3; private static STEP_SCALE:number = .03; public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event) { var imgLoader:egret.ImageLoader = new egret.ImageLoader; imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this ); imgLoader.load( "resource/assets/bule_plane.png" ); } private _bird:egret.Bitmap; private _txInfo:egret.TextField; private imgLoadHandler( evt:egret.Event ):void{ /// 展示用显示对象： 白鹭小鸟 this._bird = new egret.Bitmap( evt.currentTarget.data ); this.addChild( this._bird ); this._bird.anchorOffsetX = this._bird.width/2; this._bird.anchorOffsetY = this._bird.height/2; this._bird.x = this.stage.stageWidth / 2; this._bird.y = this.stage.stageHeight * 0.618; /// 提示信息 this._txInfo = new egret.TextField; this.addChild( this._txInfo ); this._txInfo.size = 28; /* private _txInfo:egret.TextField; */ this._txInfo.x = 50; this._txInfo.y = 50; this._txInfo.textAlign = egret.HorizontalAlign.LEFT; this._txInfo.textColor = 0x000000; this._txInfo.type = egret.TextFieldType.DYNAMIC; this._txInfo.lineSpacing = 6; this._txInfo.multiline = true; this.launchAnimations(); } /// 用于记录当前的模式，模式切换通过触摸舞台触发 private _iAnimMode:number; private _nScaleBase:number; private launchAnimations():void { this._iAnimMode = AnimModes.ANIM_ROT; this.stage.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{ this._iAnimMode = ( this._iAnimMode + 1 ) % 3; }, this ); this._nScaleBase = 0; /// 根据当前模式调整旋转度数或缩放正弦基数形成相应动画 this.addEventListener( egret.Event.ENTER_FRAME, ( evt:egret.Event )=>{ /*** 本示例关键代码段开始 ***/ switch ( this._iAnimMode ){ case AnimModes.ANIM_ROT: /// 仅旋转 this._bird.rotation += Main.STEP_ROT; break; case AnimModes.ANIM_SCALE: /// 仅缩放，缩放范围 0.5~1 this._bird.scaleX = this._bird.scaleY = 0.5 + 0.5* Math.abs( Math.sin( this._nScaleBase += Main.STEP_SCALE ) ); break; } /*** 本示例关键代码段结束 ***/ this._txInfo.text = "旋转角度:" + this._bird.rotation +"\n缩放比例:" + this._bird.scaleX.toFixed(2) +"\n\n轻触进入" +(["缩放","静止","旋转"][this._iAnimMode])+ "模式"; return false; /// 友情提示： startTick 中回调返回值表示执行结束是否立即重绘 }, this ); } }/// 控制动画的类型class AnimModes{ public static ANIM_ROT:number = 0; public static ANIM_SCALE:number = 1;}碰撞检测
constructor –> onAddToStage –> imgLoadHandler –> launchCollisionTest –> touchHandler –> checkCollision(进行检测，触发文字更新。)
/** * @copyright www.egret.com * @author city * @desc 碰撞检测分为两种模式，一种是对显示对象所在的矩形包围盒检测，另一种是其透 * 明度不为零的区域检测。 * 为达到一个好的交互，本示例代码较多，但是核心检测碰撞只有一个API，就是 * 代码中的`hitTestPoint`。 */class Main extends egret.DisplayObjectContainer { /// 旋转及缩放步长设定 private static STEP_ROT:number = 3; private static STEP_SCALE:number = .03; public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event) { var imgLoader:egret.ImageLoader = new egret.ImageLoader; imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this ); imgLoader.load( "resource/assets/bule_plane.png" ); } private _iTouchCollideStatus:number; private _bShapeTest:boolean; private launchCollisionTest():void { this._iTouchCollideStatus = TouchCollideStatus.NO_TOUCHED; this._bShapeTest = false; this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, this.touchHandler, this ); this.updateInfo( TouchCollideStatus.NO_TOUCHED ); } private checkCollision( stageX:number, stageY:number ):void { /*** 本示例关键代码段开始 ***/ var bResult:boolean = this._bird.hitTestPoint( stageX, stageY, this._bShapeTest ); /*** 本示例关键代码段结束 ***/ /// 小圆点同步手指位置 this._dot.x = stageX; this._dot.y = stageY; /// 文字信息更新 this.updateInfo( bResult ? TouchCollideStatus.COLLIDED : TouchCollideStatus.TOUCHED_NO_COLLIDED ); } private touchHandler( evt:egret.TouchEvent ){ switch ( evt.type ){ case egret.TouchEvent.TOUCH_MOVE: this.checkCollision( evt.stageX, evt.stageY ); break; case egret.TouchEvent.TOUCH_BEGIN: if( !this._txInfo.hitTestPoint( evt.stageX, evt.stageY ) ){ /// if代码确保触摸开始位置不在文字区域 this.stage.addEventListener( egret.TouchEvent.TOUCH_MOVE, this.touchHandler, this ); this.stage.once( egret.TouchEvent.TOUCH_END, this.touchHandler, this ); this.addChild( this._dot ); this.checkCollision( evt.stageX, evt.stageY ); } break; case egret. TouchEvent.TOUCH_END: this.stage.removeEventListener( egret.TouchEvent.TOUCH_MOVE, this.touchHandler, this ); this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, this.touchHandler, this ); if( this._dot.parent ){ this._dot.parent.removeChild( this._dot ); } this.updateInfo( TouchCollideStatus.NO_TOUCHED ); break; } } private updateInfo( iStatus:number ){ this._txInfo.text = "碰撞检测结果：" + ( ["放上手指！","想摸我？", "别摸我！！！"][iStatus] ) +"\n\n碰撞检测模式：" +( this._bShapeTest ? "非透明像素区域" : "矩形包围盒" ) +"\n（轻触文字区切换）"; } private _bird:egret.Bitmap; private _dot:egret.Shape; private _txInfo:egret.TextField; private imgLoadHandler( evt:egret.Event ):void { /// 展示用显示对象： 白鹭小鸟 this._bird = new egret.Bitmap( evt.currentTarget.data ); this.addChild( this._bird ); this._bird.anchorOffsetX = this._bird.width / 2; this._bird.anchorOffsetY = this._bird.height / 2; this._bird.x = this.stage.stageWidth * 0.5; this._bird.y = this.stage.stageHeight * 0.618; /// 小圆点，用以提示用户按下位置 this._dot = new egret.Shape; this._dot.graphics.beginFill( 0x00ff00 ); this._dot.graphics.drawCircle( 0, 0, 5 ); this._dot.graphics.endFill(); /// 提示信息 this._txInfo = new egret.TextField; this.addChild( this._txInfo ); this._txInfo.size = 28; this._txInfo.x = 50; this._txInfo.y = 50; this._txInfo.textAlign = egret.HorizontalAlign.LEFT; this._txInfo.textColor = 0x000000; this._txInfo.type = egret.TextFieldType.DYNAMIC; this._txInfo.lineSpacing = 6; this._txInfo.multiline = true; this._txInfo.touchEnabled = true; this._txInfo.addEventListener( egret.TouchEvent.TOUCH_TAP, ( evt:egret.TouchEvent )=>{ evt.stopImmediatePropagation(); this._bShapeTest = ! this._bShapeTest; this.updateInfo( TouchCollideStatus.NO_TOUCHED ); }, this ); this.launchCollisionTest(); }}/// 点击控制动画的辅助类class TouchCollideStatus{ public static NO_TOUCHED:number = 0; public static TOUCHED_NO_COLLIDED:number = 1; public static COLLIDED:number = 2;}遮罩的用法
/** * @copyright www.egret.com * @author city * @desc 任何显示对象都可以作为其他显示对象的遮罩。 * 显示对象作为遮罩后，就好像在屏幕的垂直方向有一个直射光源对齐投射产生影子 * 。被遮罩的显示对象只能显示遮罩被投射后的影子区域。 */class Main extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event) { var imgLoader:egret.ImageLoader = new egret.ImageLoader; /// 在这里用imgLoadHandler添加一个图片 imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this ); imgLoader.load( "resource/assets/bule_plane.png" ); } /// 开启一个遮层 private launchMask():void { this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, this.touchHandler, this ); } private updateBird( stageX:number, stageY:number ):void { /// 小鸟同步手指位置 this._bird.x = stageX; this._bird.y = stageY; } /// 监听遮层的代码 private touchHandler( evt:egret.TouchEvent ){ switch ( evt.type ){ case egret.TouchEvent.TOUCH_MOVE: this.updateBird( evt.stageX, evt.stageY ); break; case egret.TouchEvent.TOUCH_BEGIN: this.stage.addEventListener( egret.TouchEvent.TOUCH_MOVE, this.touchHandler, this ); this.stage.once( egret.TouchEvent.TOUCH_END, this.touchHandler, this ); /*** 本示例关键代码段开始 ***/ this._shpBeMask.mask = this._bird; /*** 本示例关键代码段结束 ***/ this.updateBird( evt.stageX, evt.stageY ); break; case egret. TouchEvent.TOUCH_END: this.stage.removeEventListener( egret.TouchEvent.TOUCH_MOVE, this.touchHandler, this ); this.stage.addEventListener( egret.TouchEvent.TOUCH_BEGIN, this.touchHandler, this ); this._shpBeMask.mask = null; this._bird.$maskedObject = null; break; } } private _shpBeMask:egret.Shape; // 声明一个egret的shap对象 用作遮层 private _bird:egret.Bitmap; private _txInfo:egret.TextField; private imgLoadHandler( evt:egret.Event ):void { /// 用以被遮罩的形状 this._shpBeMask = new egret.Shape; this._shpBeMask.graphics.lineStyle( 0x000000 ) this._shpBeMask.graphics.beginFill( this.getRdmClr() ); this._shpBeMask.graphics.drawEllipse( 0, 0, 200, 300 ); this._shpBeMask.graphics.endFill(); this._shpBeMask.x = ( this.stage.stageWidth - 200 ) / 2; this._shpBeMask.y = ( this.stage.stageHeight - 300 ) / 2; this.addChild( this._shpBeMask ); /// 展示用显示对象： 白鹭小鸟 this._bird = new egret.Bitmap( evt.currentTarget.data ); var wHalfBird:number = this._bird.width / 2; var hHalfBird:number = this._bird.height / 2; this._bird.anchorOffsetX = wHalfBird; this._bird.anchorOffsetY = hHalfBird; /// 给一个随机的初始位置 this._bird.x = wHalfBird + ( this.stage.stageWidth - wHalfBird * 2 ) * Math.random() ; this._bird.y = hHalfBird + ( this.stage.stageHeight - hHalfBird * 2 ) * Math.random() ; this.addChild( this._bird ); /// 提示信息 this._txInfo = new egret.TextField; this.addChildAt( this._txInfo, 0 ); this._txInfo.size = 28; this._txInfo.x = 50; this._txInfo.y = 50; this._txInfo.width = this.stage.stageWidth - 100; this._txInfo.textAlign = egret.HorizontalAlign.LEFT; this._txInfo.textColor = 0x000000; this._txInfo.type = egret.TextFieldType.DYNAMIC; this._txInfo.lineSpacing = 6; this._txInfo.multiline = true; this._txInfo.touchEnabled = true; this._txInfo.text ="接触屏幕后白鹭小鸟将变为椭圆形状的遮罩区域，可以移动手指（白鹭小鸟）并观察椭圆在遮罩下的显示变化"; this.launchMask(); } private getRdmClr():number{ return ( Math.floor( Math.random() * 0xff ) << 16 ) + ( Math.floor( Math.random() * 0xff ) << 8 ) + Math.floor( Math.random() * 0xff ) ; }}删除与添加对象
this.removeChild(upLeftBird);
this.addChild(upLeftBird);
/** * @copyright www.egret.com * @author dily * @desc 向一个容器中添加或者删除一个显示对象。 * 整个示例分四个区域，如果当前区域有对象点击则移除，如果没有显示对象则添加 * 一个显示对象。 */class Main extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event) { var imgLoader:egret.ImageLoader = new egret.ImageLoader; imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this ); imgLoader.load( "resource/assets/bule_plane.png" ); } private _txInfo:egret.TextField; private imgLoadHandler( evt:egret.Event ):void{ // 存储加载完毕的数据 var data = evt.currentTarget.data; /*** 以下代码使用shape和graphics区分四个区域 ***/ var upLeft = new egret.Shape(); upLeft.graphics.beginFill(0xf7acbc); upLeft.graphics.drawRect(0, 0, this.stage.stageWidth/2, this.stage.stageHeight/2); upLeft.graphics.endFill(); upLeft.touchEnabled = true; upLeft.x = 0; upLeft.y = 0; this.addChild(upLeft); var upRight = new egret.Shape(); upRight.graphics.beginFill(0xdeab8a); upRight.graphics.drawRect(0, 0, this.stage.stageWidth/2, this.stage.stageHeight/2); upRight.graphics.endFill(); upRight.touchEnabled = true; upRight.x = this.stage.stageWidth/2; upRight.y = 0; this.addChild(upRight); var downLeft = new egret.Shape(); downLeft.graphics.beginFill(0xef5b9c); downLeft.graphics.drawRect(0, 0, this.stage.stageWidth/2, this.stage.stageHeight/2); downLeft.graphics.endFill(); downLeft.touchEnabled = true; downLeft.x = 0; downLeft.y = this.stage.stageHeight/2; this.addChild(downLeft); var downRight = new egret.Shape(); downRight.graphics.beginFill(0xfedcbd); downRight.graphics.drawRect(0, 0, this.stage.stageWidth/2, this.stage.stageHeight/2); downRight.graphics.endFill(); downRight.touchEnabled = true; downRight.x = this.stage.stageWidth/2; downRight.y = this.stage.stageHeight/2; this.addChild(downRight); /*** 先初始化四个白鹭小鸟 ***/ var upLeftBird:egret.Bitmap = new egret.Bitmap( data ); upLeftBird.x = upLeft.x + upLeft.width/2 - upLeftBird.width/2; upLeftBird.y = upLeft.y + upLeft.height/2 - upLeftBird.height/2; var upRightBird:egret.Bitmap = new egret.Bitmap( data ); upRightBird.x = upRight.x + upRight.width/2 - upRightBird.width/2; upRightBird.y = upRight.y + upRight.height/2 - upRightBird.height/2; var downLeftBird:egret.Bitmap = new egret.Bitmap( data ); downLeftBird.x = downLeft.x + downLeft.width/2 - downLeftBird.width/2; downLeftBird.y = downLeft.y + downLeft.height/2 - downLeftBird.height/2; var downRightBird:egret.Bitmap = new egret.Bitmap( data ); downRightBird.x = downRight.x + downRight.width/2 - downRightBird.width/2; downRightBird.y = downRight.y + downRight.height/2 - downRightBird.height/2; /*** 以下代码四个区域添加监听事件 ***/ upLeft.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{ /*** 本示例关键代码段开始 ***/ if(this.contains(upLeftBird)){ this.removeChild(upLeftBird); }else{ this.addChild(upLeftBird); } /*** 本示例关键代码段结束 ***/ }, this ); upRight.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{ /*** 本示例关键代码段开始 ***/ if(this.contains(upRightBird)){ this.removeChild(upRightBird); }else{ this.addChild(upRightBird); } /*** 本示例关键代码段结束 ***/ }, this ); downLeft.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{ /*** 本示例关键代码段开始 ***/ if(this.contains(downLeftBird)){ this.removeChild(downLeftBird); }else{ this.addChild(downLeftBird); } /*** 本示例关键代码段结束 ***/ }, this ); downRight.addEventListener( egret.TouchEvent.TOUCH_TAP, ()=>{ /*** 本示例关键代码段开始 ***/ if(this.contains(downRightBird)){ this.removeChild(downRightBird); }else{ this.addChild(downRightBird); } /*** 本示例关键代码段结束 ***/ }, this ); /// 提示信息 this._txInfo = new egret.TextField; this._txInfo.size = 28; this._txInfo.textAlign = egret.HorizontalAlign.CENTER; this._txInfo.textColor = 0x843900; this._txInfo.lineSpacing = 6; this._txInfo.multiline = true; this._txInfo.text = "点击不同色块"; this._txInfo.x = this.stage.stageWidth/2 - this._txInfo.width/2; this._txInfo.y = 10; this.addChild( this._txInfo ); }}深度管理
this.setChildIndex(rightBird, this.numChildren - 1);
/** * @copyright www.egret.com * @author dily * @desc 显示对象的深度管理。 * 点击不同白鹭小鸟提升到最上层。 */class Main extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event) { var imgLoader1:egret.ImageLoader = new egret.ImageLoader; imgLoader1.once( egret.Event.COMPLETE, this.imgLoadHandler1, this ); imgLoader1.load( "resource/assets/bule_plane.png" ); } private _txInfo:egret.TextField; private imgLoadHandler1( evt:egret.Event ):void{ // 存储加载完毕的数据 var data = evt.currentTarget.data; /*** 先初始化四个白鹭小鸟 ***/ var upBird:egret.Bitmap = new egret.Bitmap( data ); upBird.x = this.stage.stageWidth / 2 - upBird.width / 2; upBird.y = this.stage.stageHeight/2 - upBird.height/2 - 100; upBird.touchEnabled = true; upBird.pixelHitTest = true; this.addChild(upBird); var leftBird:egret.Bitmap = new egret.Bitmap( data ); leftBird.x = -50; leftBird.y = this.stage.stageHeight / 2 - leftBird.height / 2; leftBird.touchEnabled = true; leftBird.pixelHitTest = true; this.addChild(leftBird); var rightBird:egret.Bitmap = new egret.Bitmap( data ); rightBird.x = this.stage.stageWidth - rightBird.width; rightBird.y = this.stage.stageHeight / 2 - rightBird.height / 2; rightBird.touchEnabled = true; rightBird.pixelHitTest = true; this.addChild(rightBird); /*** 以下代码三个按钮添加监听事件 ***/ upBird.addEventListener(egret.TouchEvent.TOUCH_TAP, () => { /*** 本示例关键代码段开始 ***/ this.setChildIndex(upBird, this.numChildren - 1); /*** 本示例关键代码段结束 ***/ }, this ); leftBird.addEventListener(egret.TouchEvent.TOUCH_TAP, () => { /*** 本示例关键代码段开始 ***/ this.setChildIndex(leftBird, this.numChildren - 1); /*** 本示例关键代码段结束 ***/ }, this ); rightBird.addEventListener(egret.TouchEvent.TOUCH_TAP, () => { /*** 本示例关键代码段开始 ***/ this.setChildIndex(rightBird, this.numChildren - 1); /*** 本示例关键代码段结束 ***/ }, this); /// 提示信息 this._txInfo = new egret.TextField; this._txInfo.size = 28; this._txInfo.textAlign = egret.HorizontalAlign.CENTER; this._txInfo.textColor = 0x843900; this._txInfo.lineSpacing = 6; this._txInfo.multiline = true; this._txInfo.text = "点击不同白鹭小鸟提升到最上层"; this._txInfo.x = this.stage.stageWidth/2 - this._txInfo.width/2; this._txInfo.y = 10; this.addChild( this._txInfo ); }}容器的使用
/** * @copyright www.egret.com * @author dily * @desc 区分两个不同的容器 * 点击不同颜色按钮，将白鹭小鸟放到不同的容器中，拖动容器小鸟随着容器移动 */class Main extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event) { var imgLoader1:egret.ImageLoader = new egret.ImageLoader; imgLoader1.once( egret.Event.COMPLETE, this.imgLoadHandler , this ); imgLoader1.load( "resource/assets/bule_plane.png" ); } private _txInfo:egret.TextField; private leftTF:egret.TextField; private rightTF:egret.TextField; private imgLoadHandler( evt:egret.Event ):void{ // 存储加载完毕的数据 var data = evt.currentTarget.data; /*** 先初始化1个白鹭小鸟 ***/ var egretBird: egret.Bitmap = new egret.Bitmap(data); egretBird.x = this.stage.stageWidth / 2 - egretBird.width / 2; egretBird.y = this.stage.stageHeight / 2 + 50;; this.addChild(egretBird); egretBird.touchEnabled = false; /*** 按钮生成代码 ***/ /// 生成左边的按钮 添加到舞台中 this.leftTF = new egret.TextField; this.leftTF.size = 28; this.leftTF.textAlign = egret.HorizontalAlign.CENTER; this.leftTF.textColor = 0xffffff; this.leftTF.background = true; this.leftTF.backgroundColor = 0xd71345; this.leftTF.text = "红色容器"; this.leftTF.x = this.stage.stageWidth/4 - this.leftTF.width/2; this.leftTF.y = 120; this.leftTF.touchEnabled = true; this.addChild(this.leftTF); /// 生成右边的按钮 添加到舞台中 this.rightTF = new egret.TextField; this.rightTF.size = 28; this.rightTF.textAlign = egret.HorizontalAlign.CENTER; this.rightTF.textColor = 0xffffff; this.rightTF.background = true; this.rightTF.backgroundColor = 0x102b6a; this.rightTF.text = "蓝色容器"; this.rightTF.x = this.stage.stageWidth/2 + this.stage.stageWidth/4 - this.rightTF.width/2; this.rightTF.y = 120; this.rightTF.touchEnabled = true; this.addChild(this.rightTF); /*** 以下代码使用实现两个容器 ***/ /// leftCon是左边的容器 var leftCon = new egret.DisplayObjectContainer(); this.addChild(leftCon); /// 在左边的容器leftCon中放一个正方形leftCage var leftCage = new egret.Shape(); leftCage.graphics.lineStyle(10, 0xd71345, 1, true) leftCage.graphics.lineTo(0,0); leftCage.graphics.lineTo(250,0); leftCage.graphics.lineTo(250,250); leftCage.graphics.lineTo(0,250); leftCage.graphics.lineTo(0,0); leftCage.graphics.endFill(); leftCon.addChild(leftCage); leftCon.x = this.stage.stageWidth / 4 - leftCon.width / 2; leftCon.y = 200; var rightCon = new egret.DisplayObjectContainer(); this.addChild(rightCon); var rightCage = new egret.Shape(); rightCage.graphics.lineStyle(10, 0x102b6a, 1, true) rightCage.graphics.lineTo(0, 0); rightCage.graphics.lineTo(250, 0); rightCage.graphics.lineTo(250, 250); rightCage.graphics.lineTo(0, 250); rightCage.graphics.lineTo(0, 0); rightCage.graphics.endFill(); rightCon.addChild(rightCage); rightCon.x = this.stage.stageWidth / 2 + this.stage.stageWidth / 4 - rightCon.width / 2; rightCon.y = 200; /// 提示信息 this._txInfo = new egret.TextField; this._txInfo.size = 28; this._txInfo.width = 550; this._txInfo.textAlign = egret.HorizontalAlign.CENTER; this._txInfo.textColor = 0x000000; this._txInfo.lineSpacing = 6; this._txInfo.multiline = true; this._txInfo.text = "点击不同颜色按钮，将白鹭小鸟放到不同的容器中，拖动容器小鸟随着容器移动"; this._txInfo.x = this.stage.stageWidth/2 - this._txInfo.width/2; this._txInfo.y = 10; this.addChild( this._txInfo ); console.log("**********************************"); console.log(this.getChildIndex(egretBird)); console.log(leftCon.getChildIndex(egretBird)); console.log(rightCon.getChildIndex(egretBird)); console.log("**********************************"); /*** 以下代码两个按钮添加监听事件 ***/ /** * 为左边的按钮添加点击事件 */ this.leftTF.addEventListener(egret.TouchEvent.TOUCH_TAP, () => { /*** 本示例关键代码段开始 ***/ console.log("点击左边按钮：100000"); console.log(this.getChildIndex(egretBird)); console.log(this); /// this是指舞台，this.getChildIndex(egretBird)!=-1说明egretBird在舞台里面 /// 则先把舞台的egretBird去掉 再给leftCon加上一个egretBird if (this.getChildIndex(egretBird) != -1) { this.removeChild(egretBird); leftCon.addChild(egretBird); egretBird.x = leftCage.width/2 - egretBird.width/2; egretBird.y = leftCage.height / 2 - egretBird.height / 2; console.log("点击左边按钮：在舞台里面"); /// 否则检查egretBird是否在右边容器rightCon里面的时候 先把rightCon台的egretBird去掉 再给leftCon加上一个egretBird } else if (rightCon.getChildIndex(egretBird) != -1) { rightCon.removeChild(egretBird); leftCon.addChild(egretBird); egretBird.x = leftCage.width / 2 - egretBird.width / 2; egretBird.y = leftCage.height / 2 - egretBird.height / 2; console.log("点击左边按钮：在右边按钮里面"); }else{ console.log("点击左边按钮：已经在左边容器里面了"); } /// 设置允许左边的框可以点击允许拖动 右边的框不能点击不能拖动 leftCon.touchEnabled = true; rightCon.touchEnabled = false; /*** 本示例关键代码段结束 ***/ }, this); this.rightTF.addEventListener(egret.TouchEvent.TOUCH_TAP, () => { /*** 本示例关键代码段开始 ***/ console.log("点击右边按钮：100000"); console.log(this.getChildIndex(egretBird)); console.log(this); if (this.getChildIndex(egretBird) != -1) { this.removeChild(egretBird); rightCon.addChild(egretBird); egretBird.x = rightCage.width / 2 - egretBird.width / 2; egretBird.y = rightCage.height / 2 - egretBird.height / 2; console.log("点右边按钮：在舞台里面"); } else if (leftCon.getChildIndex(egretBird) != -1) { leftCon.removeChild(egretBird); rightCon.addChild(egretBird); egretBird.x = rightCage.width / 2 - egretBird.width / 2; egretBird.y = rightCage.height / 2 - egretBird.height / 2; console.log("点击右边按钮：在左边按钮里面"); }else{ console.log("点击左边按钮：已经在右边容器里面了"); } leftCon.touchEnabled = false; rightCon.touchEnabled = true; /*** 本示例关键代码段结束 ***/ }, this); /*** 对于两个容器添加拖动代码 ***/ /// 先确保点在框里面，然后修改对应容器的位置即可 因为容器里面的图片也会移动 var leftDrag: boolean = false; var rightDrag: boolean = false; leftCon.addEventListener(egret.TouchEvent.TOUCH_BEGIN, () => { leftDrag = true; }, this); leftCon.addEventListener(egret.TouchEvent.TOUCH_END, () => { leftDrag = false; }, this); this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, (e) => { if(leftDrag){ leftCon.x = e.stageX - leftCage.width/2; leftCon.y = e.stageY - leftCage.height/2; } }, this); rightCon.addEventListener(egret.TouchEvent.TOUCH_BEGIN, () => { rightDrag = true; }, this); rightCon.addEventListener(egret.TouchEvent.TOUCH_END, () => { rightDrag = false; }, this); this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, (e) => { if(rightDrag){ rightCon.x = e.stageX - rightCage.width/2; rightCon.y = e.stageY - rightCage.height/2; } }, this); }}阅读全文
0 0
- Egret快速入门
- Egret + TiledMap 快速上手
- Egret学习入门
- egret 入门 初试
- Egret教程（一、入门）
- Egret
- Egret
- 白鹭（egret）搜素引擎入门
- 白鹭引擎Egret入门知识补充
- Egret该怎样学？看看这几本入门书籍
- 快速入门
- Egret杂记
- Egret起步
- egret第一步
- 【egret】 龙骨
- egret[12.23]
- Egret学习
- Egret笔记
- Session和线程
- Android中获取系统内存信息以及进程信息-----ActivityManager的使用(一)
- unity脚本中的协程Coroutine
- 排查在 Azure 中创建、重启 Windows VM 或调整其大小时发生的分配失败
- 活动安排问题
- Egret快速入门
- Java反编译工具使用对比，最好用的Java反编译工具 --- JD-GUI、XJad
- frame标签
- json通过gson的包转JsonArray
- maven 禁用插件
- c++学习笔记之基础篇
- Maven下解决Cannot change version of project facet Dynamic Web module to 3.0
- StringBuffer
- oracle 日期查询
