| a | c | tx|
| b | d | ty|
| 0 | 0 | 1 |

import { Matrix } from 'pixi.js';

const matrix = new Matrix();
// 返回一個(gè)默認(rèn)額單位矩陣
// [pixi.js:Matrix a=1 b=0 c=0 d=1 tx=0 ty=0]
// 1, 0, 0,
// 0, 1, 0,
// 0, 0, 1,

matrix.scale(3, 3);
// 放大為原來(lái)的 3 倍
// [pixi.js:Matrix a=3 b=0 c=0 d=3 tx=0 ty=0]
// 3, 0, 0,
// 0, 3, 0,
// 0, 0, 1,

// 支持鏈?zhǔn)綄?xiě)法（等價(jià)連續(xù)多個(gè)變換矩陣左乘）
matrix.rotate(Math.PI / 2).translate(10, 10);
// [pixi.js:Matrix a=1.8369701987210297e-16 b=3 c=-3 d=1.8369701987210297e-16 tx=10 ty=10]
// 上面這個(gè) a 應(yīng)該為 0，但因?yàn)楦↑c(diǎn)數(shù)誤差導(dǎo)致一個(gè)非常小的小數(shù)。

const leftMatrix = new Matrix();
const rightMatrix = new Matrix();

// 右乘
const newMatrix = leftMatrix.append(rightMatrix);

// 左乘
const newMatrix2 = rightMatrix.prepend(leftMatrix);

// 逆矩陣
const inverseMatrix = leftMatrix.invert();

const matrix = new Matrix();

// 點(diǎn)應(yīng)用矩陣后的結(jié)果
const point = matrix.apply({ x: 100, y: 100 });

// 應(yīng)用逆矩陣的結(jié)果
const inversePoint = matrix.applyInverse({ x: 100, y: 100 });

interface TransformableObject {
  position: PointData;
  scale: PointData;
  pivot: PointData;
  skew: PointData;
  rotation: number;
}

interface PointData {
  x: number;
  y: number;
}

class Transform {
    /**
     * This matrix is computed by combining this Transforms position, scale, rotation, skew, and pivot
     * properties into a single matrix.
     * @readonly
     */
    get matrix(): Matrix
    {
        const lt = this._matrix;

        if (!this.dirty) return lt;

        lt.a = this._cx * this.scale.x;
        lt.b = this._sx * this.scale.x;
        lt.c = this._cy * this.scale.y;
        lt.d = this._sy * this.scale.y;

        lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c));
        lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d));

        this.dirty = false;

        return lt;
    }
  
    /** Called when the skew or the rotation changes. */
    protected updateSkew(): void
    {
        this._cx = Math.cos(this._rotation + this.skew.y);
        this._sx = Math.sin(this._rotation + this.skew.y);
        this._cy = -Math.sin(this._rotation - this.skew.x); // cos, added PI/2
        this._sy = Math.cos(this._rotation - this.skew.x); // sin, added PI/2

        this.dirty = true;
    }
}

import { Matrix } from 'pixi.js';

const transformToMatrix = (tf: TransformableObject) => {
  const cosX = Math.cos(tf.rotation + tf.skew.y);
  const sinX = Math.sin(tf.rotation + tf.skew.y);
  const cosY = -Math.sin(tf.rotation - tf.skew.x);
  const sinY = Math.cos(tf.rotation - tf.skew.x);

  const skewMatrix = new Matrix(cosX, sinX, cosY, sinY, 0, 0);

  return new Matrix()
    .translate(-tf.pivot.x, -tf.pivot.y)
    .prepend(skewMatrix)
    .scale(tf.scale.x, tf.scale.y)
    .translate(tf.position.x, tf.position.y);
};

class Matrix {
      /**
     * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform.
     * @param transform - The transform to apply the properties to.
     * @returns The transform with the newly applied properties
     */
    public decompose(transform: TransformableObject): TransformableObject
    {
        // sort out rotation / skew..
        const a = this.a;
        const b = this.b;
        const c = this.c;
        const d = this.d;
        const pivot = transform.pivot;

        const skewX = -Math.atan2(-c, d);
        const skewY = Math.atan2(b, a);

        const delta = Math.abs(skewX + skewY);

        if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001)
        {
            transform.rotation = skewY;
            transform.skew.x = transform.skew.y = 0;
        }
        else
        {
            transform.rotation = 0;
            transform.skew.x = skewX;
            transform.skew.y = skewY;
        }

        // next set scale
        transform.scale.x = Math.sqrt((a * a) + (b * b));
        transform.scale.y = Math.sqrt((c * c) + (d * d));

        // next set position
        transform.position.x = this.tx + ((pivot.x * a) + (pivot.y * c));
        transform.position.y = this.ty + ((pivot.x * b) + (pivot.y * d));

        return transform;
    }
}