网络游戏开发-客户端4 关于Egret的本地坐标和舞台坐标

因为最近公司事情比较多，所以没怎么更新博客。

不过咱们这个游戏还是在继续往下写。

今天晚上打算写斗地主的出牌动画，遇到一个问题，就是关于本地坐标和舞台坐标的计算问题

在Egret官网的解释是：x 和 y 属性始终是指显示对象相对于其父显示对象坐标轴的 (0,0) 坐标的位置。因此，对于包含在 DisplayObjectContainer 实例内的 Shape 实例（如圆），如果将 Shape 对象的 x 和 y 属性设置为 0，会将圆放在 DisplayObjectContainer 的左上角，但该位置不一定是舞台的左上角。若要确定对象相对于全局舞台坐标的位置，可以使用任何显示对象的 globalToLocal() 方法将坐标从全局（相对于舞台）坐标转换为本地（相对于显示对象容器）

在我正在写的游戏中的应用场景是

我需要把手上的牌，选中，然后出牌移动到出牌的位置去。

在Wing编辑器里面可以看到手牌是放在红色的框中，手牌的坐标是相对红框的相对坐标。但是出牌的位置是在最外面容器中的一个点上。

如果直接移动手牌到出牌点的坐标，运行程序，你会发现你的牌和你想象的移动的位置完全不一样。。。

这里就需要把出牌点的坐标换算为手牌父节点的本地坐标，然后进行移动

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="QcSkin" width="720" height="1280" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" >
    <w:Config id="163a761854a" ></w:Config>
    <e:Group id="Mygroup" width="482" height="574" x="136" y="378" anchorOffsetX="0" anchorOffsetY="0">
        <e:Button id="btnOk0" label="手上的牌" x="290" y="56" anchorOffsetX="0" width="146"/>
    </e:Group>
    <e:Button label="出牌的位置" x="360" y="640"/>
</e:Skin>

    btnOk0: eui.Button;
    Mygroup:eui.Group;
    protected childrenCreated(): void {
        super.childrenCreated();

        this.btnOk0.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            var point =  this.Mygroup.globalToLocal(360,640)
            console.log(point);
            
            egret.Tween.get(this.btnOk0).to({ x: point.x, y: point.y }, 2000, egret.Ease.backInOut);

        }, this)
    }