HumanBreak/docs/api/motajs-render-core/Transform.md

Transform 类 API 文档

以下内容由 DeepSeek R1 模型生成并微调。

---

继承关系

graph LR
    Transform --> EventEmitter

    click EventEmitter "https://nodejs.org/api/events.html#class-eventemitter"

---

属性说明

属性名	类型	默认值	说明
mat	mat3	单位矩阵	存储当前变换的 3x3 矩阵
x	number	0	水平平移量
y	number	0	垂直平移量
scaleX	number	1	水平缩放比例
scaleY	number	1	垂直缩放比例
rad	number	0	旋转弧度值（范围：[0, 2π)）
modified	boolean（私有）	false	标识变换是否被修改过
bindedObject	ITransformUpdatable	undefined	绑定的对象（当变换更新时自动调用其 updateTransform 方法）

---

构造方法

constructor

创建一个新的变换实例，初始化为单位矩阵。

const transform = new Transform();

---

方法说明

bind

function bind(obj?: ITransformUpdatable): void;

描述
绑定一个对象，当变换更新时自动调用其 updateTransform 方法（若存在）。

示例

const obj = { updateTransform: () => console.log('Transform updated!') };
transform.bind(obj);

---

reset

function reset(): void;

描述
重置所有参数到初始状态（单位矩阵）。

示例

transform.reset(); // 重置为 x=0, y=0, scaleX=1, scaleY=1, rad=0

---

scale

function scale(x: number, y: number = x): this;

描述
叠加缩放变换（相对于当前状态）。

参数

• x: 水平缩放比例
• y: 垂直缩放比例（默认同 x）

示例

transform.scale(2); // 水平和垂直均放大2倍
transform.scale(1.5, 0.5); // 水平放大1.5倍，垂直缩小到0.5倍

---

translate

function translate(x: number, y: number): this;

描述
叠加平移变换（相对于当前状态）。

参数

• x: 水平平移量
• y: 垂直平移量

示例

transform.translate(100, 50); // 向右平移100单位，向下平移50单位

---

rotate

function rotate(rad: number): this;

描述
叠加旋转变换（相对于当前状态）。

参数

• rad: 旋转弧度值

示例

transform.rotate(Math.PI / 2); // 顺时针旋转90度

---

setScale

function setScale(x: number, y: number = x): this;

描述
直接设置缩放比例（非叠加，覆盖当前状态）。

示例

transform.setScale(3, 2); // 设置水平缩放3倍，垂直缩放2倍

---

setTranslate

function setTranslate(x: number, y: number): this;

描述
直接设置平移量（非叠加，覆盖当前状态）。

示例

transform.setTranslate(200, 100); // 直接定位到(200, 100)

---

setRotate

function setRotate(rad: number): this;

描述
直接设置旋转角度（非叠加，覆盖当前状态）。

示例

transform.setRotate(Math.PI); // 设置旋转180度

---

transformed

function transformed(x: number, y: number): vec3;

描述
将坐标点 (x, y) 应用当前变换矩阵，返回变换后的坐标。

返回值

• vec3: 变换后的三维坐标（[x, y, 1]）

示例

const point = transform.transformed(10, 20); // 应用变换后的坐标

---

untransformed

function untransformed(x: number, y: number): vec3;

描述
将坐标点 (x, y) 逆向应用当前变换矩阵，返回原坐标。

示例

const origin = transform.untransformed(50, 30); // 逆向变换后的坐标

---

clone

function clone(): Transform;

描述
复制当前变换实例。

示例

const cloned = transform.clone(); // 生成一个完全相同的副本

---

静态方法说明

Transform.transformed

function transformed(transform: Transform, x: number, y: number): vec3;

描述
静态方法，直接通过变换矩阵计算坐标点 (x, y) 的变换结果。

示例

const result = Transform.transformed(transform, 5, 5);

---

Transform.untransformed

function untransformed(transform: Transform, x: number, y: number): vec3;

描述
静态方法，直接通过变换矩阵逆向计算坐标点 (x, y) 的原位置。

示例

const origin = Transform.untransformed(transform, 100, 50);

---

接口说明

ITransformUpdatable

interface ITransformUpdatable {
    updateTransform?(): void;
}

描述
可绑定对象的接口，当变换更新时触发 updateTransform 方法（可选）。

---

总使用示例

// 创建变换实例
const transform = new Transform();

// 应用变换
transform
    .translate(50, 30)
    .scale(2)
    .rotate(Math.PI / 4);

// 绑定对象
const obj = {
    updateTransform: () => console.log('Transform updated!')
};
transform.bind(obj);

// 坐标转换
const transformedPoint = transform.transformed(10, 10);
console.log('Transformed point:', transformedPoint);

// 复制变换
const cloned = transform.clone();

// 静态方法使用
const staticResult = Transform.transformed(cloned, 5, 5);