Skip to content

Commit

Permalink
Flip Matrix properties #b and#c
Browse files Browse the repository at this point in the history 
Their definition was reversed from almost all other Matrix implementations I've encountered.
  • Loading branch information
@lehni
lehni committed Feb 14, 2016
1 parent 40d0fca commit e35a55f
Showing 1 changed file with 61 additions and 59 deletions.
120 changes: 61 additions & 59 deletions src/basic/Matrix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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);
},

Expand All @@ -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(', ') + ']]';
},

Expand All @@ -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;
Expand Down Expand Up @@ -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;
},
Expand Down Expand Up @@ -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());
Expand Down Expand Up @@ -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;
},
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
},
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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() {
Expand All @@ -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;
},

Expand All @@ -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);
},

Expand Down Expand Up @@ -561,17 +563,17 @@ 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);
},

_transformCoordinates: function(src, dst, count) {
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;
},
Expand Down Expand Up @@ -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;
Expand All @@ -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;

Expand Down Expand Up @@ -699,15 +701,15 @@ 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
*/

/**
* 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
*/

Expand Down Expand Up @@ -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 ];
},

/**
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit e35a55f

Please sign in to comment.