pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 11.8 kB

Source Map (JSON)

View Raw

{"version":3,"file":"Transform.mjs","sources":["../../../src/utils/misc/Transform.ts"],"sourcesContent":["import { Matrix } from '../../maths/matrix/Matrix';\nimport { ObservablePoint } from '../../maths/point/ObservablePoint';\n\nimport type { Observer } from '../../maths/point/ObservablePoint';\n\n/**\n * Options for the {@link Transform} constructor.\n * @category utils\n * @advanced\n */\nexport interface TransformOptions\n{\n /** The matrix to use. */\n matrix?: Matrix;\n /**\n * The observer to use.\n * @advanced\n */\n observer?: {_onUpdate: (transform: Transform) => void}\n}\n\n/**\n * The Transform class facilitates the manipulation of a 2D transformation matrix through\n * user-friendly properties: position, scale, rotation, skew, and pivot.\n * @example\n * ```ts\n * // Basic transform usage\n * const transform = new Transform();\n * transform.position.set(100, 100);\n * transform.rotation = Math.PI / 4; // 45 degrees\n * transform.scale.set(2, 2);\n *\n * // With pivot point\n * transform.pivot.set(50, 50);\n * transform.rotation = Math.PI; // Rotate around pivot\n *\n * // Matrix manipulation\n * const matrix = transform.matrix;\n * const position = { x: 0, y: 0 };\n * matrix.apply(position); // Transform point\n * ```\n * @remarks\n * - Manages 2D transformation properties\n * - Auto-updates matrix on changes\n * - Supports observable changes\n * - Common in display objects\n * @category utils\n * @standard\n * @see {@link Matrix} For direct matrix operations\n * @see {@link ObservablePoint} For point properties\n */\nexport class Transform\n{\n /**\n * The local transformation matrix.\n * @internal\n */\n public _matrix: Matrix;\n\n /**\n * The coordinate of the object relative to the local coordinates of the parent.\n * @example\n * ```ts\n * // Basic position setting\n * transform.position.set(100, 100);\n *\n * // Individual coordinate access\n * transform.position.x = 50;\n * transform.position.y = 75;\n * ```\n */\n public position: ObservablePoint;\n\n /**\n * The scale factor of the object.\n * @example\n * ```ts\n * // Uniform scaling\n * transform.scale.set(2, 2);\n *\n * // Non-uniform scaling\n * transform.scale.x = 2; // Stretch horizontally\n * transform.scale.y = 0.5; // Compress vertically\n * ```\n */\n public scale: ObservablePoint;\n\n /**\n * The pivot point of the container that it rotates around.\n * @example\n * ```ts\n * // Center pivot\n * transform.pivot.set(sprite.width / 2, sprite.height / 2);\n *\n * // Corner rotation\n * transform.pivot.set(0, 0);\n * transform.rotation = Math.PI / 4; // 45 degrees\n * ```\n */\n public pivot: ObservablePoint;\n\n /**\n * The skew amount, on the x and y axis.\n * @example\n * ```ts\n * // Apply horizontal skew\n * transform.skew.x = Math.PI / 6; // 30 degrees\n *\n * // Apply both skews\n * transform.skew.set(Math.PI / 6, Math.PI / 8);\n * ```\n */\n public skew: ObservablePoint;\n\n /** The rotation amount. */\n protected _rotation: number;\n\n /**\n * The X-coordinate value of the normalized local X axis,\n * the first column of the local transformation matrix without a scale.\n */\n protected _cx: number;\n\n /**\n * The Y-coordinate value of the normalized local X axis,\n * the first column of the local transformation matrix without a scale.\n */\n protected _sx: number;\n\n /**\n * The X-coordinate value of the normalized local Y axis,\n * the second column of the local transformation matrix without a scale.\n */\n protected _cy: number;\n\n /**\n * The Y-coordinate value of the normalized local Y axis,\n * the second column of the local transformation matrix without a scale.\n */\n protected _sy: number;\n\n protected dirty = true;\n protected observer: Observer<Transform>;\n\n /**\n * @param options - Options for the transform.\n * @param options.matrix - The matrix to use.\n * @param options.observer - The observer to use.\n */\n constructor({ matrix, observer }: TransformOptions = {})\n {\n this._matrix = matrix ?? new Matrix();\n this.observer = observer;\n\n this.position = new ObservablePoint(this, 0, 0);\n this.scale = new ObservablePoint(this, 1, 1);\n this.pivot = new ObservablePoint(this, 0, 0);\n this.skew = new ObservablePoint(this, 0, 0);\n\n this._rotation = 0;\n this._cx = 1;\n this._sx = 0;\n this._cy = 0;\n this._sy = 1;\n }\n\n /**\n * The transformation matrix computed from the transform's properties.\n * Combines position, scale, rotation, skew, and pivot into a single matrix.\n * @example\n * ```ts\n * // Get current matrix\n * const matrix = transform.matrix;\n * console.log(matrix.toString());\n * ```\n * @readonly\n * @see {@link Matrix} For matrix operations\n * @see {@link Transform.setFromMatrix} For setting transform from matrix\n */\n get matrix(): Matrix\n {\n const lt = this._matrix;\n\n if (!this.dirty) return lt;\n\n lt.a = this._cx * this.scale.x;\n lt.b = this._sx * this.scale.x;\n lt.c = this._cy * this.scale.y;\n lt.d = this._sy * this.scale.y;\n\n lt.tx = this.position.x - ((this.pivot.x * lt.a) + (this.pivot.y * lt.c));\n lt.ty = this.position.y - ((this.pivot.x * lt.b) + (this.pivot.y * lt.d));\n\n this.dirty = false;\n\n return lt;\n }\n /**\n * Called when a value changes.\n * @param point\n * @internal\n */\n public _onUpdate(point?: ObservablePoint): void\n {\n this.dirty = true;\n\n if (point === this.skew)\n {\n this.updateSkew();\n }\n\n this.observer?._onUpdate(this);\n }\n\n /** Called when the skew or the rotation changes. */\n protected updateSkew(): void\n {\n this._cx = Math.cos(this._rotation + this.skew.y);\n this._sx = Math.sin(this._rotation + this.skew.y);\n this._cy = -Math.sin(this._rotation - this.skew.x); // cos, added PI/2\n this._sy = Math.cos(this._rotation - this.skew.x); // sin, added PI/2\n\n this.dirty = true;\n }\n\n // #if _DEBUG\n public toString(): string\n {\n return `[pixi.js/math:Transform `\n + `position=(${this.position.x}, ${this.position.y}) `\n + `rotation=${this.rotation} `\n + `scale=(${this.scale.x}, ${this.scale.y}) `\n + `skew=(${this.skew.x}, ${this.skew.y}) `\n + `]`;\n }\n // #endif\n\n /**\n * Decomposes a matrix and sets the transforms properties based on it.\n * @example\n * ```ts\n * // Basic matrix decomposition\n * const transform = new Transform();\n * const matrix = new Matrix()\n * .translate(100, 100)\n * .rotate(Math.PI / 4)\n * .scale(2, 2);\n *\n * transform.setFromMatrix(matrix);\n * console.log(transform.position.x); // 100\n * console.log(transform.rotation); // ~0.785 (π/4)\n * ```\n * @param matrix - The matrix to decompose\n * @see {@link Matrix#decompose} For the decomposition logic\n * @see {@link Transform#matrix} For getting the current matrix\n */\n public setFromMatrix(matrix: Matrix): void\n {\n matrix.decompose(this);\n this.dirty = true;\n }\n\n /**\n * The rotation of the object in radians.\n * @example\n * ```ts\n * // Basic rotation\n * transform.rotation = Math.PI / 4; // 45 degrees\n *\n * // Rotate around pivot point\n * transform.pivot.set(50, 50);\n * transform.rotation = Math.PI; // 180 degrees around pivot\n *\n * // Animate rotation\n * app.ticker.add(() => {\n * transform.rotation += 0.1;\n * });\n * ```\n * @see {@link Transform#pivot} For rotation point\n * @see {@link Transform#skew} For skew effects\n */\n get rotation(): number\n {\n return this._rotation;\n }\n\n set rotation(value: number)\n {\n if (this._rotation !== value)\n {\n this._rotation = value;\n this._onUpdate(this.skew);\n }\n }\n}\n"],"names":[],"mappings":"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"}