egret拖拽图片&位图

逻辑(比较简单)
  1. 加载图片资源并将其添加到舞台
    private _bird: egret.Bitmap;
    private onLoadRes() {
        this._bird = new egret.Bitmap();
        this._bird.texture = RES.getRes("yuck_png");
        this._bird.width = this._bird.height = 100;
        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 / 2;
        this.addChild(this._bird);
        this._bird.touchEnabled = true;
        this._bird.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.mouseDown, this);
        this._bird.addEventListener(egret.TouchEvent.TOUCH_END, this.mouseUp, this)
    }
  1. 给当前图片添加监听事件
     1)手指触摸屏幕的时候
    private _touchStatus: boolean = false;              //当前触摸状态,按下时 -> 值为true        
    private _distance: egret.Point = new egret.Point(); //核心点 -> 鼠标点击时,鼠标全局坐标与_bird的位置差
    private mouseDown(e: egret.TouchEvent) {
        this._distance.x = e.stageX - this._bird.x;
        this._distance.y = e.stageY - this._bird.y;
        this._touchStatus = true;
        this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.mouseMove, this);
    }
    private mouseMove(e: egret.TouchEvent) {
        console.log("moving now ! Mouse: [X:"+e.stageX+",Y:"+e.stageY+"]");
        if (this._touchStatus) {
            this._bird.x = e.stageX - this._distance.x;
            this._bird.y = e.stageY - this._distance.y;
        }
    }

 2)手指离开屏幕的时候

    private mouseUp() {
        console.log("mouse leave!")
        this._touchStatus = false;
        this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.mouseMove, this);
    }
关于egret中添加监听事件后是否移除的问题

写案例的时候发现,事件触发完毕后,不移除监听事件与移除监听事件的界面效果并没有差别。
于是,查阅了一下这方面的资料,
大部分资料中都明确表示,建议在使用监听事件后将其移除,
私以为,egret 中对于事件的监听未做相应的移除对游戏的体验影响,多少还取决于对象监听事件的数量,如果数量很少就不会有太大的影响,但是数量多了,就会有明显的卡顿。所以为了避免此类问题的存在,注册侦听器与移除侦听器建议成对出现。

  • 关于egret事件监听器,建议参考资料
    效果示意图: 点击显示元素开始拖拽,释放鼠标(或者抬起触摸手指)结束拖拽操作

你可能感兴趣的:(egret拖拽图片&位图)