Fabric.js demos · Matrix transformation

The demo shows the result of applying transformMatrix to a Fabric object. For more on transformMatrix, see this excellent tutorial.

a: b:
c: d:
tx: ty:
transformMatrix == [ 1, 0, 0, 1, 0, 0 ]
mergedProperties:
ScaleX: 1,
ScaleY: 1,
SkewX: 0,
SkewY: 0,
top: 0,
left: 0,
flipX: 0,
flipY: 0,
angle: 0


TransformMatrix was the only way to represent some SVG transformations.
Since 2.0 the transformation can be decomponed and used with the normal object properties.
This is the code behind the merge button. There are no plans to update controls to respect transformMatrix, but probably deprecate it. 

  var obj = canvas.item(0);
  // get the current transform matrix, from object properties.
  var currentT = obj.calcTransformMatrix();
  // get the transformMatrix array
  var transformMatrix = obj.transformMatrix;
  // multiply the matrices together to get the combined transform
  var mT = fabric.util.multiplyTransformMatrices(currentT, transformMatrix);
  // Unfold the matrix in a combination of scaleX, scaleY, skewX, skewY...
  var options = fabric.util.qrDecompose(mT);
  var newCenter = { x: options.translateX, y: options.translateY };
  // reset transformMatrix to identity and resets flips since negative scale
  // resulting from decompose, will automatically set them.
  obj.transformMatrix = [ 1,0,0,1,0,0];
  obj.flipX = false;
  obj.flipY = false;
  obj.set(options);
  // position the object in the center given from translateX and translateY
  obj.setPositionByOrigin(newCenter, 'center', 'center');