diff --git a/src/basic/Matrix.js b/src/basic/Matrix.js index 2c9bd5d1..d3453ab9 100644 --- a/src/basic/Matrix.js +++ b/src/basic/Matrix.js @@ -23,15 +23,17 @@ * "parallelness" of lines. * * Such a coordinate transformation can be represented by a 3 row by 3 - * column matrix with an implied last row of [ 0 0 1 ]. This matrix - * transforms source coordinates (x,y) into destination coordinates (x',y') + * column matrix with an implied last row of `[ 0 0 1 ]`. This matrix + * transforms source coordinates `(x, y)` into destination coordinates `(x',y')` * by considering them to be a column vector and multiplying the coordinate * vector by the matrix according to the following process: * - * [ x ] [ a b tx ] [ x ] [ a * x + b * y + tx ] - * [ y ] = [ c d ty ] [ y ] = [ c * x + d * y + ty ] + * [ x ] [ a c tx ] [ x ] [ a * x + c * y + tx ] + * [ y ] = [ b d ty ] [ y ] = [ b * x + d * y + ty ] * [ 1 ] [ 0 0 1 ] [ 1 ] [ 1 ] * + * Note the locations of b and c. + * * This class is optimized for speed and minimizes calculations based on its * knowledge of the underlying matrix (as opposed to say simply performing * matrix multiplication). @@ -56,7 +58,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ this.set.apply(this, arguments); } else if (count === 1) { if (arg instanceof Matrix) { - this.set(arg._a, arg._c, arg._b, arg._d, arg._tx, arg._ty); + this.set(arg._a, arg._b, arg._c, arg._d, arg._tx, arg._ty); } else if (Array.isArray(arg)) { this.set.apply(this, arg); } else { @@ -75,17 +77,17 @@ var Matrix = Base.extend(/** @lends Matrix# */{ * Sets this transform to the matrix specified by the 6 values. * * @param {Number} a the a property of the transform - * @param {Number} c the c property of the transform * @param {Number} b the b property of the transform + * @param {Number} c the c property of the transform * @param {Number} d the d property of the transform * @param {Number} tx the tx property of the transform * @param {Number} ty the ty property of the transform * @return {Matrix} this affine transform */ - set: function(a, c, b, d, tx, ty, _dontNotify) { + set: function(a, b, c, d, tx, ty, _dontNotify) { this._a = a; - this._c = c; this._b = b; + this._c = c; this._d = d; this._tx = tx; this._ty = ty; @@ -114,7 +116,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ * @return {Matrix} a copy of this transform */ clone: function() { - return new Matrix(this._a, this._c, this._b, this._d, + return new Matrix(this._a, this._b, this._c, this._d, this._tx, this._ty); }, @@ -136,9 +138,9 @@ var Matrix = Base.extend(/** @lends Matrix# */{ */ toString: function() { var f = Formatter.instance; - return '[[' + [f.number(this._a), f.number(this._b), + return '[[' + [f.number(this._a), f.number(this._c), f.number(this._tx)].join(', ') + '], [' - + [f.number(this._c), f.number(this._d), + + [f.number(this._b), f.number(this._d), f.number(this._ty)].join(', ') + ']]'; }, @@ -148,7 +150,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ */ reset: function(_dontNotify) { this._a = this._d = 1; - this._c = this._b = this._tx = this._ty = 0; + this._b = this._c = this._tx = this._ty = 0; if (!_dontNotify) this._changed(); return this; @@ -194,8 +196,8 @@ var Matrix = Base.extend(/** @lends Matrix# */{ var point = Point.read(arguments), x = point.x, y = point.y; - this._tx += x * this._a + y * this._b; - this._ty += x * this._c + y * this._d; + this._tx += x * this._a + y * this._c; + this._ty += x * this._b + y * this._d; this._changed(); return this; }, @@ -225,8 +227,8 @@ var Matrix = Base.extend(/** @lends Matrix# */{ if (center) this.translate(center); this._a *= scale.x; - this._c *= scale.x; - this._b *= scale.y; + this._b *= scale.x; + this._c *= scale.y; this._d *= scale.y; if (center) this.translate(center.negate()); @@ -269,12 +271,12 @@ var Matrix = Base.extend(/** @lends Matrix# */{ b = this._b, c = this._c, d = this._d; - this._a = cos * a + sin * b; - this._b = -sin * a + cos * b; - this._c = cos * c + sin * d; - this._d = -sin * c + cos * d; - this._tx += tx * a + ty * b; - this._ty += tx * c + ty * d; + this._a = cos * a + sin * c; + this._b = cos * b + sin * d; + this._c = -sin * a + cos * c; + this._d = -sin * b + cos * d; + this._tx += tx * a + ty * c; + this._ty += tx * b + ty * d; this._changed(); return this; }, @@ -306,11 +308,11 @@ var Matrix = Base.extend(/** @lends Matrix# */{ if (center) this.translate(center); var a = this._a, - c = this._c; - this._a += shear.y * this._b; - this._c += shear.y * this._d; - this._b += shear.x * a; - this._d += shear.x * c; + b = this._b; + this._a += shear.y * this._c; + this._b += shear.y * this._d; + this._c += shear.x * a; + this._d += shear.x * b; if (center) this.translate(center.negate()); this._changed(); @@ -358,17 +360,17 @@ var Matrix = Base.extend(/** @lends Matrix# */{ c1 = this._c, d1 = this._d, a2 = mx._a, - b2 = mx._b, - c2 = mx._c, + b2 = mx._c, + c2 = mx._b, d2 = mx._d, tx2 = mx._tx, ty2 = mx._ty; - this._a = a2 * a1 + c2 * b1; - this._b = b2 * a1 + d2 * b1; - this._c = a2 * c1 + c2 * d1; - this._d = b2 * c1 + d2 * d1; - this._tx += tx2 * a1 + ty2 * b1; - this._ty += tx2 * c1 + ty2 * d1; + this._a = a2 * a1 + c2 * c1; + this._c = b2 * a1 + d2 * c1; + this._b = a2 * b1 + c2 * d1; + this._d = b2 * b1 + d2 * d1; + this._tx += tx2 * a1 + ty2 * c1; + this._ty += tx2 * b1 + ty2 * d1; this._changed(); return this; }, @@ -400,15 +402,15 @@ var Matrix = Base.extend(/** @lends Matrix# */{ tx1 = this._tx, ty1 = this._ty, a2 = mx._a, - b2 = mx._b, - c2 = mx._c, + b2 = mx._c, + c2 = mx._b, d2 = mx._d, tx2 = mx._tx, ty2 = mx._ty; - this._a = a2 * a1 + b2 * c1; - this._b = a2 * b1 + b2 * d1; - this._c = c2 * a1 + d2 * c1; - this._d = c2 * b1 + d2 * d1; + this._a = a2 * a1 + b2 * b1; + this._c = a2 * c1 + b2 * d1; + this._b = c2 * a1 + d2 * b1; + this._d = c2 * c1 + d2 * d1; this._tx = a2 * tx1 + b2 * ty1 + tx2; this._ty = c2 * tx1 + d2 * ty1 + ty2; this._changed(); @@ -448,8 +450,8 @@ var Matrix = Base.extend(/** @lends Matrix# */{ this._b = -b / det; this._c = -c / det; this._d = a / det; - this._tx = (b * ty - d * tx) / det; - this._ty = (c * tx - a * ty) / det; + this._tx = (c * ty - d * tx) / det; + this._ty = (b * tx - a * ty) / det; res = this; } return res; @@ -487,7 +489,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ * set to `0`. */ _shiftless: function() { - return new Matrix(this._a, this._c, this._b, this._d, 0, 0); + return new Matrix(this._a, this._b, this._c, this._d, 0, 0); }, _orNullIfIdentity: function() { @@ -498,7 +500,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ * @return {Boolean} whether this transform is the identity transform */ isIdentity: function() { - return this._a === 1 && this._c === 0 && this._b === 0 && this._d === 1 + return this._a === 1 && this._b === 0 && this._c === 0 && this._d === 1 && this._tx === 0 && this._ty === 0; }, @@ -509,7 +511,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ * @return {Boolean} whether the transform is invertible */ isInvertible: function() { - var det = this._a * this._d - this._b * this._c; + var det = this._a * this._d - this._c * this._b; return det && !isNaN(det) && isFinite(this._tx) && isFinite(this._ty); }, @@ -561,8 +563,8 @@ var Matrix = Base.extend(/** @lends Matrix# */{ if (!dest) dest = new Point(); return dest.set( - x * this._a + y * this._b + this._tx, - x * this._c + y * this._d + this._ty, + x * this._a + y * this._c + this._tx, + x * this._b + y * this._d + this._ty, _dontNotify); }, @@ -570,8 +572,8 @@ var Matrix = Base.extend(/** @lends Matrix# */{ for (var i = 0, max = 2 * count; i < max; i += 2) { var x = src[i], y = src[i + 1]; - dst[i] = x * this._a + y * this._b + this._tx; - dst[i + 1] = x * this._c + y * this._d + this._ty; + dst[i] = x * this._a + y * this._c + this._tx; + dst[i + 1] = x * this._b + y * this._d + this._ty; } return dst; }, @@ -633,8 +635,8 @@ var Matrix = Base.extend(/** @lends Matrix# */{ if (!dest) dest = new Point(); res = dest.set( - (x * d - y * b) / det, - (y * a - x * c) / det, + (x * d - y * c) / det, + (y * a - x * b) / det, _dontNotify); } return res; @@ -652,7 +654,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ // http://dev.w3.org/csswg/css3-2d-transforms/#matrix-decomposition // http://stackoverflow.com/questions/4361242/ // https://github.com/wisec/DOMinator/blob/master/layout/style/nsStyleAnimation.cpp#L946 - var a = this._a, b = this._b, c = this._c, d = this._d; + var a = this._a, b = this._c, c = this._b, d = this._d; if (Numerical.isZero(a * d - b * c)) return null; @@ -699,7 +701,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ * The value that affects the transformation along the y axis when rotating * or skewing, positioned at (1, 0) in the transformation matrix. * - * @name Matrix#c + * @name Matrix#b * @type Number */ @@ -707,7 +709,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{ * The value that affects the transformation along the x axis when rotating * or skewing, positioned at (0, 1) in the transformation matrix. * - * @name Matrix#b + * @name Matrix#c * @type Number */ @@ -737,13 +739,13 @@ var Matrix = Base.extend(/** @lends Matrix# */{ /** * The transform values as an array, in the same sequence as they are passed - * to {@link #initialize(a, c, b, d, tx, ty)}. + * to {@link #initialize(a, b, c, d, tx, ty)}. * * @bean * @type Number[] */ getValues: function() { - return [ this._a, this._c, this._b, this._d, this._tx, this._ty ]; + return [ this._a, this._b, this._c, this._d, this._tx, this._ty ]; }, /** @@ -786,11 +788,11 @@ var Matrix = Base.extend(/** @lends Matrix# */{ */ applyToContext: function(ctx) { if (!this.isIdentity()) { - ctx.transform(this._a, this._c, this._b, this._d, + ctx.transform(this._a, this._b, this._c, this._d, this._tx, this._ty); } } -}, Base.each(['a', 'c', 'b', 'd', 'tx', 'ty'], function(key) { +}, Base.each(['a', 'b', 'c', 'd', 'tx', 'ty'], function(key) { // Create getters and setters for all internal attributes. var part = Base.capitalize(key), prop = '_' + key;