EVA.js学习笔记（三）尺寸、位置、缩放、斜切、旋转

在eva.js中，通过了transform对象来控制游戏对象的尺寸、位置、缩放、斜切、旋转等属性。

Transform 是一个默认组件，每个 GameObject 默认创建 Transform 组件实例，

在这个官方例子中很好的进行了演示如何进行定位操作

首先看一个基本的gameObject生成的时候的属性，称之为一个transform 对象

const gameObject = new GameObject('empty', {
  size: { width: 100, height: 100 }, // 尺寸
  position: { x: 0, y: 0 }, // 位移
  origin: { x: 0, y: 0 }, // 物体原点（物体内部的一个点）
  anchor: { x: 0, y: 0 }, // 锚点，相对于父级的宽高的比率的一个点，物体的原点会相对于这个点进行位移
  scale: { x: 1, y: 1 }, // 缩放比例
  skew: { x: 0, y: 0 }, // 斜切弧度
  rotation: 0 // 旋转弧度
})

因为 transform 对象非常常用，我们可以通过 gameObject.transform 拿到该组件，例如修改游戏对象宽高

gameObject.transform.size.width = 200
gameObject.transform.size.height = 200

也可以获取其他的属性进行修改,例如修改游戏对象的位置

gameObject.transform.position.x = 200
gameObject.transform.position.y = 200

origin属性是物体的原点，决定了旋转和斜切的基准点

const image2 = new GameObject('image2', {
  size: { width: 150, height: 150 },
  origin:{x:0.5,y:0.5},//把原定设置在物体中间（）
  position: {
    x: 0,
    y: 0,
  },
  anchor,
});

下图中绿色的点就是orgin,可以通过设置position位移物体的一半距离，来将红色图片完整显示

\

anchor属性是锚点，posiztion是相对于anchor的位置来进行相对的位移。

\

当不知道父元素的高度和宽度的时候，就无法使用position来将物体定位到屏幕的边界位置，则可以使用anchor来完成。在实际操作中非常实用。

anchor的单位是百分比，1就是父元素的100%，使用anchor定位就可以很容易的将图片定位到居中，左上角，左下角，右下角，右上角等操作（同时需要配合orgin的调整，否则物体会显示到屏幕外面）。

anchor: { x: 0,y: 0,}//左上角
anchor: { x: 1,y: 0,}//右上角
anchor: { x: 0,y: 1,}//左下角
anchor: { x: 1,y: 1,}//右下角

skew，rotation属性，是以π来计算角度的，如果想要翻转180°，就使用 Math.Pi来表示，如果想旋转90°就是Math.Pi*0.5，以此类推。他们都是以origin为中心点进行2D（rotation）平面上和3D（skew）坐标轴上的的旋转。

例如

const image2 = new GameObject('image2', {
  size: { width: 150, height: 150 },
  origin:{x:0.5,y:0.5},
  position: {
    x: 0,
    y: 0,
  },
  anchor:{x:0.5,y:0.5},
  skew: { x: Math.PI * 0.25, y:0 }, // 斜切弧度
  rotation: 0 , // 旋转弧度
});