How to enable non-uniform scaling at corners on fabric js

Question

If you use a middle top, middle left etc control point its possible to scale an object in that axis. But if you use the corners then the object is always scaled uniformly. Is there a way to disable that uniform/proportional scaling on the corner control points?

Answer 1

The solution is to set uniScaleTransform to true on the fabric.Canvas instance. It's absolutely not obvious from the Fabric.js documentation and is only mentioned once in the Introduction, Part 4 under the Object transformation section

There's a number of other transformation-related properties available in Fabric since version 1.0. One of them is "uniScaleTransform". It's false by default, and can be used to enable non-uniform scaling of object; in other words, it allows to change object's proportions when dragging by the corners.

You can set the flag during instantiation:

var fabric = new fabric.Canvas(canvasEl, {
    // ...
    uniScaleTransform: true
});

or change it later:

fabric.uniScaleTransform = true;

The flag is ignored for objects with lockUniScaling since fabric.js v1.1.9.

The related source code:

_onScale: function(e, transform, x, y) {
  // rotate object only if shift key is not pressed
  // and if it is not a group we are transforming
  if ((e.shiftKey || this.uniScaleTransform) && !transform.target.get('lockUniScaling')) {
    transform.currentAction = 'scale';
    this._scaleObject(x, y);
  }
  else {
    // Switch from a normal resize to proportional
    if (!transform.reset && transform.currentAction === 'scale') {
      this._resetCurrentTransform(e, transform.target);
    }

    transform.currentAction = 'scaleEqually';
    this._scaleObject(x, y, 'equally');
  }
},