123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449 |
- import {
- createTypedArray,
- } from '../utils/helpers/arrays';
- /*!
- Transformation Matrix v2.0
- (c) Epistemex 2014-2015
- www.epistemex.com
- By Ken Fyrstenberg
- Contributions by leeoniya.
- License: MIT, header required.
- */
- /**
- * 2D transformation matrix object initialized with identity matrix.
- *
- * The matrix can synchronize a canvas context by supplying the context
- * as an argument, or later apply current absolute transform to an
- * existing context.
- *
- * All values are handled as floating point values.
- *
- * @param {CanvasRenderingContext2D} [context] - Optional context to sync with Matrix
- * @prop {number} a - scale x
- * @prop {number} b - shear y
- * @prop {number} c - shear x
- * @prop {number} d - scale y
- * @prop {number} e - translate x
- * @prop {number} f - translate y
- * @prop {CanvasRenderingContext2D|null} [context=null] - set or get current canvas context
- * @constructor
- */
- const Matrix = (function () {
- var _cos = Math.cos;
- var _sin = Math.sin;
- var _tan = Math.tan;
- var _rnd = Math.round;
- function reset() {
- this.props[0] = 1;
- this.props[1] = 0;
- this.props[2] = 0;
- this.props[3] = 0;
- this.props[4] = 0;
- this.props[5] = 1;
- this.props[6] = 0;
- this.props[7] = 0;
- this.props[8] = 0;
- this.props[9] = 0;
- this.props[10] = 1;
- this.props[11] = 0;
- this.props[12] = 0;
- this.props[13] = 0;
- this.props[14] = 0;
- this.props[15] = 1;
- return this;
- }
- function rotate(angle) {
- if (angle === 0) {
- return this;
- }
- var mCos = _cos(angle);
- var mSin = _sin(angle);
- return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
- }
- function rotateX(angle) {
- if (angle === 0) {
- return this;
- }
- var mCos = _cos(angle);
- var mSin = _sin(angle);
- return this._t(1, 0, 0, 0, 0, mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1);
- }
- function rotateY(angle) {
- if (angle === 0) {
- return this;
- }
- var mCos = _cos(angle);
- var mSin = _sin(angle);
- return this._t(mCos, 0, mSin, 0, 0, 1, 0, 0, -mSin, 0, mCos, 0, 0, 0, 0, 1);
- }
- function rotateZ(angle) {
- if (angle === 0) {
- return this;
- }
- var mCos = _cos(angle);
- var mSin = _sin(angle);
- return this._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
- }
- function shear(sx, sy) {
- return this._t(1, sy, sx, 1, 0, 0);
- }
- function skew(ax, ay) {
- return this.shear(_tan(ax), _tan(ay));
- }
- function skewFromAxis(ax, angle) {
- var mCos = _cos(angle);
- var mSin = _sin(angle);
- return this._t(mCos, mSin, 0, 0, -mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
- ._t(1, 0, 0, 0, _tan(ax), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
- ._t(mCos, -mSin, 0, 0, mSin, mCos, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
- // return this._t(mCos, mSin, -mSin, mCos, 0, 0)._t(1, 0, _tan(ax), 1, 0, 0)._t(mCos, -mSin, mSin, mCos, 0, 0);
- }
- function scale(sx, sy, sz) {
- if (!sz && sz !== 0) {
- sz = 1;
- }
- if (sx === 1 && sy === 1 && sz === 1) {
- return this;
- }
- return this._t(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1);
- }
- function setTransform(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) {
- this.props[0] = a;
- this.props[1] = b;
- this.props[2] = c;
- this.props[3] = d;
- this.props[4] = e;
- this.props[5] = f;
- this.props[6] = g;
- this.props[7] = h;
- this.props[8] = i;
- this.props[9] = j;
- this.props[10] = k;
- this.props[11] = l;
- this.props[12] = m;
- this.props[13] = n;
- this.props[14] = o;
- this.props[15] = p;
- return this;
- }
- function translate(tx, ty, tz) {
- tz = tz || 0;
- if (tx !== 0 || ty !== 0 || tz !== 0) {
- return this._t(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, ty, tz, 1);
- }
- return this;
- }
- function transform(a2, b2, c2, d2, e2, f2, g2, h2, i2, j2, k2, l2, m2, n2, o2, p2) {
- var _p = this.props;
- if (a2 === 1 && b2 === 0 && c2 === 0 && d2 === 0 && e2 === 0 && f2 === 1 && g2 === 0 && h2 === 0 && i2 === 0 && j2 === 0 && k2 === 1 && l2 === 0) {
- // NOTE: commenting this condition because TurboFan deoptimizes code when present
- // if(m2 !== 0 || n2 !== 0 || o2 !== 0){
- _p[12] = _p[12] * a2 + _p[15] * m2;
- _p[13] = _p[13] * f2 + _p[15] * n2;
- _p[14] = _p[14] * k2 + _p[15] * o2;
- _p[15] *= p2;
- // }
- this._identityCalculated = false;
- return this;
- }
- var a1 = _p[0];
- var b1 = _p[1];
- var c1 = _p[2];
- var d1 = _p[3];
- var e1 = _p[4];
- var f1 = _p[5];
- var g1 = _p[6];
- var h1 = _p[7];
- var i1 = _p[8];
- var j1 = _p[9];
- var k1 = _p[10];
- var l1 = _p[11];
- var m1 = _p[12];
- var n1 = _p[13];
- var o1 = _p[14];
- var p1 = _p[15];
- /* matrix order (canvas compatible):
- * ace
- * bdf
- * 001
- */
- _p[0] = a1 * a2 + b1 * e2 + c1 * i2 + d1 * m2;
- _p[1] = a1 * b2 + b1 * f2 + c1 * j2 + d1 * n2;
- _p[2] = a1 * c2 + b1 * g2 + c1 * k2 + d1 * o2;
- _p[3] = a1 * d2 + b1 * h2 + c1 * l2 + d1 * p2;
- _p[4] = e1 * a2 + f1 * e2 + g1 * i2 + h1 * m2;
- _p[5] = e1 * b2 + f1 * f2 + g1 * j2 + h1 * n2;
- _p[6] = e1 * c2 + f1 * g2 + g1 * k2 + h1 * o2;
- _p[7] = e1 * d2 + f1 * h2 + g1 * l2 + h1 * p2;
- _p[8] = i1 * a2 + j1 * e2 + k1 * i2 + l1 * m2;
- _p[9] = i1 * b2 + j1 * f2 + k1 * j2 + l1 * n2;
- _p[10] = i1 * c2 + j1 * g2 + k1 * k2 + l1 * o2;
- _p[11] = i1 * d2 + j1 * h2 + k1 * l2 + l1 * p2;
- _p[12] = m1 * a2 + n1 * e2 + o1 * i2 + p1 * m2;
- _p[13] = m1 * b2 + n1 * f2 + o1 * j2 + p1 * n2;
- _p[14] = m1 * c2 + n1 * g2 + o1 * k2 + p1 * o2;
- _p[15] = m1 * d2 + n1 * h2 + o1 * l2 + p1 * p2;
- this._identityCalculated = false;
- return this;
- }
- function multiply(matrix) {
- var matrixProps = matrix.props;
- return this.transform(
- matrixProps[0],
- matrixProps[1],
- matrixProps[2],
- matrixProps[3],
- matrixProps[4],
- matrixProps[5],
- matrixProps[6],
- matrixProps[7],
- matrixProps[8],
- matrixProps[9],
- matrixProps[10],
- matrixProps[11],
- matrixProps[12],
- matrixProps[13],
- matrixProps[14],
- matrixProps[15]
- );
- }
- function isIdentity() {
- if (!this._identityCalculated) {
- this._identity = !(this.props[0] !== 1 || this.props[1] !== 0 || this.props[2] !== 0 || this.props[3] !== 0 || this.props[4] !== 0 || this.props[5] !== 1 || this.props[6] !== 0 || this.props[7] !== 0 || this.props[8] !== 0 || this.props[9] !== 0 || this.props[10] !== 1 || this.props[11] !== 0 || this.props[12] !== 0 || this.props[13] !== 0 || this.props[14] !== 0 || this.props[15] !== 1);
- this._identityCalculated = true;
- }
- return this._identity;
- }
- function equals(matr) {
- var i = 0;
- while (i < 16) {
- if (matr.props[i] !== this.props[i]) {
- return false;
- }
- i += 1;
- }
- return true;
- }
- function clone(matr) {
- var i;
- for (i = 0; i < 16; i += 1) {
- matr.props[i] = this.props[i];
- }
- return matr;
- }
- function cloneFromProps(props) {
- var i;
- for (i = 0; i < 16; i += 1) {
- this.props[i] = props[i];
- }
- }
- function applyToPoint(x, y, z) {
- return {
- x: x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
- y: x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
- z: x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14],
- };
- /* return {
- x: x * me.a + y * me.c + me.e,
- y: x * me.b + y * me.d + me.f
- }; */
- }
- function applyToX(x, y, z) {
- return x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12];
- }
- function applyToY(x, y, z) {
- return x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13];
- }
- function applyToZ(x, y, z) {
- return x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14];
- }
- function getInverseMatrix() {
- var determinant = this.props[0] * this.props[5] - this.props[1] * this.props[4];
- var a = this.props[5] / determinant;
- var b = -this.props[1] / determinant;
- var c = -this.props[4] / determinant;
- var d = this.props[0] / determinant;
- var e = (this.props[4] * this.props[13] - this.props[5] * this.props[12]) / determinant;
- var f = -(this.props[0] * this.props[13] - this.props[1] * this.props[12]) / determinant;
- var inverseMatrix = new Matrix();
- inverseMatrix.props[0] = a;
- inverseMatrix.props[1] = b;
- inverseMatrix.props[4] = c;
- inverseMatrix.props[5] = d;
- inverseMatrix.props[12] = e;
- inverseMatrix.props[13] = f;
- return inverseMatrix;
- }
- function inversePoint(pt) {
- var inverseMatrix = this.getInverseMatrix();
- return inverseMatrix.applyToPointArray(pt[0], pt[1], pt[2] || 0);
- }
- function inversePoints(pts) {
- var i;
- var len = pts.length;
- var retPts = [];
- for (i = 0; i < len; i += 1) {
- retPts[i] = inversePoint(pts[i]);
- }
- return retPts;
- }
- function applyToTriplePoints(pt1, pt2, pt3) {
- var arr = createTypedArray('float32', 6);
- if (this.isIdentity()) {
- arr[0] = pt1[0];
- arr[1] = pt1[1];
- arr[2] = pt2[0];
- arr[3] = pt2[1];
- arr[4] = pt3[0];
- arr[5] = pt3[1];
- } else {
- var p0 = this.props[0];
- var p1 = this.props[1];
- var p4 = this.props[4];
- var p5 = this.props[5];
- var p12 = this.props[12];
- var p13 = this.props[13];
- arr[0] = pt1[0] * p0 + pt1[1] * p4 + p12;
- arr[1] = pt1[0] * p1 + pt1[1] * p5 + p13;
- arr[2] = pt2[0] * p0 + pt2[1] * p4 + p12;
- arr[3] = pt2[0] * p1 + pt2[1] * p5 + p13;
- arr[4] = pt3[0] * p0 + pt3[1] * p4 + p12;
- arr[5] = pt3[0] * p1 + pt3[1] * p5 + p13;
- }
- return arr;
- }
- function applyToPointArray(x, y, z) {
- var arr;
- if (this.isIdentity()) {
- arr = [x, y, z];
- } else {
- arr = [
- x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
- x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
- x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14],
- ];
- }
- return arr;
- }
- function applyToPointStringified(x, y) {
- if (this.isIdentity()) {
- return x + ',' + y;
- }
- var _p = this.props;
- return Math.round((x * _p[0] + y * _p[4] + _p[12]) * 100) / 100 + ',' + Math.round((x * _p[1] + y * _p[5] + _p[13]) * 100) / 100;
- }
- function toCSS() {
- // Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.
- /* if(this.isIdentity()) {
- return '';
- } */
- var i = 0;
- var props = this.props;
- var cssValue = 'matrix3d(';
- var v = 10000;
- while (i < 16) {
- cssValue += _rnd(props[i] * v) / v;
- cssValue += i === 15 ? ')' : ',';
- i += 1;
- }
- return cssValue;
- }
- function roundMatrixProperty(val) {
- var v = 10000;
- if ((val < 0.000001 && val > 0) || (val > -0.000001 && val < 0)) {
- return _rnd(val * v) / v;
- }
- return val;
- }
- function to2dCSS() {
- // Doesn't make much sense to add this optimization. If it is an identity matrix, it's very likely this will get called only once since it won't be keyframed.
- /* if(this.isIdentity()) {
- return '';
- } */
- var props = this.props;
- var _a = roundMatrixProperty(props[0]);
- var _b = roundMatrixProperty(props[1]);
- var _c = roundMatrixProperty(props[4]);
- var _d = roundMatrixProperty(props[5]);
- var _e = roundMatrixProperty(props[12]);
- var _f = roundMatrixProperty(props[13]);
- return 'matrix(' + _a + ',' + _b + ',' + _c + ',' + _d + ',' + _e + ',' + _f + ')';
- }
- return function () {
- this.reset = reset;
- this.rotate = rotate;
- this.rotateX = rotateX;
- this.rotateY = rotateY;
- this.rotateZ = rotateZ;
- this.skew = skew;
- this.skewFromAxis = skewFromAxis;
- this.shear = shear;
- this.scale = scale;
- this.setTransform = setTransform;
- this.translate = translate;
- this.transform = transform;
- this.multiply = multiply;
- this.applyToPoint = applyToPoint;
- this.applyToX = applyToX;
- this.applyToY = applyToY;
- this.applyToZ = applyToZ;
- this.applyToPointArray = applyToPointArray;
- this.applyToTriplePoints = applyToTriplePoints;
- this.applyToPointStringified = applyToPointStringified;
- this.toCSS = toCSS;
- this.to2dCSS = to2dCSS;
- this.clone = clone;
- this.cloneFromProps = cloneFromProps;
- this.equals = equals;
- this.inversePoints = inversePoints;
- this.inversePoint = inversePoint;
- this.getInverseMatrix = getInverseMatrix;
- this._t = this.transform;
- this.isIdentity = isIdentity;
- this._identity = true;
- this._identityCalculated = false;
- this.props = createTypedArray('float32', 16);
- this.reset();
- };
- }());
- export default Matrix;
|