'How to force proportional scaling using Fabricjs?

There has been multiple changes in the Fabricjs API that affect the way scaling points behave. One of the latest changes in version 4 (http://fabricjs.com/v4-breaking-changes) states that uniformScaling is now the way to go to force proportional scaling.

This is my test canvas:

<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

And this is my simple code snippet:

const canvas = (this.__canvas = new fabric.Canvas("c"));
canvas.uniformScaling = true;

const Add = () => {
  const rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: "yellow",
    width: 200,
    height: 100,
    stroke: "lightgreen",
  });
  canvas.add(rect);
  canvas.setActiveObject(rect);
};
Add();

See a codepen illustrating the issue.

Why are the control points for resizing horizontally and vertically still there? What am I doing wrong?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source