3, 容器内部显示对象相对源的切换 和 事件的添加

Posted 2020-10-07

class Main extends egret.DisplayObjectContainer {

    /**
     * 入口文件, 最先执行的构造方法
     * 这会实例化一个和手机屏幕一样大的舞台
     */
    public constructor() {
        super();
        this.once( egret.Event.ADDED_TO_STAGE, this.onAddToStage, this );
    }

    /**
     * 入口文件加载成功后执行的方法
     * 也是逻辑的开始
     */
    private onAddToStage(event:egret.Event) {
        /**
         * 创建一个显示对象, 作为空容器
         * 并添加到舞台
         */
        var stage: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
        stage.x = 50;
        stage.y = 50;
        this.addChild(stage);

        /**
         * 实例化显示对象( 一个圆 )
         * 正常情况下, 显示对象的横纵坐标都是相对于父容器的
         * 如果想改变相对于最外层, 可以使用 egret.Point 对象
         * 以及 globalToLocal(x,y) 将舞台的某个坐标转化为容器内的坐标
         * 在赋值给 显示对象
         */
        var myGrid:egret.Shape = new egret.Shape();
        myGrid.graphics.beginFill(0xffffff);
        myGrid.graphics.drawCircle(25, 25, 50);
        myGrid.graphics.endFill();
        stage.addChild(myGrid);

        /**
         * 添加点击事件, 打开对象的事件点击能力
         * 绑定回调方法
         */
        myGrid.touchEnabled = true;
        myGrid.addEventListener(egret.TouchEvent.TOUCH_TAP, onClick, this);
        function onClick():void {
            var targetPoint: egret.Point = stage.globalToLocal(25,25);
            myGrid.x = targetPoint.x;
            myGrid.y = targetPoint.y;
        }
    }

}