白鹭引擎 - 拖拽效果 ( 触屏交互的四大常用事件 )

class Main extends egret.DisplayObjectContainer {

    /**
     * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 super )
     * constructor 是类的构造函数, 类在实例化的时候调用
     * egret.Event.ADDED_TO_STAGE, 在将显示对象添加到舞台显示列表时调度
     */
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    /**
     * 手机屏幕的四大接触事件
     * egret.TouchEvent.TOUCH_TAP   点击事件
     * egret.TouchEvent.TOUCH_BEGIN 手指开始点击时
     * egret.TouchEvent.TOUCH_MOVE  手指在屏幕移动时
     * egret.TouchEvent.TOUCH_END   手指离开时
     */
    private onAddToStage(event: egret.Event) {

        // 设定2个偏移量
        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);
    
     // 如果要给显示对象添加事件, 一定要将事件能力属性设置为 true
     circle.touchEnabled = true;

        // 手指按到屏幕,触发 startMove 方法 
        circle.addEventListener(egret.TouchEvent.TOUCH_BEGIN, startMove, this);

        //手指离开屏幕,触发 stopMove 方法
        circle.addEventListener(egret.TouchEvent.TOUCH_END, stopMove, this);

        //计算手指和圆形的距离, 当手指在屏幕上移动时触发 onMove 方法
        function startMove(e: egret.TouchEvent): void {
            offsetX = e.stageX - circle.x;
            offsetY = e.stageY - circle.y;
            this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, onMove, this);
        }
    
        //手指离开屏幕,移除手指移动的监听
        function stopMove(e: egret.TouchEvent) {  
       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; } } }

 

转载于:https://www.cnblogs.com/lovling/p/8398769.html

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值