egret轻触屏幕调整显示对象位置

效果示意图 -- 需求: 圆圈跟随光标移动

逻辑(超简单,但很容易踩坑)

1. 画一个圆

    private draw() {
        var drawCir:egret.Shape = new egret.Shape();
        drawCir.graphics.beginFill(0xfff000);
        drawCir.graphics.drawCircle(0, 0, 50);
        drawCir.x = drawCir.y = 100;
        drawCir.graphics.endFill();
        this.addChild(drawCir);
    }

1)为什么不直接将第三四行代码整合成一行? 形如: drawCir.graphics.drawCircle(100, 100, 50);
  答: 如果圆,初始圆心的x,y轴坐标固定为100,那么后面鼠标点击舞台的时候,圆心没办法刚好是鼠标点击的位置,会增加额外计算量.

2. 给舞台添加鼠标点击事件

            this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (e: egret.TouchEvent) => {
                drawCir.x = e.localX;
                drawCir.y = e.localY;
            }, this);

1)直接这么写,会导致黄色圆圈以外的区域,点击效果失效,为什么?
  答: 跟代码加载速度有关,监听事件会发生在将绘制的圆圈添加到舞台之前.
  解决方法: 给舞台监听事件添加一个计时器,延缓其加载速度,确保监听事件发生在将绘制的圆圈添加到舞台之后.
修改后的代码如下

        egret.setTimeout(() => {
            this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (e: egret.TouchEvent) => {
                drawCir.x = e.localX;
                drawCir.y = e.localY;
            }, this);
        }, this, 500);

• 本案例中的显示对象,可以是如上自己绘制的图形,也可以是加载的图像资源等