首先要在exml内要设置有对应按钮的ID
2,编写TypeScript脚本:
public mybutton:eui.Button; 函数内部:this.mybutton.addEventListener(egret.TouchEvent.TOUCH_TAP,(event:egret.TouchEvent)=>{
},this); 或者:this.mybutton.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{ //具体实现,按钮点击之后具体实现的功能 },this); 再者,也可以利用Image作为按钮背景,进行点击 GameUtil.bitmapToBtn(this.mybutton,(e)=>{ });
或者单独设一个函数做按钮点击事件的响应 this.mybutton.addEventListener(egret.TouchEvent.TOUCH_TAP,this.btnTouchHandler,this); private btnTouchHandler(event:egret.TouchEvent):void { console.log("button touched"); }
public static bitmapToBtn(bitmap: egret.Bitmap, callback) { bitmap.touchEnabled = true // 记录当前位置 const source: Point = new Point(bitmap.x, bitmap.y) // 记录原来的锚点 const sourceAnchor: Point = new Point(bitmap.anchorOffsetX, bitmap.anchorOffsetY) // 监听触摸事件 bitmap.addEventListener(egret.TouchEvent.TOUCH_BEGIN, () => { // 改变按钮的锚点 bitmap.anchorOffsetX = bitmap.width / 2 bitmap.anchorOffsetY = bitmap.height / 2 // 如果改变后的锚点和原来的不一样,那就需要改变按钮位置 if (!new Point(bitmap.anchorOffsetX, bitmap.anchorOffsetY).equal(sourceAnchor)) { bitmap.x = source.x + bitmap.anchorOffsetX bitmap.y = source.y + bitmap.anchorOffsetY } // 缩放 bitmap.scaleX = 0.95 bitmap.scaleY = 0.95 }, this) bitmap.addEventListener(egret.TouchEvent.TOUCH_TAP, () => { reset() // 这个事件发生才算是点击按钮 callback && callback() }, this) bitmap.addEventListener(egret.TouchEvent.TOUCH_CANCEL, reset, this) bitmap.addEventListener(egret.TouchEvent.TOUCH_END, reset, this) bitmap.addEventListener(egret.TouchEvent.TOUCH_RELEASE_OUTSIDE, reset, this) function reset() { bitmap.anchorOffsetX = sourceAnchor.x bitmap.anchorOffsetY = sourceAnchor.y bitmap.x = source.x bitmap.y = source.y bitmap.scaleX = 1 bitmap.scaleY = 1 } }
另,按钮的显示(标签显示内容)字体大小设置:
(<eui.Label>this.mybutton.labelDisplay).size = 50;
labelDisplay是个接口,使用eui.Label转换一下即可。