HTML5游戏引擎（五）-变换操作——锚点操作 & 修改锚点 & 本地坐标和舞台坐标 & 斜切

HTML5游戏引擎（五）-变换操作——锚点操作 & 修改锚点 & 本地坐标和舞台坐标 & 斜切

变换操作

锚点操作

每个显示对象都包含一个锚点,锚点默认位于显示对象的左上角。

当设置一个显示对象的坐标位置时,会以锚点为参照改变显示对象的绘图位置。同时,锚点相对于显示对象的位置也是可以改变的。

class AnchorTest extends egret.DisplayObjectContainer
{
    public constructor()
    {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    private onAddToStage(event:egret.Event)
    {
        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0x00ff00 );
        shp.graphics.drawRect( 0, 0, 100, 100 );
        shp.graphics.endFill();
        shp.x = 100;
        shp.y = 100;
        this.addChild( shp );
        // 锚点的偏移和X，Y的偏移是相反的
        shp.anchorOffsetX = 100;  // 100- 100 = 200
        shp.anchorOffsetY = 100;
    }
}

上面的代码中，绘制了一个绿色的正方形，锚点默认在正方形的左上角位置，通过设置 shp 的 x、y属性来改变正方形的位置。

效果如下图：

修改锚点

可通过anchorOffsetX和 anchorOffsetY属性访问修改锚点的位置。

修改上例锚点的位置，让锚点居于正方形左上角x轴 50 像素的位置，代码如下：

shp.anchorOffsetX = 50;

本地坐标和舞台坐标

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

//创建一个空的 DisplayObjectContainer，把它的 x 和 y 坐标都改为
var container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
container.x = 200;
container.y = 200;
this.addChild(container);
//画一个红色的圆，添加到 container 中
var 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 内部的坐标
    var targetPoint: egret.Point = container.globalToLocal(0,0);
    //重新定位圆，可以看到圆形移到了屏幕的左上角
    circle.x = targetPoint.x;
    circle.y = targetPoint.y;
}

同样，也可以使用 DisplayObject 类的 localToGlobal() 方法将本地坐标转换为舞台坐标。

斜切

斜切是对图像在2D空间进行的一种平行矩阵变形。

斜切可从两个方向进行控制，对X方向的斜切将导致矩形的底边在X方向发生相应的偏移。

如上图所示，是对白鹭小鸟进行X方向斜切10所达到的结果。左边是未变形的原始图片，右边是变形后的图片。

//设定对象的X方向斜切
mySprite.skewX = 10;

同理，对Y方向的斜切将导致矩形的右侧边在Y方向发生相应的偏移。

如上图所示，是对白鹭小鸟进行Y方向斜切10所达到的结果。

//设定对象的Y方向斜切
mySprite.skewY = 10;