Egret Engine（五）：2D渲染-容器、添加点击事件、本地坐标和容器坐标

展示：

示例：

//创建一个空的 DisplayObjectContainer，把它的 x 和 y 坐标都改为
const container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
container.x = 200;
container.y = 200;
this.addChild(container);

//画一个红色的圆，添加到 container 中
const circle: egret.Shape = new egret.Shape();
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(25, 25, 25);
circle.graphics.endFill();
container.addChild(circle);

//给圆增加点击事件
circle.touchEnabled = true;
circle.addEventListener(egret.TouchEvent.TOUCH_TAP, onClick, this);

function onClick(): void {

    // 把舞台左上角的坐标(0,0)转换为 container 内部的坐标
    // 以上以下段落可以理解成：舞台的 (0, 0) 相对于 container 的位置为 (-200，-200) 
    const targetPoint: egret.Point = container.globalToLocal(0, 0);
    //重新定位圆，可以看到圆形移到了屏幕的左上角
    circle.x = targetPoint.x;
    circle.y = targetPoint.y;

    console.log(targetPoint.x, targetPoint.y); // (-200，-200) 舞台的 (0, 0) 相对于 container 的位置为 (-200，-200) 
    console.log('容器位置:', container.x, container.y); // (200, 200) 容器位置没有变化
    console.log('圆的位置:', circle.x, circle.y); // (-200，-200)
    
}

console.log('容器位置:', container.x, container.y); // (200, 200) 容器位置
console.log('圆的位置:', circle.x, circle.y); //  (0, 0) 相对于容器的位置