How to allow resizing while keeping aspect ratio in all cases?

Question

I have a fabricImage and I want to allow resizing while keeping the aspect ratio intact.

By default, Fabric.js allows resizing from:

• Corners, which scales both x and y proportionally (this works as expected).
• Edges (left, right, top, bottom), which scales only x or y, breaking the aspect ratio.

I tried setting lockScalingX = true and lockScalingY = true, but this completely prevents scaling, including corner scaling. Desired Behavior:

• Allow resizing from corners while maintaining the aspect ratio.
• Allow resizing from edges, but force uniform scaling so that dragging an edge scales both x and y equally. (or disable border scaling, both ok)
• Prevent aspect ratio from being broken when resizing from edges.

What I’ve tried:

• Setting lockScalingX = true and lockScalingY = true (prevents all scaling).
• Searching the documentation but haven't found a clear way to enforce aspect ratio for all resize handles.

How can I achieve this? Any help would be greatly appreciated!

Answer 1

Create custom controls with controlled scaling :

    fabric.FabricObject.prototype.controls = customControls();

Then make each controls individualy:

Action handler scalingEqually doc

const scaleEquallyControl = {
    cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
    actionHandler: fabric.controlsUtils.scalingEqually,
    actionName: "scaling",
};

Define defaultControl() with scalingEqually action handler demo | doc

export const customControls = () => ({
    ml: new fabric.Control({
        x: -0.5,
        y: 0,
        ...scaleEquallyControl,
    }),

    mr: new fabric.Control({
        x: 0.5,
        y: 0,
        ...scaleEquallyControl,
    }),

    mb: new fabric.Control({
        x: 0,
        y: 0.5,
        ...scaleEquallyControl,
    }),

    mt: new fabric.Control({
        x: 0,
        y: -0.5,
        ...scaleEquallyControl,
    }),
    ...yourOtherControls
})

Answer 2

Set the centeredScaling property of the fabric.Object.prototype to true.

  fabric.Object.prototype.centeredScaling = true;

This will ensure that all objects created using Fabric.js will have centered scaling enabled by default.

You can check Vue FabricJs Starter kit for basic structure initialization.