Egret快速入门

2024-04-17 19:18
文章标签 入门 快速 egret

本文主要是介绍Egret快速入门，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

根据Egret的官方文档整理的最简单教程。

最基本的显示

    private onAddToStage(event: egret.Event) {egret.lifecycle.addLifecycleListener((context) => {// custom lifecycle plugincontext.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~1this._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中放一个正方形leftCagevar 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加上一个egretBirdif (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); }
}

这篇关于Egret快速入门的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/912617。

相关文章

shell脚本快速检查192.168.1网段ip是否在用的方法

shell脚本快速检查192.168.1网段ip是否在用的方法

《shell脚本快速检查192.168.1网段ip是否在用的方法》该Shell脚本通过并发ping命令检查192.168.1网段中哪些IP地址正在使用,脚本定义了网络段、超时时间和并行扫描数量,并使用... 目录脚本：检查 192.168.1 网段 IP 是否在用脚本说明使用方法示例输出优化建议总结检查 1
阅读更多...
Rust中的Option枚举快速入门教程

Rust中的Option枚举快速入门教程

《Rust中的Option枚举快速入门教程》Rust中的Option枚举用于表示可能不存在的值,提供了多种方法来处理这些值,避免了空指针异常,文章介绍了Option的定义、常见方法、使用场景以及注意事... 目录引言Option介绍Option的常见方法Option使用场景场景一：函数返回可能不存在的值场景
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

在日常使用电脑的过程中，我们经常会遇到这样的情况：一不小心，桌面上的某个重要文件被删除了。这时，大多数人可能会感到惊慌失措，不知所措。 其实，不必过于担心，因为有很多方法可以帮助我们找回被删除的桌面文件。下面，就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件，并且还没有进行其他操作，那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...
poj 2104 and hdu 2665 划分树模板入门题

poj 2104 and hdu 2665 划分树模板入门题

题意： 给一个数组n（1e5）个数，给一个范围（fr， to， k），求这个范围中第k大的数。 解析： 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码： poj 2104： #include <iostream>#include <cstdio>#include <cstdlib>#include <al
阅读更多...
hdu 4565 推倒公式+矩阵快速幂

hdu 4565 推倒公式+矩阵快速幂

题意 求下式的值： Sn=⌈ (a+b√)n⌉%m S_n = \lceil\ (a + \sqrt{b}) ^ n \rceil\% m 其中： 0<a,m<215 0< a, m < 2^{15} 0<b,n<231 0 < b, n < 2^{31} (a−1)2<b<a2 (a-1)^2< b < a^2 解析 令： An=(a+b√)n A_n = (a +
阅读更多...
MySQL-CRUD入门1

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2